Советы по созданию макета дизайна сайта

  • Дата:19.06.2013
  • Автор:Юлия Солнцева

Наши гостевые авторы продолжают нас радовать толковыми постами. Вот сегодня Юлия Cолнцева подготовила материал, призванный сгладить некоторые угловатости в известном всем нам тандеме – дизайнер/верстальщик. Юля рассказала, как надо готовить макет дизайна сайта, чтобы у верстальщика не возникало проблем во время работы с ним. Приглашаем к чтению :). 

С развитием IT-сферы рынок наемного труда активно пополняется веб-дизайнерами – хорошими и не очень, а вместе с тем – и аналогичным дизайном сайтов. Создание сайта – работа командная, и с макетом после дизайнера будут работать еще как минимум верстальщики. Тем более что грамотное, "чистое" составление макета как раз и отличает профессионалов от всех остальных, считающих себя веб-дизайнерами. Целью данной статьи является кратко изложить основные правила создания хорошего макета сайта, с которым в дальнейшем будет приятно работать. Эта статья будет полезна начинающим дизайнерам, а также тем, кто хочет ими быть. 
Любой вид разумной деятельности следует начинать с написания плана действия, то есть – технического задания. 
Бриф 
Грамотное составление брифа – важный этап на пути к получению прогнозируемого результата работы дизайнера. 
Что такое бриф? 
Бриф –  это документ-опросник, который предоставляется заказчиком дизайнеру со всей необходимой информацией для последнего. Обычно это информация о компании, цели и задачи проекта, сроки и бюджет. Примеры брифов можно в открытом доступе скачать в интернете. На основе информации, полученной с брифа, составляется техническое задание для исполнительных лиц. Это четкая и последовательная структура указаний к действию для всех задействованных в проекте специалистов. Разработчику также следует отметить для себя ключевые моменты дизайна, определить сложные этапы работы, проставить приоритеты разработки макета сайта. Следующим логическим этапом будет составление эскиза. 
Составление эскиза макета сайта 
"От большого к малому", "От общего к деталям" –  эти два правила по организации работы –  одни из первых, которым учат в художественной школе. Нельзя начинать рисовать портрет с глаз так же, как и не следует начинать составлять макет сайта из кнопок навигационного меню. Начертите схематически основные структурные элементы сайта, не вдаваясь особо в детали, цель эскиза – визуализировать основные блоки макета. После того как цель достигнута и эскиз выглядит соответственно требованиям технического задания и эстетическому вкусу криэйтера, эскиз переносится на сетку. 
Выбор размера при создании макета сайта 
Допустим, вы получили техническое задание, в котором указано, что тело сайта будет с фиксированной шириной по центру и резиновым фоном по бокам. Возникает вопрос, какую ширину следует задавать. С учетом минимального разрешения монитора, а оно составляет 1024x768, мы создаем рабочую область 1003 пикселя. Куда делся 21 пиксель? Он ушел на боковой скроллинг, размер которого и составляет 21 пиксель. Итак, очевидно, что рабочая область не должна превышать 1003 пикселя. Большинство дизайнеров рекомендуют задавать фиксированную величину тела сайта в 1000 пикселей и по 100 пикселей на боковую резину. Правильно заданная ширина макета сайта позволит избежать горизонтальной прокрутки. Какую высоту следует задавать? Высота макета сайта делится на экраны. Всю важную информацию следует размещать на первом экране, его высоту, точно так же, как и ширину рабочей области, следует задавать с учетом навигационных элементов браузера. 
Создание сетки 
Виды сеток:
1. Manuscript grid или блочная сетка. Самый простой вид сетки, на которой определена только одна область: 
2. Колоночная. Одна из самых распространенных сеток, пример популярной колоночной сетки – 960. gs. Вопреки распространенному мнению, колоночная сетка не является модульной, хотя и нашла широкое применение в веб-дизайне сайтов. Колоночные сетки делятся на разные подвиды, в зависимости от количества колонок в ней. Это 8-, 12-, 16- и 32-колоночные сетки: 
                                                                 960. gs. 
