Разбор по косточкам 5 дизайнов начинающего веб-дизайнера Олега

Скоро стартует новый поток тренинга, на котором я также могу разобрать ваши работы

Итак, Олег, приветствую!

Давайте разберем ваши работы. Начнем с первой по стоматологии. Здесь, честно говоря, много советов я дать не могу, потому что вы делали в основном по видеокурсу. То есть, вашей работы здесь минимальное количество, но все же.

Во-первых, то, что необходимо заменить — это вот эту вот кнопочку. Она выпадает из общей цветовой гаммы, я бы рекомендовал сделать её зеленым, если хотите привлечь максимум внимания к ней, сделайте либо каким-то более темным оттенком, либо более светлым. Но цвет должен быть в одной цветовой гамме, как на всем сайте. Либо, если вы делаете голубой цвет, то какие-то еще элементы делайте голубыми. То есть, чтобы была не одна кнопка, а несколько элементов, 3-4 штуки на сайте тоже были в таком цвете, чтобы они были примерно по, скажем, одной тематике, то есть, все кнопочки голубые, все, какие-то, блоки голубые. Все, допустим, обводки этих картинок голубые, либо все заголовки голубого цвета. Что-то должно их объединять по какой-то тематике.

Что касается вот этой менюшки, я бы рекомендовал сделать чуть-чуть поменьше по высоте, чтобы не отнимала столько места. Так, телефон рекомендую перенести наверх, а кнопочку вниз, потому что люди все-таки сами чаще звонят, чем заказывают обратный звонок в несколько раз, поэтому необходимо эту информацию чуть повыше разместить.

Вот этот пункт «стоматология» необходимо, ну вот, в Екатеринбурге, выделить несколько жирнее и побольше, чтобы люди, когда заходили, знали куда попали, потому что по докторам непонятно, что они стоматологи. Если бы была какая-то другая иллюстрация, в принципе можно бы было бы текст сделать побольше.

Дальше. Вот здесь вот, сделайте в тексте отступ чуть-чуть побольше между строчками будет читаться полегче, а вот здесь вот уберите вот это вот растяжение по горизонтали. Текст, чтобы, легко читался короче. Следующий момент, везде используйте один и тот же шрифт, один и тот же размер для чтения. То есть, у вас во все 3 вот этих блоках разный шрифт разное начертание разное расстояние между строчками, такого быть не должно. Как я уже говорил в курсе, необходимо для заголовков использовать какой-то один размер и шрифт и для текста, но не более того, не нужно так извращаться и все разбирать на какие-то отдельные элементы.

Следующий момент, чуть больше пространства слева и справа сделайте, то есть, лучше перенести на следующую строчку, так будет смотреться чуточку лучше. Потому что сейчас по краям текст прилеплен и смотрится несколько негармонично. Почему? Потому что здесь у вас одинаковые расстояния, со всех краев смотрится классно. А здесь должно быть точно такое же расстояние, чтобы блоки были едиными. Тогда будет сайт смотреться профессионально, то есть, не должно быть различия в блоках.

Вот эту линию лучше убрать, либо если вы хотите создать вдавленный эффект, тогда вторую нужно сделать точно такую же, но более темным и зеленым оттенком и сместить на 1 пиксель вниз. Получится вдавленный эффект и будет смотреться красиво. А уж если вы делаете разделитель, то делайте до краев, не нужно оставлять какое-то пространство пустое. Либо, если хотите оставить пространство, то делайте по вертикальной линии, где у вас выравнивается текст. То есть,  чтобы было у человека визуально, вот такое вот очертание. Потому что текст у вас выравнивается по одной линии, а вот эта сплошная линия по другой линии. То есть, не должно быть такого хаоса.

Так, здесь все хорошо. По футеру я бы рекомендовал чуть уменьшить расстояние по высоте, а вот это свободное пространство сверху и снизу немножечко убавить, а так в принципе хорошо.

Так, на этой работе мы заканчиваем, переходим к следующей.

