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

Основная графика должна быть сконцентрирована в следующих областях:

  • название сайта и логотип
  • основной контент
  • основная навигация

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

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

Эффективное использование изображений: Firewheel design

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

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

Уменьшенное изображение не передает всего ощущения этого дизайна.

Для навигации используется текст, что может быть проще и интуитивнее.

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

Что привлекает ваше внимание? Для начала, логотип FireWhell симпатичный, но простой.

Во вторую очередь заголовок страницы «Professional-grade..» выделяющийся благодаря его размеру, цвету и четкости.

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

К тому же страница относительно быстро загружается.

Избыточное использование графики: Yaxay

Страницы Yaxay перегруженны лишней графикой

Yaxay.com популярный сайт сообщества дизайнеров.

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

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

Я бываю на сайте Yaxay почти каждый день и точно знаю, что он создает довольно таки скучное впечатление, по сравнению с более чистым дизайном, таким как у FireWhell.

Специфические черты этого сайта:

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

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

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

Навигация

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

Остерегайтесь иконок

Иконки очень полезны, когда они работают! Хорошая иконка это компактное визуальное представление комплексной идеи, она не требует объяснений, однозначна или достаточно привычна, например «Принтер» значит печать, а восклицательный знак в желтом треугольнике значит «Внимание» или «Осторожно».

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

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

Со временем возникают новые стереотипы, например иконка MSN Messenger с двумя кругло-лицими человечками, прижилась как символ «Контакты» или «Друзья».