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