Как стать автором
Обновить

Памятка дизайнеру сайтов

Время на прочтение 6 мин
Количество просмотров 46K
Эта статья писалась мною как памятка для внутреннего пользования дизайнерам нашего бюро.К сожелению огромная армия даже опытных, модных и эффектных дизайнеров забывают, что результатом их творчества должен быть сайт, а не «супер-скриншот» для портфолио, годный лишь в роли эффектного плаката.Америку я не открыл, а просто собрал воедино и сформулировал ряд требований, которые должен учитывать дизайнер в процессе разработки дизайна сайта.

Модульная сетка

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

«Резина»

Мы делаем только «резиновые» сайты.Все элементы масштабируются в зависимости от размера экрана пользователя и размера шрифта.Вся модульная сетка, блоки и прочие горизонтали масштабируются в процентах.Все шрифты, отступы, почти все вертикали масштабируются в em. Во многих случаях, это касается даже рамок (border).Исключение могут составлять лишь картинки. И то, для многих изображений жесткий размер в  px  — ограничение лишь по вертикали.

«Сжатие-растяжение»

Мы используем«полу-резину», т.е. сайт растягивается и сжимается до определенного предела.

min

Первое, с чего начинаем, это находим минимальное сжатие сайта.Минимальная ширина сайта, безусловно, определяется задачами сайта и его целевой аудиторией. Фактически сейчас есть только два минимальных параметра: 760px и 990px. Первый оптимален для корпоративных сайтов либо ресурсов, рассчитанных на самую массовую и разношерстную аудиторию (например, массовые сервисы: почтовые, поисковые, новостные и т.п.). Второй подходит для сайтов имиджевого и промоушен назначения.Учитываем в дизайне минимальное сжатие, для каждого элемента модульной сетки, чтобы не возникало наездов/нахлестов элементов друг на друга.

max

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

Запас на рост сайта

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

Шрифтовая схема

Как правило, мы строим дизайн сайта на основеодного-трех шрифтов.Базовый шрифт  — основной шрифт материалов сайта.Акциндентный  — шрифт для заголовков.В некоторых случаях вводятся дополнительные шрифты для:
  • меню и навигации;
  • блоков выделения (важной информации, цитат, выносок);
  • для мелкого текста, с целью повысить читабельность.
Дизайнер должен спланировать единую общую схему размеров отступов/заступов для всех элементов на сайте, иеархию заголовков и навигационных элементов (например, для древовидного меню или облака тегов). Она должна прослеживатся на всех страницах сайта.Всё последующе оформление информации на сайте должно строится на базе общей схемы.

Реакция на пользователя

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

Навигация

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

Ссылки

Ссылки в тексте всегда подчеркнуты и должны отличаться по цвету от основного текста.Желательно (а в навигации обязательно), предусмотреть внешний вид ссылки, при наведении курсора.В больших объемах текста и при выдаче разнородной информации, обязательно предусмотреть состояние visited.Для ссылок, которые предусматривают дополнительные возможности, например:
  • альтернативное получение данных (RSS, PDA, версия для печати),
  • скачивание файлов, расположенных на сервере,
  • обращение к популярным ресурсам (Яндекс, Google, Flickr, LJ картографические сервисы, Википедия и т.п.)
  • e-mail адресов
  • открытие форм
  • открытие ссылки в новом окне
то для подобных ссылок в тексте чаще всего нужно предусмотреть дополнительную иконку, которая подскажет пользователю о дополнительных свойствах ссылки.

Псевдо-ссылки

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

Табы

Это некоторая смесь элемента навигации и элемента управления.Для них учитываем состояния:
  • таб неактивен
  • наведен курсор (opt)
  • загрузчик содержания (opt)
  • таб активен

Курсор

Предусматриваем реакцию курсора при наведении. Особенно, если речь идет о нестандартных элементах управления, таких как навигация,псевдо-ссылки и табы (hand), подсказки (help), изменение размера элемента и перетаскивание.

Рыба

При разработке дизайна нужно учитывать информациюмаксимально-типичную для этой страницы по типу и объему. В идеале, оперировать реальными данными. Это позволит избежать пробелов в оформлении и досадного вида сайта после сдачи в эксплуатацию.Полностью недопустимо использование «рыбы» из другого языка, т.к. объемы текста, средняя длинна слов различаются. Например в английском и русском это очень заметно.

Оформление содержания

Предусмотреть все возможные варианты оформления нельзя. Оформление всегда обуславливаются задачами сайта и информацией.Привожу типичный перечень для текстовых страниц корпоративного сайта:
  • абзац текста;
  • иеархия заголовков трех-четырех уровней;
  • ссылки,псевдо-ссылки;
  • элемент выделения важной информации;
  • цитата;
  • ненумерованный список;
  • вложенный список;
  • нумерованный список;
  • иллюстрация на полосу, в текст;
  • таблица;
  • файл для скачивания;
  • выноска;
  • подача информации в 2–3 колонки (зависит от сетки);
  • простая форма.
 В памятке я намеренно не касался вопросов оформления, цвета и юзабилити, хотя бесспорно, приведенный ряд правил накладывает отпечаток на эти сферы.В будущем я планирую расширить и дополнить этот материал. Вполне вероятно, что и благодаря нашей дисскусии )))Отдельно хочу рассмотреть вопросы модульной сетки, шрифтовых и цветовых схем. Но это уже в последующих, отдельных материалах. Если такие будут )))
Теги:
Хабы:
+80
Комментарии 153
Комментарии Комментарии 153

Публикации

Истории

Работа

Веб дизайнер
36 вакансий

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн