9 принципов хорошего веб дизайна

Создателя Psdtuts+ Collis-а вы уже знаете. Сегодня я в силу своих умений перевел для вас одну из его статей по веб дизайну. Данная статья продолжает тему первой статьи Элементы лучшего веб дизайна.

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

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

Добавьте к этому то, что большая часть веб дизайнеров (включая меня) самоучки, а сам Веб дизайн достаточно новая дисциплина, и в классическое дизайнерское образование пока не включена. А даже если где-то и включена, то развивается слишком стремительно, опережая программы обучения.

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

Приоритет (Движение глаз)

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

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

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

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

  • Расположение — от того, где находится элемент на странице, зависит в каком порядке пользователь этот элемент увидит.
  • Цвет — использование смелых цветов, простой способ выделить информацию и дать пользователю понять, куда смотреть.
  • Контраст — контраст выделяет элемент, а его отсутствие делает элемент вторичным.
  • Размер — большое всегда находится в приоритете перед маленьким. Если конечно большим не является все. В этом случае для выделения можно использовать контраст.
  • Дизайн — если на что то указывает огромная красная стрелка, угадайте, куда нужно смотреть?
Capture the Valley использует разный цвет областей сайта, чтобы направить ваше внимание сверху вниз.

Расстояние

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

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

Линейное пространство (Line Spacing)

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

Отступы (Padding)

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

Пробелы (White Space)

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

Marius очень простой и легкий сайт с минимальным количеством элементов.

Навигация

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

Навигация — Куда нажимать?

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

Место нахождение — Где я?

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

Noodlebox отделяет навигацию от контента сайта. Данный прием позволяет пользователю легко ориентироваться на сайте

Верстка дизайна

Жизнь стала намного проще с тех пор как в веб дизайне появились HTML+CSS макеты. Однако даже сегодня, при создании сайта в Фотошопе, необходимо помнить о том, как он будет сверстан.

Реально ли его сверстать?

Возможно вы выбрали удивительный шрифт для основного текста, но входит ли он в пакет стандартных HTML шрифтов? Дизайн может быть прекрасным, но вмещается ли он по ширине в 1200px? Или у части пользователей будет горизонтальный скрол? Важно знать чего в верстке сайтов делать нельзя. Поэтому я убежден в том, что веб дизайнеры должны так же уметь верстать сайты.

А если экран больше?

Нужен ли вам повторяющийся задний фон? Как он будет работать? Дизайн выровнен по центру или с левой стороны?

Ваш дизайн технически сложен?

Даже с чудесами CSS некоторые вещи, такие как вертикальное выравнивание достаточно сложны и болезненны. А порой их лучше вообще избегать.

Облегчат ли верстку сайта незначительные изменения вашего дизайна?

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

Есть ли возможность что то упростить для крупного сайта?

Было время, когда я делал графические кнопки для своих сайтов. Например кнопка “Скачать”, для которой я рисовал графический элемент. За последние годы я переключился на полное использование CSS. Конечно, это лишает меня определенной гибкости дизайна, но и выгоды CSS заместо десятков графических кнопок весьма значительны.

Типографика

Текст — наиважнейшая часть дизайна. Важно помнить:

  • Выбор шрифта — Различные виды шрифтов создают определенные ассоциации. Шрифт может многое сказать о дизайне. Некоторые выглядят современно, другие в стиле ретро. Убедитесь в том, что выбрали правильный шрифт для своего сайта.
  • Размер шрифта — Лет 5-7 назад было модно верстать крайне мелкий шрифт. К счастью эти времена прошли. И к людям начало приходить понимание того, что текст в дизайне для того, чтобы его читали. Заголовки и подзаголовки тоже должны выделяться.
  • Пробелы между строк — Учитывайте расстояние между строк. Не забывайте о расстоянии между букв. К счастью в веб дизайне подобные нюансы пока что имеют не большое значение, так как инструментов контроля в CSS не очень много.
  • Длина строк —  Жестких правил нет, но в целом строка текста не должна быть слишком длинной. Чем длиннее строка, тем сложнее её читать. Короткие колонки текста значительно эффективнее. К тому же читать их намного проще и быстрее.
  • Цвет — У меня есть ужасная привычка. Я задаю низкоконтрастный цвет тексту. Выглядит такой текст отлично, но читать его намного сложнее.
  • Параграфы — До того, как я увлекся веб дизайном я любил выравнивать текст по обоим краям практически у всего на свете. К сожалению такой выровненный параграф иногда создает крупные пробелы между словами. Особенно если строка параграфа не очень длинная. Читать такие абзацы сложно и неприятно. Если у вас именно такая ситуация, лучше выравнивать текст по левой стороне.
Если где и представлена хорошая типографика, так это на сайте iLoveTypography!

Простота использования

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

Соблюдение стандартов

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

Думайте о том, как поступит пользователь

Прототипы в веб дизайне используются для того, чтобы “опробовать” сайт в деле. Дело в том, что при использовании дизайна могут обнаружиться незначительные детали. ALA написал статью Never Use a Warning When You Mean Undo, в которой демонстрируется прекрасный пример того, как небольшое дизайнерское решение может обернуться мучением для пользователя.

Думайте о целях пользователя

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

Happycog знает все о юзабилити интерфэисов, а их собственным сайтом пользоваться легко и просто.

Выравнивание

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

Дизайн можно сверстать на основе специфической сетки. Должен заметить, что я не часто применяют сеточную верстку, хотя, конечно, такой сайт как Psdtuts+ имеет очень определенную и строгую табличную структуру. За последний год я натолкнулся на несколько отличных статей о табличных дизайнах, в том числе на сайте SmashingMagazine — Designing with Grid-Based Approach, а так же Thinking Outside The Grid. Если вы интересуетесь табличной версткой на основе CSS, вам нужно посетить ресурс DesignByGrid.com

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

Ясность (Резкость)

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

  • Прикрепляйте векторные шейпы к пикселям. Этот процесс может включать в себя и ручное регулирование векторных кривых.
  • Удостоверьтесь в том, что текст использует правильные сглаживающие (anti-aliasing) настройки. Почаще применяйте “Sharp”.
  • Повышайте контраст стыков за счет пиксельных рядов разного цвета.
  • Подчеркивайте границы чтобы усилить контраст.
ExpressionEngine экстра резкий и контрастный сайт.

Согласованность

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

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

Применение в верстке CSS — отличный способ согласовывать стили и другие элементы между собой. Постарайтесь задавать единые стили для таких тегов как <h1> или <p>. В этом случае вам не придется множить и запоминать массу классов и исключений.

Veerle проделал отличную работу в согласованности самых мельчайших деталей дизайна.

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