Требования к дизайн-макету для разработки сайта

13 Апреля 2014

Требования к дизайн-макету для разработки сайта


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


Основным документом, на базе которого выполняется разработка сайта, служит дизайн-макет. Это графический образ, прототип будущего интернет-ресурса. В большинстве случаев он создается с помощью программы Adobe Photoshop. Как правило, этот документ включает макет стартовой (главной) и основных внутренних страниц.


Для работы с прототипом и его согласования используются форматы документов .psd и .jpg. Первый позволяет сохранять слои и папки слоев, векторные элементы графики, обеспечивая удобство HTML-верстки. Второй не предоставляет этих возможностей, зато позволяет повысить защиту макета от недобросовестного копирования.


Основные элементы графического прототипа


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


При создании дизайн-макета учитывают следующие составляющие:



  • модульная сетка и структура макета,

  • шрифты,

  • единицы измерения,

  • обязательные элементы текста.


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


Основные элементы структуры, которые отображаются в дизайн-мaкете:



  • "шапка",

  • левая, центральная и правая колонки,

  • "подвал",

  • меню навигации.


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


Что касается единиц измерения, важно, чтобы размеры всех элементов прототипа измерялись строго в пикселях. Дробные показатели следует округлять как минимум до 0,5, в идеале — до целого числа. Масштабирование блоков осуществляется строго в процентах.


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


Обязательные элементы текстового содержимого


Чтобы еще до готовности сайта можно было получить представление о том, как будет выглядеть текст на его страницах, необходимо предусмотреть предварительное отображение следующих элементов:



  • непосещенные, посещенные, активные ссылки (отображаются разным цветом, могут подчеркиваться);

  • базовый текст страницы, набранный основным шрифтом;

  • текст с маркированными и нумерованными списками;

  • текст с заголовками h1-h6.


Для всех кеглей используемых на сайте шрифтов рекомендуют использовать технологию сглаживания, за счет применения которой очертания букв выглядят более ровными и четкими. Что касается гарнитуры шрифтов, к числу универсальных относят Arial и Arial Black, Comic Sans MS, Georgia, Times New Roman, Verdana и некоторые другие. Они являются лучшими с точки зрения восприятия. Для одного сайта рекомендуется использовать не более трех разных гарнитур.


После согласования дизайна выполняют нарезку и HTML-верстку его элементов, привязку к системе управления контентом (CMS). Затем администратор сайта может управлять содержимым, добавляя и редактируя страницы, наполняя их текстом и задавая необходимые настройки.


Подготовленный к HTML-верстке макет должен быть разделен на группы слоев (графика и тексты отдельно). Благодаря этому верстальщику удобнее работать с макетом, при необходимости отключая группу слоев с текстами и используя только графику. Для верстки предоставляется графический прототип в документе формата .psd.

http://www.interlabs.ru/