Гайдлайны для веб-проектов
02.06.2014 | Автор: Юлия Мархадаева, Nimax (Руководитель отдела веб-разработки) 
Что это такое? Как графический дизайнер создаёт руководство по использованию фирменного стиля, так и веб-дизайнер задаёт и фиксирует правила оформления веб-страниц. Такой документ принято называть UIKit — в нём собирают базовый набор элементов интерфейса с описанием их состояний и правилами поведения.
Мы рассмотрим расширенную версию такого документа, который помимо набора кнопок, ссылок и других контроллов описывает правила и рекомендации по оформлению контента на сайте. Для удобства назовём его гайдлайн для веб-проектов.
Набор правил оформления веб-страниц. Nimax: читать
Основное отличие гайдлайна от привычного UIKit
UIKit Гайдлайн веб-проекта Стиль элементов Состояния элементов Стиль элементов Состояния элементов Описание взаимодействия элементов Базовые принципы компоновки Требования к контенту Как над ним работать? В отличие от UIKit, который собирается дизайнером по умолчанию для любого проекта, работа над гайдлайном — отдельный осмысленный этап. Приступать к его формированию следует после разработки базовых страниц сайта — самых сложных и максимально насыщенных элементами интерфейса разного типа.
В идеальном мире часть рекомендаций по использованию фирменного стиля в веб-интерфейсах появляется на этапе разработки айдентики — логичное дополнение и напутствие веб-дизайнеру.
В реальной жизни такое случается редко. Поэтому, разрабатывая интерфейс, мы чаще самостоятельно решаем, как адаптировать фирменный стиль компании к веб-среде, выносим предложения и внедряем новые элементы. Это может отражаться в альтернативной модульной сетке и дополнительных цветах для акцентов на сайте, в новой графике (иконки, иллюстрации) и требованиях к фотографиям, в оформлении текстовых блоков разного типа и так далее. Нововведений мы вносим много и, чтобы не оставить клиента без оружия, фиксируем всё в гайдлайне.
Содержание гайдлайна для веб-проекта условно делится на два блока: базовые требования и дополнительные (специфические в рамках определенного проекта).
Структура может быть следующей:
Стоит учесть: если вы разрабатываете адаптивный дизайн, важно описать поведение элементов при разных разрешениях страницы.
Чем гайдлайн полезен веб-проекту? Для небольшого промо-сайта нет смысла составлять такой документ и можно ограничиться стандартным UIKit. Польза от наличия гайдлайна будет в том случае, если проект развивается в непредсказуемых условиях, когда необходимо закрепить основные принципы и использовать их для его развития. Например, для работы над большим корпоративным сайтом, который запускается в базовой версии, а в планах — его постоянное тестирование, развитие, рекламные кампании в сети и не только.
В чём польза для клиента? Когда клиент работает с разными исполнителями (сначала агентство, а после собственный дизайнер), гайдлайн помогает получать предсказуемый результат. Сокращается время и бюджет на работу со стандартными страницами. Например, можно пропустить этап прототипирования и собрать страницу из уже имеющихся элементов.
В чём польза для агентства? При развитии проекта силами агентства, наличие гайдлайна помогает распределять работу между исполнителями разного уровня. Концепцию проекта, ключевые страницы и гайдлайн может разработать «звёздный» дизайнер. В то время как сборка остальных страниц отдаётся новичку: он будет работать с готовыми прототипами страниц и подробным руководством по их оформлению.
Для агентства наличие гайдлайна у веб-проекта — это своего рода формализация всех решений, что, например, может облегчить процесс утверждения новых страниц с клиентом.
Важно помнить, что такой документ — не панацея. Гайдлайн однажды устареет или его содержание станет недостаточным. В первом случае начнётся работа над новым дизайном, во втором — документ дополнится новыми пунктами.
Перспективы развития Гайдлайн лучше всего развивается, улучшается и масштабируется на сложных проектах с большим количеством исполнителей.
Вместо формального документа с фиксацией решений он становится живым рабочим инструментом дизайнеров.
Следующий шаг — эволюция дизайнерского гайдлайна в собственный фреймворк для верстальщиков. Не такой масштабный, как Bootstrap или Foundation, но решающий локальные нужды проекта.
Полный текст статьи читайте на CMS Magazine
