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

А ты хочешь прокачать свои навыки и чтобы я разобрал твои дизайны?

Итак, Марина, добрый день!

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

Ну что ж, давайте приступим. Начнём с первого лендинга, посвящённому аренде автомобилей.

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

Следующее то, что сильно бросается в глаза, это корявость всех шрифтов. Почему так происходит? Потому что у вас в фотошопе отключена функция заглаживания шрифтов. Давайте вам сейчас покажу. То есть, у вас в фотошопе сейчас стоит. Вот любой шрифт, который у вас написан. Сейчас мы перейдём в настройки шрифта, то у вас здесь вот в настройках сглаживание стоит «не показывать». То есть, текст получается по краям такой, как будто покусанный, с неровными краями. Соответственно, чтобы все было гладко, красиво, необходимо выставить либо резкость, либо чёткое начертание. То есть, если вы сравните: Было так до и как сейчас у вас стоит после — Воспринимается гораздо приятнее. То же самое можно выставить «чёткое» и смотреться тоже будет очень приятно для глаза и легко читаться. А сейчас же… так, что-то у нас вылезло. Довольно-таки проблематично читаются все шрифты, весь текст: что заголовки, что обычный текст, поэтому выставьте везде в настройках у текста вот это вот сглаживание.

И теперь давайте пойдём по пунктам сверху вниз, будем разбирать каждый элемент.

По поводу «авторент» аренды автомобилей, то есть, куда человек попал — это хорошо. Единственное, если вы пишите название компании, то, в принципе, у него должен быть логотип. Если логотипа нет, то, в принципе уже, компания не какая-то крупная, то можно вообще убрать название и просто написать «аренда автомобилей», потому что данное слово вызывает больше вопросов, нежели дает понимание куда человек попал, и не сразу понятно, что это название компании. По поводу, скажем, адреса я рекомендую немножко наверх сместить, либо вообще лучше переместить вот здесь вот, допустим, в правый блок, там, где контактная информация. Почему? Потому что по своей логике, по структуре лучше разместить всю контактную информацию в одном блоке, то есть, это будет гораздо лучше для восприятия. Человек, когда будет в дальнейшем просматривать сайт (скролить), он будет знать, что в правом верхнем углу находятся все контакты: и телефон, и кнопка, чтобы заказать обратный звонок, и посмотреть адрес куда приехать, и так далее, а не в разных частях. То есть, объединяйте в единые блоки примерно одинаковую информацию по смыслу, и людям будет воспринимать информацию гораздо проще.

Следующее по поводу данной вот этой формочки. Здесь, насколько я понимаю, вы хотели сделать какую-то акцию, чтобы человек заказывал услугу аренды автомобилей. Здесь, непосредственно, идёт заголовок и так далее, но помимо двух кнопок «войти», «зарегистрироваться» они вообще ни с той темы, ни с того сайта, то есть, это в основном на информационных сайтах, не на лендинге, здесь регистрироваться вообще ни к чему. Здесь необходима кнопка «заказать бронирование» и на подобие. То есть, это важный момент, их тоже необходимо прорабатывать, не нужно на авось ставить какие-то левые кнопки. Что касается самой формочки, то по размеру её необходимо делать, чтобы сверху, снизу, слева, справа у вас было одинаковое расстояние. То есть, сейчас сверху и снизу у вас гораздо больше, чем по краям. Расстояние, соответственно, необходимо уменьшить, потому что вы теряете драгоценное пространство. То есть, вот, допустим, у нас есть первый экран, и по факту кроме меню и вот этой информации мы ничего не видим. Если же вы умеете уменьшите по высоте вот эту форму, сделаете, допустим, ну порядка на 60-80 пикселей меньше, чуть подвинете наверх, картинку тоже наверх поднимете и у вас еще зацепится вот этот вот заголовок, возможно, кого-то заинтересует, и люди начнут читать. А так, может уйти, нажать на крестик и перейти к сайту-конкуренту. Поэтому необходимо грамотно свободным пространством работать и не оставлять его просто так.

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

Так, по поводу автомобилей. По структуре хорошо, а вот вырезаны они, либо вставлены тоже как-то коряво, я не знаю почему. Как-то они рябят в глаза, скажем так, точно так же, как и текст. Почему у вас так получилось я, честно говоря, не знаю, может быть вы вырезали каким-то инструментом быстрого выделения так могло получиться та, где у нас, то есть, вырезать не рекомендую этими инструментами. Как я уже говорил в курсе вырезать необходимо инструментом «перо», будет получаться максимально качественное выделение, иначе будут вот такие вот лесенки, так называемые, по краям на графике. Это некрасиво, это некачественно. Возможно, вы просто уменьшали размеры картинок, забыли нажимать клавишу Shift, чтобы сохранялись пропорции, поэтому картинка потеряла свое качество. Если трансформируйте через Ctrl+T свободную трансформаци., то не забывайте нажимать клавишу Shift, дабы пропорции сохранялись и качество картинки сохранялось. При этом не рекомендую увеличивать, а только уменьшать, потому что качество потеряется на картинке.

