Правила рождения дизайн-макета
Symbiosis.Lab Blog:
К сожалению, огромная армия даже опытных, модных и эффектных дизайнеров забывают, что результатом их творчества должен быть сайт, а не «супер-скриншот» для портфолио, годный лишь в роли эффектного плаката.
В продолжение статьи «Что упускается в дизайн-макетах сайта?», читайте Памятку для дизайнера сайтов.
- Модульная сетка
Одно из первых решений в процессе создания дизайна - это модульная сетка, единый каркас, а часто еще и схема расположения основных элементов, проходящий через все страницы сайта.
Эта тема важная и обширная. По крайней мере, я хочу рассмотреть её дополнительно и подробно в последующей статье.
- Резина
Мы делаем только «резиновые» сайты.
Все элементы масштабируются в зависимости от размера экрана пользователя и размера шрифта.
Вся модульная сетка, блоки и прочие горизонтали масштабируются в процентах.
Все шрифты, отступы, почти все вертикали масштабируются в em. Во многих случаях, это касается даже рамок (border).
Исключение могут составлять лишь картинки. И то, для многих изображений жесткий размер в px - ограничение лишь по вертикали.
- Сжатие-растяжение
Мы используем «полу-резину», т. е. сайт растягивается и сжимается до определенного предела.
Первое, с чего начинаем, это находим минимальное сжатие сайта.
Минимальная ширина сайта, безусловно, определяется задачами сайта и его целевой аудиторией. Фактически сейчас есть только два минимальных параметра: 760px и 990px.
Первый оптимален для корпоративных сайтов либо ресурсов, рассчитанных на самую массовую и разношерстную аудиторию (например, массовые сервисы: почтовые, поисковые, новостные и т. п.). Второй подходит для сайтов имиджевого и промоушен назначения.
Учитываем в дизайне минимальное сжатие, для каждого элемента модульной сетки, чтобы не возникало наездов/нахлестов элементов друг на друга.
Максимальная ширина сайта, может быть разной, но, как правило, мы используем диапазон для растяжения не выше, чем в полтора-два раза, от размера минимального сжатия. Это обусловлено тем, что при растягивании сайта более, чем в полтора раза, композиция сайта, обычно, рушится.
Учитываем, что произойдет со всем сайтом, при размере монитора пользователя свыше максимальной ширины.
Решаем, куда он будет выравниваться. Вправо? Влево? По центру?
Добиваемся завершенного вида сайта и его естественного перехода в окружение при разрешении свыше максимального. Недопустимо, чтобы сайт на большом мониторе выглядел как «обрезанный».
Учитываем и прорисовываем все иллюстрации и неповторяющиеся фоны из принципа «у кого больше монитор, тот больше увидит». Обычно, ширина иллюстраций обусловлена шириной отведенных ей блоков модульной сетки в состоянии max.
- Запас на рост сайта
В большей сфере задач, если речь идет не о сайте-визитке или промо-сайте, нужно учесть, что количество страниц и разделов сайта может расти и меняться.
Поэтому:
Навигация должна строиться так, чтобы добавление новых пунктов меню, а уж тем более изменение названия пунктов происходило безболезненно. Недопустимо, чтобы добавление нового раздела приводило к пересмотрению навигации.
В некоторых случаях нужно предусматривать безболезненное для внешнего вида добавление/скрытие информационных/функциональных блоков на сайте.
Учитывая экранную масштабируемость, а также добавление новых материалов на сайт, отдавать предпочтение текстовым заголовкам и навигации.
- Шрифтовая схема
Как правило, мы строим дизайн сайта на основе одного-трех шрифтов.
Базовый шрифт - основной шрифт материалов сайта.
Акциндентный - шрифт для заголовков.
В некоторых случаях вводятся дополнительные шрифты для:
- меню и навигации
- блоков выделения (важной информации, цитат, выносок)
- для мелкого текста, с целью повысить читабельность
Дизайнер должен спланировать единую общую схему размеров отступов/заступов для всех элементов на сайте, иерархию заголовков и навигационных элементов (например, для древовидного меню или облака тегов). Она должна прослеживаться на всех страницах сайта.
Всё последующее оформление информации на сайте должно строиться на базе общей схемы.
Дизайнер должен спланировать, что будет происходить с элементами, реагирующими на действия пользователя.
Рассмотрим типичные элементы.
- Навигация
В зависимости от типа и масштабности сайта, нужно показать ряд состояний пункта навигации.
Типичный набор:
- Нормальный вид
- Мы навели курсор
- Мы находимся в этом разделе
- Мы находимся в этом разделе, но прошли глубже
- Мы навели курсор на пункт родительского раздела
При этом минимальный набор для всех элементов навигации, включая переключатели и элементы управления - это нормальный и активный вид. Т. е. минимум, для всех управляющих и навигационных элементов это «вкл./выкл.».
- Ссылки
Ссылки в тексте всегда подчеркнуты и должны отличаться по цвету от основного текста.
Желательно (а в навигации обязательно), предусмотреть внешний вид ссылки, при наведении курсора.
В больших объемах текста и при выдаче разнородной информации, обязательно предусмотреть состояние visited.
Для ссылок, которые предусматривают дополнительные возможности, например:
- альтернативное получение данных (RSS, PDA, версия для печати)
- скачивание файлов, расположенных на сервере
- обращение к популярным ресурсам (Яндекс, Google, Flickr, LJ картографические сервисы, Википедия и т. п.) , e-mail адресов
- открытие форм
- открытие ссылки в новом окне
Для подобных ссылок в тексте чаще всего нужно предусмотреть дополнительную иконку, которая подскажет пользователю о дополнительных свойствах ссылки.
- Псевдо-ссылки
Псевдо-ссылки, т. е. ссылки, которые не ведут на другую страницу, а открывают/скрывают информацию на текущей, без ее перезагрузки, обозначаем пунктирным подчеркиванием. Во всем остальном, на них распространяется все, что указано для обычных ссылок.
- Табы
Это некоторая смесь элемента навигации и элемента управления.
Для них учитываем состояния:
- таб неактивен
- наведен курсор (opt)
- загрузчик содержания (opt)
- таб активен
Предусматриваем реакцию курсора при наведении. Особенно, если речь идет о нестандартных элементах управления, таких как навигация, псевдо-ссылки и табы (hand), подсказки (help), изменение размера элемента и перетаскивание.
- Рыба
При разработке дизайна нужно учитывать информацию максимально-типичную для этой страницы по типу и объему. В идеале, оперировать реальными данными. Это позволит избежать пробелов в оформлении и досадного вида сайта после сдачи в эксплуатацию.
Полностью недопустимо использование «рыбы» из другого языка, т. к. объемы текста и средняя длина слов различаются. Например, в английском и русском это очень заметно.
- Оформление содержания
Предусмотреть все возможные варианты оформления нельзя. Оформление всегда обуславливаются задачами сайта и информацией.
Привожу типичный перечень для текстовых страниц корпоративного сайта:
- абзац текста
- иеархия заголовков трех-четырех уровней
- ссылки, псевдоссылки
- элемент выделения важной информации
- цитата
- ненумерованный список
- вложенный список
- нумерованный список
- иллюстрация на полосу, в текст
- таблица
- файл для скачивания
- выноска
- подача информации в 2-3 колонки (зависит от сетки)
- простая форма
Павел Колодяжный, статья на habrahabr.ru