Так, здесь у нас мебель по индивидуальным проектам. Кстати, классная иллюстрация, мне, прямо, захотелось пожить в такой квартире. Скажем, иллюстрация заинтересовывает посмотреть сайт, очень круто. Вообще цветовая гамма, более и менее хорошо подобрана. Я бы рекомендовал сделать этот оттенок коричнево-оранжевый несколько более близким к темному дереву. Смотреться будет более богато и ближе по цветовой гамме к вот этой большой картинке, потому что здесь максимум коричневого цвета, разных светлых и темных оттенков, а у вас несколько более оранжевый что ли, ближе к красному.

Так, увеличу до полного размера. В принципе здесь в шапке все хорошо. По менюшке, опять же текст вы растянули по горизонтали, делать этого не нужно, делайте обычный шрифт без всяких растяжений, не нужных эффектов, потому что он усложняет восприятие текста, то есть, даже если у вас справа остается свободное пространство, ничего страшного, люди все равно этого не заметят. Главное, чтобы было так, как они привыкли видеть все различные менюшки на большинстве сайтов.

Следующее, что здесь необходимо сделать. Я бы немножечко закруглить, наверное, углы у данных блоков, смотрелось бы чуточку лучше. Плюс расстояние пустое здесь возле текста «каталог» и границ вот этого блока немножко увеличьте и выровняйте по высоте, чтобы был по центру, смотреться будет лучше. Ну, по поводу это линии вы уже продолжили, гораздо лучше смотрится, опять же лучше сделать теснением. Смотреться будет лучше. Расстояние между этими строчками нужно уменьшить, потому что оно, как бы, слишком большое получилось, при этом пустое пространство между текстом и границами блоков чуть-чуть увеличьте, наверное, раза в полтора, чтобы слева, снизу и сверху смотрелось чуточку побольше, восприниматься информация будет проще.

Так, ну вот этот текст я рекомендую вообще убрать. Да, если вы хотите акцию сделать, то сделайте небольшую иллюстрацию, даже если вобьете в поисковики где-то «стикер-акции», там их вылезет чуть ли не миллионы и возьмите какой-нибудь, смотреться будет гораздо лучше. Опять же текст смотрится тут, ну, во-первых он не читается, когда смотришь на такой текст и видишь очень много восклицательных знаков, непонятное форматирование, никто такой текст не читает, делать этого не нужно. Либо отформатируйте текст, возьмите какой-нибудь нормальный с других сайтов, применив рекомендации, которые я давал, либо поставьте иконку, стикер с акцией, привлекать внимания будет больше, чем текст.

Здесь все хорошо по тексту. По поводу работ: у вас тут небольшие рамочки, я бы рекомендовал до 2-3 пикселей, сейчас, по-моему, 1 пиксель стоит. Смотреться будет лучше.

И не нужно вот так вот прикреплять к низу, пусть у вас снизу останется пустое пространство, необходимо, чтобы везде между текстами, блоками и картинками было одинаковое расстояние, то есть, здесь у вас идет отделение строчек, точно также здесь такое же расстояние должно быть. Можно чуть увеличить, но чтобы не гигантское было такое пространство. Это, во-первых. Во-вторых, этот подзаголовок для небольшой галереи необходимо сместить чуть ниже, вот по этой линии будет самое то. Сюда, если вот поставите, смотреться будет гораздо лучше, потому что текст летает в пространстве, непонятно к какому блоку относится. Я понимаю, что вы выделяли по какой-то сетке, выравнивали, старались прикрепить к краям. Но, тем не менее, необходимо контент располагать сверху-вниз, а не прикреплять по каким-то частям, то есть, к футеру, левому краю и так далее.

По поводу этой картинки, если это логотип компании, то я бы рекомендовал немножко его обесцветить, сделать менее заметным, потому что никакой полезной информации для клиента он не несет, ничего он из этого не узнает. Можно при наведении сделать его цветным, но выберите какую-нибудь качественную графику, потому что здесь белые частички видно, когда вы вырезали, и смотрится непрофессионально и портит всю картину.

Вот эту менюшку необходимо поднять до одного уровня с вот этими иконками социальных сетей и текстом, то есть, все по одной линии выровнять, смотреться будет гармонично.

Вот эту информацию можно сделать чуть-чуть менее заметной, то есть понизить яркость белого, либо уменьшить непрозрачность, либо какой-то оттенок между белым и цветом вот этого фона выбрать, будет смотреться гораздо лучше. И вот здесь расстояние между блоками, точно также сделайте, чтобы равнялось вот этому расстоянию, то есть, здесь порядка 30 пикселей, а здесь порядка 15, то есть, раза в два-полтора необходимо увеличить, чтобы все смотрелось гармонично