Ну по поводу кнопки то же самое. Здесь необходимо сменить её цвет, точнее оттенок сделать более зелёным.

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

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

Окей, переходим к следующей работе. Сейчас её открою. Это блок у нас путешественника. Так, здесь по шапке всё хорошо более-менее. менюшку я рекомендую сделать по жирнее и возможно чуть больше шрифтом как-то выделить, потому что не сразу её замечаешь. Текст сливается со зданиями, потому что тоже много белого, и не сразу его видно. Такой вот момент. По шрифту можно чуть-чуть на 2-4 пикселя сделать побольше, потому что довольно-таки тяжело воспринимается. Хотя, возможно, потому что у вас не стоит сглаживание. Попробуйте сначала сглаживание включить. Далее по карте, в принципе, всё хорошо, но опять же, вот это лучше сделать как заголовок и поместить по центру, сделать размером и жирностью побольше. Следующее, вот здесь вот точно также вырежете нормальные круги, чтобы не было вот этих рваных краев, будет смотреться гораздо более чётко и профессионально. Плюс вот эти вот заголовочки сделайте жирными, чтобы привлекали к себе внимание. Так, по поводу галереи тоже хорошо, но опять же, заголовки делайте пожирнее. На лендингах вообще заголовки обычно очень большие, очень, скажем, жирные привлекающие много внимания. У вас порядка 24 пикселей, обычно они раза в 2 больше. Так, по картиночкам, по галерее, в принципе, хорошо: просто, удобно. Здесь тоже вполне понятно и доступно, единственное, как бы расстояние снизу чуть-чуть уберите порядка там 30 пикселей, слишком много пустого пространства. Так, в принципе, дизайн вполне хороший.

Переходим к третьей работе. Следующий лендинг. Сейчас я подгоню под размер. Так, здесь у нас компания маркетинговая для бизнесменов. Давайте пойдём сверху вниз и будем разбирать различные элементы. Во-первых, вот этот заголовок необходимо сделать пожирнее, чтобы он сразу бросался в глаза, потому что изначально ну, как бы бросается вот эта фраза, потому что она тупо жирнее. То есть, вы должны размером, формой, цветом, жирностью и так далее привлекать внимание сначала к самым важным вещам, потом по степени приоритетности к более, точнее к менее важным. И, соответственно, с помощью вот этих вот параметров сделать так, чтоб человек смотрел сначала на какие-то элементы в первую очередь, потом на какие-то во вторую, в третью, в десятую и так далее. Здесь, соответственно, цель, чтобы человек оставил заявку на вот эти вот маркетинговые услуги, соответственно, скорее всего нажал на кнопочку «подробнее» и перешел на какую-то часть статьи на лендинге. Соответственно, необходимо сфокусировать внимание на заголовке и на кнопке. Соответственно, этот текст лучше всего принести вот сюда как подзаголовок, после заголовка убрать у него жирность, кнопочку необходимо сделать чуть меньше по высоте, потому что сейчас она какая-то гигантская получилась и по пропорциям не совсем красиво смотрится. Плюс выровнять этот текст по высоте, потому что сейчас он выше, стоит не посередине, для того чтобы смотрелось гармонично и их желательно сделать пожирнее. Что касается заголовка всё отлично, меню тоже в порядке. Контакты, телефон, точнее, я бы рекомендовал сделать пожирнее, потому что люди довольно-таки часто звонят, они сразу должны видеть телефон. В принципе, по шапочке все, приходим ниже. Так как у нас лендинг, я уже говорил, делать заголовки необходимо побольше раза в 1,5-2 смело можете ставить размер шрифта. Это, скажем так, особенность лендинга. В обычных сайтах — это неприемлемо, а на лендингах, скажем, это закономерность и стандарт. По поводу текста, в принципе, всё хорошо. По поводу размещения информации: делайте одинаковые отступы между блоками, то есть здесь у вас порядка 30 пикселей, здесь порядка наверно 40-50, то есть, такого быть не должно, везде должны быть равное расстояние. Выравнивайте иконки тоже по одной линии, как вы видите, они у вас все прыгают: это по одной линии, здесь съехало, это по третьей линии, плюс все иконке должны быть одинакового размера по высоте. Может быть, они немножко будут по ширине отличаться, но по высоте они должны быть одинаковые, тогда будет смотреться профессионально.

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

