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

Хотите чтобы я также «прокачал» ваш дизайн как и у Тараса?

Итак, Тарас, добрый день!

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

Ну что ж, давайте приступим. Начнем с самого верха и пойдем вниз и буду разбирать различные ошибки. По цветовой гамме, в принципе все хорошо. Единственное, что бы я вам порекомендовал — заменить серый цвет на белый. Вообще, ближайшие полгода не рекомендовал бы, пока только начинаете заниматься дизайном, использовать серый цвет. Почему? Потому что для того, чтобы дизайн с применением данной цветовой гаммы смотрелся профессионально и качественно, необходимо прорабатывать мелкие детали, которые требует опыта, так скажем, и навыков — различные тени, различные теснения — вот такие вот мелкие детали, которые начинающий как бы, вообще не замечает. Он даже не знает, что в каких-то элементах там стоит теснение или тень. Грубо говоря, на первоначальном этапе их вообще не видишь, не то что, не говоря уже о том, не знаешь, как их прорабатывать. Поэтому, лучше серый цвет всегда заменяйте на белый, и работы будут смотреться лучше. Это по цветовой гамме. В принципе, голубой цвет вполне подходит. Можно добавить какие-то его оттенки для того, чтобы выделить менюшку, кнопки, то есть, не делать все одним цветом, разнообразить разными оттенками и будет смотреться профессиональнее.

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

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

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

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

Что касается данной формочки. Я рекомендую тоже самое сделать, допустим, как бы белую фоновую заливку. Допустим, вы делаете такую вот формочку, заливаете ее белым цветом и внутри нее уже размещаете кнопку, поля для ввода, и соответственно, пояснительный текст.

Следующий момент, который необходимо сделать — это выровнять по одной линии, то есть, сейчас у вас поля на одном расстоянии и вылазят за пределы кнопки, то есть гораздо шире — кнопочка поменьше, а гармонично и красиво смотрится, когда все единых размеров. То есть, по ширине, если, допустим, вот вы поля для текста по ширине уменьшите, смотреться будет гораздо лучше, и проще будет восприниматься мозгом. Потому что человеческий мозг, когда например, видит однотипные элементы, он их старается объединяет и вместо, допустим, кнопки и двух полей, наш мозг воспринимает это все, как единое целое и как один какой-то объект. Почему он так делает? Ну, для того, чтобы тратить меньше энергии. Это, скажем, такое свойство, которое заложено Богом, природой и так далее. Соответственно, когда мы так визуально в один предмет не объединяем, то мозг может определить это, скажем, как две составляющих, и, соответственно, будет больше тратиться времени на обработку, будет больше тратиться энергии человека и ему будет неприятнее рассматривать данный сайт. И по поводу вот этих вспомогательных текстов. Я рекомендую размещать их прямо в форме. Почему? Потому что вы экономите, допустим, вот это свободное пространство. То есть, основная задача дизайнера сделать так, что бы свободное пространство использовалось рационально, по максимуму, то есть, что бы не было лишних элементов. То есть, как минимум, вы сможете сэкономить порядка 5-6 пикселей по высоте, и это станет большим плюсом, скажем, при загрузке сайта.

Следующее, давайте разберем меню. Здесь я рекомендую уменьшить размер шрифта. Ну, сейчас здесь, по-моему, 24 пикселя, сделайте либо 14, либо 18 для текста, вполне будет читаемо.

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

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

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

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

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

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

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

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

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

 

 

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



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

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