В принципе работа хорошая, достойная, если исправить эти моменты то станет гораздо лучше.

Хорошо, идем дальше. Следующая у нас работа по грузоперевозкам насколько я помню, а переезды.

Здесь, в принципе иллюстрация человека хорошая, но на заднем фоне иллюстрация все портит, потому что она, во-первых, не качественная, во-вторых, плохо вставлена и плохо обработана, то есть, резко обрывается. От нее вообще лучше избавиться, то есть, если у вас, допустим, есть какая-то качественная картинка и некачественная, то на фоне качественной все что хуже будет резко теряться. то есть, если вы вставили какой-то один элемент супер качественный, то люди будут оценивать именно по нему, то есть, все остальное будет казаться им очень плохим. Соответственно, если вы хотите, чтобы ваш сайт в целом был хороший, а не так чтобы негативно воспринимался, то соответственно все элементы и картинки, блоки и так далее. должны быть примерно одинакового качества. То есть, не нужно, чтобы было что-то одно плохое, а что-то одно хорошее, потому что это сильно бьет по глазам и человек неосознанно начинает сравнивать все остальное, поэтому по качеству все должно быть примерно единое. Ну, и я бы рекомендовал что-то более тематическое подобрать, например, когда в грузовик что-нибудь загружают. В принципе, в интернете есть такие картинки.

Следующий момент, что я рекомендую здесь сделать, это сменить цветовую гамму, потому что этот красный цвет, особенно на синем, он просто бьет по глазам и читать невозможно. Тем более, данные элементы не совсем нужны, то есть, если белым цветом сделать выпадающий список, то будет вполне логично сделать здесь стрелочки. И если здесь выпадающий список, то соответственно его необходимо показать в одном элементе, как он будет выглядеть. Потому что программист-верстальщик не додумает, как он будет выглядеть. Может он сделает как-то, но, скорее всего, не так как вы хотели бы.

Вот эту вот кнопочку красную нужно сделать в соответствии с цветовой гаммой, потому что здесь вообще перебор: белый, синий, красный, снизу черный, голубой, то есть, слишком много цветов. Вам необходимо определиться.

Здесь вот в футере вполне хорошая сочетаемая цветовая гамма, темно-серый, красный и белый, то есть, если сделать все в такой цветовой гамме, будет хорошо смотреться. Либо выберите белый и голубой, и добавьте какой-нибудь дополнительный цвет, будет классно смотреться. Но от красного рекомендую избавиться. Вы очень любите привлекать внимание к кнопкам, но не так, чтобы это выбивалось из общей цветовой гаммы и так далее. То есть, добивайтесь цели, но при этом, не нарушая правил веб-дизайна.

По поводу блоков, те же самые рекомендации, что я давал в предыдущих работах. Вообще у вас все работы, примерно, по структуре одинаковые, если вы будете продолжать так делать, то вы будете очень медленно расти, вам необходимо в каждой работе пытаться сделать что-то новое, что-то классное и более высокого уровня. Только так вы будете расти, если вы будете делать одни и те же блоки, менять только цвет и контент, вы никогда не вырастете как веб-дизайнер, вы всегда будете зарабатывать примерно одинаковую сумму денег. В основном заказчики платят за очень крутой дизайн, то есть, отзывы и все остальное это второстепенно, в основном люди смотрят на дизайн, потом на отзывы и так далее. То есть, если у вас будут примерно одинаковые работы, то есть, через 2-3 года примерно такой же уровень останется, то смысла клепать одни и те же работы нету. Лучше брать качеством, чем количеством, скажем так. Потому что время у всех ограничено, и если вы будете много работать, то потом много денег потратите на восстановление здоровья. Я, к сожалению, через это прошел и не рекомендую.