«Наши специалисты» по заголовку те же самые рекомендации. Здесь сделайте чуть больше свободного пространства, для того чтобы визуально вот эти блоки с информации разграничить, чтобы за счёт свободного пространства люди видели, что это у нас один блок с информацией, а это у нас второй блок из информации, соответственно, чтобы это сделать, уменьшите размер картинок, подвиньте текст налево, в каждом из блоков, и у вас вот здесь вот получится больше свободного пространства в 1,5-2 раза, будет самое то. Ну и плюс весь текст выровняйте по вертикальной линии картинок, и, соответственно, сами картинки также выровняйте по одной линии. Не знаю, почему вы не придерживать правил. Я говорил, что необходимо использовать сетку, направляющие по ним выравнивать, почему-то вы это не делаете. Если вы не будете, скажем, придерживаться правил в веб-дизайне, то на этапе каких-то профессиональных работ, у вас получаться не будет. Даже спустя пять лет занимаясь веб-дизайном, я до сих пор практически работаю по чек-листу, по плану и сверяюсь каждый раз, когда делаю какой-то дизайн, потому что в голове все держать просто нереально. Если вы вдруг думаете, что вы такой суперкреативный дизайнер и все знаете, все умеете, то, когда, как бы приходит такая мысль, начинается деградация и, скажем, жизнь научит смирению, и через какие-то там жизненные ситуации, когда начнут клиенты не принимать работы, когда у вас начнут на форуме, скажем, критиковать, вы поймёте, что вы далеко не мастер, и вам ещё необходимо учиться и делать, как необходимо по правилам. Тем более на первоначальном этапе не нужно что-то придумывать. Необходимо делать все по правилам. Ну, и то же самое по расстоянию, что я хочу здесь сказать. Вы должны визуально с помощью заголовка показать, к какому блоку он относится. Здесь у вас, если мы посмотрим на расстояние от заголовка снизу до следующего блока и сверху, расстояние отличается. Должно быть наоборот снизу меньше, сверху больше, для того чтобы люди понимали, что данный заголовок относится к нижнему блоку, а не к верхнему, так в каждом блоке с информацией должно быть.

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

Так, идём дальше. Здесь, по поводу текста, уменьшить расстояние между строчками, слишком оно большой у вас. По картинкам, в принципе, более-менее нормально. Ну, к заголовку те же самые рекомендации, что и в предыдущем. Здесь, по поводу данных социальных кнопок, увеличьте расстояние от текста снизу и сверху до границ, раза в 2-2,5 больше сделайте, чтобы не лепилось так к границам, будет смотреться лучше. Ну, и здесь выровняйте текст по одной левой линии, выделите жирным фамилию с именем, будет чуточку лучше. Вот эти компании клиенты, я рекомендую обесцветить логотипы, дабы они не привлекали столько внимания, потому что среди них нет каких-то мировых брендов на подобие, там, не знаю, Coca-Cola, Microsoft и так далее, которые все знают. В принципе, можно сделать, чтобы при наведении становились активными, то есть, цветными, но так не привлекали слишком много к себе внимания, потому что для человека особой пользы они нести не будут. Так, по поводу контакта. В принципе, хорошо, но опять же, необходимо сократить пустое расстояние снизу, ну и сверху можно, этот блок опустить сюда вот ниже и, соответственно, сверху пустое пространство также удалить, ну сократив по высоте фото раза в 1,5 наверно, то есть, примерно вот такое вот расстояние по высоте оставив. Будет смотреться лучше, потому что слишком много пустого пространства. Ну что ж, с этим сайтом мы разобрались.

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

Ну и переходим к последней работе по организации свадеб. Ну, на самом деле в интернете довольно-таки много красивых сайтов. Можно было смоделировать нечто получше. Я просто сам рисовал пару лендингов на данную тематику, анализировал данную нишу и знаю, что есть там очень классные крутые работы. Кстати говоря, вот довольно-таки полезно искать, скажем, на английском, допустим, организация свадеб так называется «Wedding» или что-то такое, ну, в Google, допустим, можно найти какие-то интересные работы, то есть, зарубежные, и там уже что-то смоделировать.

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

Так, дальше. Заголовочки выделяйте пожирнее. Можно использовать какие-то цвета, чтобы привлекать внимание, потому что сейчас среди текста немножко они как бы теряются. Плюс делайте форматирование, через каждые там 3-5 строчек нажимаете Enter, абзацы делайте, для того чтобы текст воспринимался проще, и шрифт сделайте 14-17 пикселей без вытягивания по высоте, чтобы легко читался. Ну, естественно, те же самые ошибки — выравнивание свободного пространства сверху, снизу, слева и справа, чтобы везде было одинаковое расстояние. Если это заголовок, то на лендингах это обычно ставится посередине. Я рекомендую заголовки ставить здесь, смотрится гораздо лучше, сделайте пожирнее и размером порядка 36-48 пикселей, иногда можно чуть побольше. По поводу картинок, в принципе, хорошо. То же самое галерею на центр, побольше размером. Здесь, в принципе, тоже данный блок можно чуть приподнять наверх, чтобы не было столько пустого пространства.

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

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

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



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

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