На сайте использована 12-колоночная сетка:
3. Иерархическая. Блоки сетки размещаются иерархически в зависимости от целей и задач дизайна: 
Сайт BBC в структуре своего дизайна придерживается иерархической системы размещения новостей.
4. Модульная Сетка. 
Что такое модуль? В нашем мире до сих пор еще нет единой системы измерения. Большинство элементов различных систем измерения были взяты из человеческих физических пропорций. Когда-то двери мерили плечами, а метры – шагами. В любой системе измерения основная единица – модуль. Метрическая система, которую используют в Европе, также состоит из модулей. Модульная сетка – это система пропорций, которую используют для соразмерности чего-либо. 
Для чего используют модульную сетку в дизайне сайтов? 
Структурирование элементов по заданному шаблону дает баланс пропорций и правильно построенную композицию. Унификация элементов дизайна по заданному шаблону пропорций дает целостность восприятия макета сайта. Использование модульной сетки не только облегчит понимание расположения элементов сайта и их выравнивание, но также в значительной мере облегчит жизнь верстальщику. Модульная сетка поможет ему ускорить процесс по исчислению размеров элементов дизайна и определения расстояния между ними. 
Построение модульной сетки: 
1. Определяем рабочую область.
2. Определяем кегль и высоту строки, зачастую это и есть высота модуля. 
3. Определяем ширину модуля. Это можно сделать двумя способами: отталкиваясь от величины значимого статического элемента дизайна, или от их количества. Например, зная, что дизайн сайта должен вмещать в себя шесть кнопок навигационного меню, равных между собой и равноудаленных друг от друга, несложно высчитать необходимое расстояние между ними. Помните, что минимальная ширина модуля равна его высоте. 
4. Объединяем элементы модульной сетки между собой, создавая композицию нашего эскиза. 
                                                Анатомия модульной сетки. 
                              Перенос основных элементов дизайна на сетку.
                                       Готовый дизайн сайта на модульной сетке.
Помните о том, что сетка – всего лишь один из инструментов-помощников дизайнера и, может быть, в некоторых случаях легко заменима направляющими. (Узнать больше о применении модульных сеток в графическом конструировании можно в книге Аллена Хёрлберта "Модульная сетка".).
Ниже приведены примеры сайтов, графический интерфейс которых построен на модульной сетке: 
Структурирование макета сайта 
Что отличает профессионала от аматора? Качество выполненной работы. Создание сайта – дело коллективное, и над проектом работают несколько человек. Следующий, кто получает ваш макет в руки, верстальщик. Насчет того, должен ли дизайнер уметь верстать, существует множество противоположных мнений, но все они, по сути, объединяются в одно умозаключение: дизайнер должен понимать основные принципы верстки и подготавливать макет с учетом этих принципов. 
1. Объединять слои в группы. Все мелкие элементы дизайна следует объединять в группы и называть их соответственно. Во избежание проблем при открытии в других операционных системах все слои обязательно называть по-английски. 
2. Группы слоев делятся на графику и типографику Разделяйте типографику на общий текст и заголовки. 
3. Задавать глобальные элементы. 
4. Все неиспользуемые слои следует удалить. Достаточно распространенной ошибкой начинающих дизайнеров есть отключение ненужных слоев. Помните о том, что верстальщик делает видимыми сразу все слои. Исключение представляют слои интеракции, но о них позже. 
5. Не плодите лишних слоев. Для этого используйте эффект Gradient Overlay. Все иллюстрации преобразовать в один слой. Обычно у опытного дизайнера две версии макета: детализированная версия, на случай внесения поправок, и лаконичная –  для верстальщика.  
6. Шрифты: 
– все использованные шрифты прикрепить к сопроводительному письму;
– проверить шрифт на безопасность. 
По данной ссылке можно посмотреть список шрифтов, которые являются безопасными и общими для всех версий OC Windows, и их эквиваленты в OC Mac. 
7. Округлить значения.
 
8. Текст-рыбу использовать в соответствии с реальным контентом сайта, если это русскоязычный сайт, то популярный текст-рыба Lorem ipsum не будет адекватно визуализировать типографику в макете дизайна. 
 
9. Интеракция. Дизайнер в макете сайта должен не только продумать все изменения дизайна при взаимодействии с пользователем, но еще и определить их в отдельный слой. Такие слои можно отключать, но обязательно делать пометку в названии слоя и/или сопроводительном письме. Рекомендовано все состояния кнопок выделять отдельным цветом, для лучшей визуализации. Тогда не возникнет вопросов типа: "Как эта кнопка подсвечивается при нажатии?"
10. Липкие листочки. Комментируйте макет, в программе Photoshop сделать это достаточно просто. Прилагайте сопроводительное письмо к макету – это в значительной мере облегчит дальнейшую работу с вашим макетом. 
Эти, достаточно простые и логические, нормативные этапы составления макета сайта в значительной мере облегчат работу не только дизайнеру, но и всем, кто будет работать с продуктом вашего творчества. Делайте качественный дизайн и, возможно, вечная Holy War между дизайнером и верстальщиком закончится.