Старайтесь выбирать несколько разные по стилям дизайны, по типам, то есть, если вы делаете интернет-визитку, то сделайте потом сайт интернет-магазина, потом сделайте дизайн промо сайта, то есть, для начала все попробуйте, когда попробуете, то поймете, что вам ближе, что нравится, получается или не получается и для себя определите, где вы сможете больше денег зарабатывать. То есть, если делать все одно и тоже, какую-то рутину, то и много зарабатывать не будете. Даже с учетом всех тех рекомендаций, которые я даю.

Вот здесь, в тексте на картинках сделайте побольше отступ, расстояние между строчками поменьше, сверху-слева и снизу-справа сделайте побольше свободного пространства, будет смотреться гораздо лучше. А вот эти заголовочки: квартирный, офисный и дачный переезды пожирнее.

По поводу отзывов. Первое, что необходимо сделать здесь, это убрать вот эту серую рамку, а лучше выберите цвет фона и выберите более темный оттенок, будет смотреться гораздо лучше. То есть, рамку будет видно и она будет в единой цветовой гамме. Плюс, если вы хотите сделать черный цвет, тогда голубой сделайте гораздо более светлым, либо взять вот этот синий цвет и на нем светлый текст, тоже смотреться будет хорошо. Но, тем не менее, такой цвет голубой лучше не оставлять, потому что смотрится очень вяли и некрасиво.

Вот эту картинку лучше сделать в кружочке, лучше смотрится, не знаю почему, воспринимается всеми и на всех топовых сайтах так делается. Либо, если хотите оставить квадратик, на котором фотография, рекомендую сгладить углы. Плюс выступ, который показывает, что текст от данной девушки сделайте раза в 2-3 меньше, чтобы люди его видели, но он не привлекал к себе слишком много внимания, потому что сейчас слишком большой.

По поводу футера, дубликат меню сделайте побольше, чтобы между текстом и границей сверху у этой менюшки было примерно одинаковое свободное пространство, тогда все будет смотреться органично и классно.

Вот такие рекомендации по этому сайту. Ну если мы посмотрим на первый экран, это, когда например человек открывает в ноутбуке, то видно переезды в Екатеринбурге, кусок картинки и телефон, в принципе больше он никакой информации не видит. При этом слева и справа очень много пустого пространства. Что бы я рекомендовал сделать: я бы уменьшил этого человека раза в полтора и подравнял все наверх, чтобы как минимум менюшку было видно и человек мог перейти, потому что в среднем люди сидят на сайтах от 15 до 20 секунд и они просто закрывать будут, потому что информации они здесь не получили. Последняя рекомендация такая.

Переходим к следующему сайту. Футер вы взяли, как я понял, с этого дизайна, но если вы уж берете футер, то, допустим, когда вы его ставили первым элементом, скорее всего, то тогда в соответствии с первым элементом делайте всю цветовую гамму, дабы так не получалось как в предыдущей работе по 5-6 цветов в основной цветовой гамме.

Здесь все гармонично смотрится, потому что 3 основных цвета: белый, черный, красный, все круто, перебора никакого нету. По структуре и так далее все в принципе хорошо.

По менюшке: я бы чуть выровнял это меню по высоте, потому что сверху чуть-чуть, или мне кажется, расстояние поменьше. Я бы еще, отдельно сделал его черным, вот здесь как футер, смотрелось бы наверное чуточку получше и выделялось, потому что сейчас сливается с данным блоком.

Кнопочку вот эту, я рекомендую сделать чуть побольше и текст соответственно на ней, чтобы привлекало побольше внимания, потому что сейчас ее можно немножко не заметить.

О компании: текст чуть-чуть побольше сделайте размеров, читаться будет проще. Те же самые рекомендации, которые были в предыдущей работе. Вы прям почти полностью взяли структуру и отдельные элементы, поэтому такие же рекомендации: больше свободного пространства и одинаковые со всех сторон.

Ну и по отзыву и по фото то же самое. Опять же, как видите, будем честными, вы пытаетесь схалявить. Делать проще не означает, что нужно лениться и не делать хорошие вещи, это означает, что у вас должна быть высокая цель, но при этом вы не должны сами себе усложнять работу какими-то сложными путями, то есть, делать максимально простые вещи для достижения сложной высокой цели. А вы изначально ставите себе какие-то легкие цели, это не есть хорошо. Не очень правильно, наверное, я объяснил где-то в курсе, то есть, ставьте для себя самые высокие цели, но делайте при этом простые действия, а не наоборот. Иначе вы не будете расти, а это очень плохо для заработка.

