Элементы лучшего веб-дизайна

Представляю вам перевод замечательной статьи веб дизайнера и автора проектов psd.tutsplus.com Collis-а на тему создания правильного веб дизайна. Статья снабжена полезными трюками и советами. Колин передает свой опыт в чистом виде, а в конце статьи вы даже сможете скачать PSD фаил с его работой и все посмотреть сами. Перевод подготовлен специально для проекта hronofag.ru

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

Краткое предисловие

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

Поэтому в этом уроке по веб дизайну я попробую несколько различных техник чтобы передать различные аспекты процесса, которые я применяю при создании веб дизайна в Фотошопе. Мы рассмотрим дизайн сайта, который я нарисовал ранее под название Not By The Hour, который является под сайтом другого проекта FreelanceSwitch. К счастью я сохранил обе версии, версию до и версию после.

До того, как я объясню некоторые детали того, что я отшлифовал в этой версии веб дизайна, я хочу чтобы вы взглянули на обе версии этого сайта.

Смотреть пример

Ясность и чистота

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

  1. Ясность текста — Когда вы размечаете текст, вам стоит учитывать какой режим Anti-Aliasing вы используете. Для этого включите панель Character, которую можно найти в Windows > Character  или другой способ — выделите текст инструментом Type Tool и нажмите CTRL+T (да, это тот же шорткат что и для трансформирования). На панели Character выберите режимы Anti-AliasNone | Sharp | Crisp | Strong. Эксперементируйте с разными режимами для различных шрифтов. Обычно я использую режим Sharp, который чаще всего выравнивает пиксели и немного усиливает кромку шрифтов. Например на изображении ниже для фразы “Making” установлен именно он, и именно поэтому 1px окантовка для текста выражена очень ярко.
  2. Подсветка — как видите, я добавил между светло-серым и темно-серым 1-пиксельную линию. Этот прием усиливает эффект резкости. Если вы хоть раз применяли эффект резкости Sharpen для фотографий, то наверняка заметили что резкость усиливается за счет усиления контраста между двумя цветами. Это происходит потому что в районе перехода цвета появляется полоски дополнительных цветов.
  3. Расцветка — цвет тоже играет существенную роль в резкости элементов. Поэтому я понизил насыщенность заднего фона. Благодаря этому сейфы, которые имеют зеленоватый тон, выделяются немного больше.
  4. Чистим объекты  — вот ещё кое-что из того что могли бы сделать вы, но что не сделал я для этого сайта. Вы можете выравнять пиксели объектов по краям таким образом, чтобы минимизировать переходные полупрозрачные пиксели. К примеру взгляните на левый край сейфа в сравнении с правым краем. Вы заметите что он немного размыт. Это можно подправить простым элементом выделения Lasso Tool, выделив небольшой уголок края и удалив его. Конечно это не очень существенно, но думать о деталях никогда не помешает.

Еще один нюанс — еле заметные градиенты и окантовка Gradient и Stroke. Этого можно достичь эффектами стиля слоя Inner Stroke в 1 пиксель и внутренний градиент.  Я использовал этот эффект, потому что он является частью бренда FreelanceSwitch, и это так же весьма приятный Веб 2.0 эффект. Ещё лучше он выглядит с резкими краями текста, которые я упоминал ранее. Конкретное применение стилей слоя вы сможете разобрать в PSD исходнике.

Свет и тень веб дизайна

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

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

  1. Отсутствие резкости и ясности элементов веб дизайна — в полиграфии вы врядли будете приближать элементы, чтобы подчеркнуть пару пикселей, так как при печати, дизайн будет растрирован и многие пиксели просто выпадут из дизайна. Резкость дизайна будет снижена вдвое. Дизайнер полиграфии мыслит миллиметрами а не пикселями.
  1. Отсутствие глубины и эффектности — градиенты не особенно хорошо совмещаются с печатью и полиграфией. Но на экране они смотрятся чудесно. Особенно при добавлении легкого градиента и тени. Вместе они делают веб сайт более эффектным, так как различные элементы веб дизайна играют друг против друга. На изображении ниже мешкам с деньгами, которые изначально были простыми векторными изображениями с сплошной заливкой, был добавлен легкий градиент инструментом Burn Tool (O), поэтому изображение выглядит мягче.

Приоритеты

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

Что я имею ввиду под преимуществом? Спросите самого себя, какая информация является наиболее важной на веб странице? На что мы смотрим вначале? На что во вторую очередь и на что в третью? И почему мы смотрим на эти области в одном и том же порядке?

Визуальные приоритеты состоят из смеси факторов:

  1. Размер — очевидно что большие элементы привлекут внимание в первую очередь. Поэтому в нашем дизайне головное название имеет преимущественный размер. Первое что мы замечаем на этой странице, эти два элемента.
  1. Цвет — цвет тоже создает приоритеты. К примеру на примере сайта “до” вы заметите, что в области отмеченной цифрой 4 подписи такого же черного цвета как надпись Hi There! Таким образом между ними не было цветовой разницы и не было понятно, какую из подписей нужно читать первее. Приглушив подписи мы придали им второстепенное значение.
  1. Цвет заднего фона — самое важное в работе с цветом является соотношение различных областей цвета по отношению друг к другу. К примеру, если вся страничка черная, и лишь один объект белый, создается впечатление будто объект хочет прыгнуть на вас. Таким образом создав контраст между светло желтым и темно-серым мы получили эффект выдавливания. Поэтому первое на что обращаешь внимание на странице это слоган Making Passive Income и сейф. И уже через секунду вы заметите гид навигации по сайту Part 1| Part 2 | … Именно поэтому я хочу чтобы пользователь прежде всего заметил визуальное изображение и заголовок, что бы сразу было понятно что это за сайт. После этого я хочу обратить его внимание на навигацию сайта, и пользователю сразу становится понятно, где искать то информацию.
  2. Расположение — положение объектов в макете тоже влияет на приоритетность элементов. Возможно вы слышали, что глаз человека движется из левого верхнего угла в нижний правый, в различных вариациях. Поэтому элементы наверху макета более приоритетные чем элементы внизу.

Пиксели и ещё раз пиксели

Я уже повторял это ранее и повторю опять — самое главное в веб-дизайне пиксели!

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

Мягкие градиенты и окантовки

Порой в комментариях спрашивают о мягких стилях Web 2.0. Вот простой эффект, на котором вы задаете 1-2 пикселя для окантовки и едва заметный градиент для заднего фона. Если вы не замечали подобные детали раньше, то наверняка начнете обращать на них внимание после этой статьи.

Игра с цветом веб элементов

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

Вот и все!

Вот и все. Мой урок по веб дизайну подошел к концу. Рассказывать про веб дизайн не просто. Конечно, учитывайте то, что стиль моего сайта соответствует моему вкусу, так как я сам себе клиент и 99% проектов делаю для себя. Надеюсь эта информация оказалась для вас полезной, удачных экспериментов!

Скачать PSD

Пару слов о данном PSD фаиле, я не задавал названия для слоев и не группировал их. Дизайн предоставляется исключительно для ознакомительный целей. Использовать элементы данного фаила запрещено.

Скачать фаил

P.S. Что приготовить на обед? Несомненно грибы в горшочке — масса вкусных и простых рецептов, для всех любителей вкусно поесть.