Дальше пятая работа – лендинг. Итак, у нас лендинг по автохимии. Вполне интересная иллюстрация, единственное, что бы я порекомендовал, это взять более качественную фоновую картинку, потому что девушка на машине более качественная, а сзади более размытое. Сзади фон можно размывать, но он должен размываться по некоторым законам физики, то есть, спереди фон будет четким, позади как раз будет размытым. То есть, можете где-нибудь найти такую картинку и вставить.

Второй момент – вот эта вот тень с помощью ластика удалите, потому что она сильно бьет по глазам и смотрится некрасиво, то есть, сделать как минимум плавный переход. Плюс вот здесь вот ластиком тоже подотрите чуть-чуть, чтобы было более естественным, скажем так.

По поводу цветовой гаммы. Я бы порекомендовал выбрать более зеленые оттенки, более яркие, наверное. Вообще, если бы я разрабатывал данный дизайн, я бы отталкивался непосредственно от данного футера, потому что человек, когда заходит на страницу он изначально видит довольно большую картинку и какие-то основные цвета. Здесь это: красный, желтый и, скажем, голубой. В этих цветах я бы и делал, соответственно, данный лендинг.

Полупрозрачные менюшки, в принципе, в моде были пару лет назад. Сейчас я бы уже так не делал, просто сделал бы простую заливку.

Следующее по меню, выровняйте по высоте, сверху получается поменьше, а снизу побольше расстояние. Я извиняюсь, на улице идет стройка соседних домов, ничего с этим сделать не могу, давайте продолжим.

По поводу номера телефона: я рекомендую сделать по ширине такой же как по кнопке, будет смотреться визуально как один единый блок. Плюс здесь снизу я бы сделал небольшую линию, такого же фонового цвета, но чуть более темный, как бы визуально, чтобы отделить менюшку от шапки.

По поводу цветовой гаммы. Я бы сделал чуть-чуть более яркую, потому что картинка у вас сама по себе, изначально, вызывает позитивные эмоции и цветовая гамма должна соответствовать данным эмоциям, а она несколько тусклая и унылая. Здесь сделано прикольно, единственное, что я бы придерживался единой цветовой гаммы, если у вас здесь на зеленоватом фоне идет желтый цвет, то соответственно в рамочке я бы тоже делал желтый цвет, смотрелось бы гораздо лучше.

Следующий момент, вот здесь вот рамки рекомендую сделать желтым. Вот здесь вот немного доработать, есть небольшие косяки, а лучше всего эти ленточки в поисковике введите, там ленточка.psd, там очень красивые ленты, ничего не придумывайте, а скачайте и вы увидите сразу качество лендинга. На начальном этапе не грех пользоваться такими исходниками, это гораздо проще и легче, чтобы сделать какой-то крутой дизайн.

И следующий момент, который я бы рекомендовал заменить — это поменять цветовую гамму вот этих вот заголовков и кнопок. Почему? Потому что вот здесь у вас кнопка идет желтая, соответственно, на всем лендинге, на всех элементах у вас должны быть те же цветовые гаммы, то есть, кнопки везде должны быть желтыми. Заголовочки, как раз лучше сделать таким вот зеленым цветом, смотреться будет гораздо лучше.

По поводу цены: вот это вот красным зачеркнутое лучше сделать черным цветом, чтобы привлекало меньше внимания, чем нынешняя красная цена. И лучше их поставить или ниже, или друг над другом.

Следующий момент, который не нужно делать при разработке дизайна, это такое количество одинаковых элементов, то есть, наша задача дизайнера показать, как будет выглядеть какой-то один блок, то есть, если вы показали, как выглядит, то все остальные делать не нужно, то есть, элементы у них одинаковые, меняется только текст, сам контент. Это сделает тот человек, который будет заполнять сайт, это его задача, ваша задача – показать, как будет выглядеть один конкретный элемент сайта, то есть, этот блок, если вы показали один, то остальные делать уже бессмысленно. То есть, если у заказчика будет такая задача, вы так и говорите, что потом верстальщики могут с помощью кода это спокойно дублировать и поменять картинки. Это не входит в задачи дизайнера, не нужно себе добавлять работы.

Следующий момент по поводу вот этой вот надписи. Фон у вас с текстом сливается, поэтому необходимо сделать контрастный цвет. Вообще не рекомендую делать текст на фоне, потому что тяжело читается, когда идет переход какой-то одной картинки в другую. Здесь различные кучи элементов, если вы хотите сделать текст, то я рекомендую разместить его, непосредственно, в правой части, где примерно одна одинаковая какая-то заливка, то есть, в основном это всегда небо, но при этом стоит сделать контрастный оттенок. Здесь будет, скорее всего, лучше темный цвет смотреться, если будет тиснение, будет выразительно. Но при этом, эту плашку серую по цвету необходимо убрать, смотреться будет гораздо лучше.

А вот эту вот формочку сделать чуть пожирнее, я, даже, знаю откуда вы ее взяли, ну ладно. Точнее текст у формочки сделайте чуть пожирнее, а поля, отступы сделайте побольше слева и справа, будет получше смотреться, тест внутри чуть поменьше и обводку не нужно делать таким жирным серым, чуть посветлее. Плюс выровняйте текст на кнопке, чтоб было везде: сверху, снизу, справа, слева одинаковое расстояние и вот эту вот 3D-шность, сделайте сначала цвет фона желтым и потом более темный оттенок, смотреться будет гораздо лучше.

Так патенты и акты, в принципе хорошо. Если стремиться к идеалу, в принципе я бы рекомендовал осветлить эти патенты, сделать их более светлыми с помощью уровней.

Так, отзывы наших клиентов: ну вот такой вот момент я бы рекомендовал убрать, если вы хотите сделать такие кружочки, которые как бы идут, то делайте на пустом белом фоне и несколько поменьше, т.е. прикреплять один объект к другому не нужно. Если уж так хотите сделать, то чтобы граница шла только по краям, по центру не заходило. И побольше пространства свободного, где текст добавьте, смотреться и читаться будет чуточку лучше.

Ну, и фон я бы сделал здесь желтым, потому что много элементов, или просто белым. Тоже смотрелось бы хорошо, потому что здесь сейчас идет перебор с зеленым.

Как мы работаем: в принципе хорошо, только для понимания я бы поставил здесь 1-ый момент, 2-ой момент, 3-ий, 4-ый, 5-ый и т.д. Доставка по всей России: вот этого человечка я бы убрал, потому что пока что, скорее всего, не умеете делать правильные тени, здесь он неправильно стоит на плоскости, то есть, много моментов, которые человек неосознанно будет понимать, что непрофессионально, некачественно это сделано. Лучше всего вообще убрать данную иллюстрацию с человеком и коробками. Будет лучше. Такой совет, если вы не можете качественно обработать какую-то графику, лучше от нее избавиться и не вставлять, дизайн будет только дороже от этого выглядеть.

По форме те же самые рекомендации, которые я давал выше. Здесь поднимите текст чуть повыше, не нужно делать такие пустые пространства. Стрелочку лучше убрать, тут в принципе кроме формы ничего и нету, а на данном этапе кнопочка желтая хорошо выделяется, ее и так видно, к поиску привлекать дополнительное внимание не нужно. По поводу данной графики, я бы от нее избавился, потому что это смотрится очень дешево. Скажем так, если компания предоставляет какие-то качественные услуги, то в принципе такое не используется.

Ну и по поводу футера, я бы рекомендовал все эти контакты выстроить в одну линию. И вот здесь вот сделать расстояние сверху и снизу примерно одинаковое, смотреться будет несколько лучше.

Вот такие вот рекомендации к вашим работам. В основном вам необходимо просто брать разные по типам и по стилям дизайны и больше практиковаться, потому что сейчас в принципе большая часть единой структуры одни и те же ошибки, скажем так.

Ну что ж, на этом все, выполняйте рекомендации, которые я дал, делайте, переделывайте и успехов на следующих уроках.

 

 

 

 

Пройдите курс "Профессия веб-дизайнер" за 10 дней бесплатно:



Понравилась статья?
Сделайте доброе дело — поделись ей со своими друзьями и коллегами, кликнув по всем кнопкам соц.сетей:

Нравится
comments powered by HyperComments