Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки (Стори, Уолтер) - страница 209

Рисунок 11.2. Dribble показывает элементы в нейтральном окружении

Совершите путешествие по страницам Dribbble, и вы найдете много примеров дизайна элементов и деталей, над которыми потеют дизайнеры. Вы найдете дизайн навигации и решения для встраивания изображений. Если формы – это ваше, то вы найдете стили для каждого элемента формы, плюс стили клавиш для любого состояния. О типографике здесь тоже не забыли. Для вас здесь сколько угодно примеров гарнитур и решений.

Шоты сайта Dribbble – это прекрасные примеры разработанных элементов без разметки. Они показывают, как мы можем разработать дизайн и потом продемонстрировать нашим боссам и заказчикам направление дизайна в формате, который не путает стиль с расположением.

Когда вы работаете над проектом, в котором участвует группа людей, подробное и хорошо написанное руководство по стилю может стать жизненно необходимым для поддержки целостности дизайна. При организации пользуйтесь руководством по стилю для разных целей – издатели используют его для орфографии и правил пунктуации. А специалисты по печати и рекламе используют их для задания стиля в письменных публикациях. Лучшие руководства по стилю четко устанавливает стиль сайта.

Рисунок 11.3. Global Experience Language (GEL) – 18 документов полного визуального стиля для веба компании ВВС

Один из лучших приведенных примеров полного комплекта руководств по стилю «пришел» из BBC. Его руководство Global Experience Language (GEL)[146] документирует полный визуальный язык BBC для использования в Интернете, с подробной информацией о типографике, иконографике и дизайне элементов интерфейса, таких как наложение, «аккордеон» и карусель изображений.

E-mail-эксперт MailChimp[147] создал свою собственную библиотеку образцов пользовательского интерфейса, чтобы документировать то, как задается стиль таким элементам, как клавиши, формы, таблицы и табы (вкладки).

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

Вещи, подобные Bootstrap в Twitter, GEL от BBC и библиотеке образцов пользовательского интерфейса от MailChimp, – великолепные примеры дизайна элементов. Они детально описывают, как должен выглядеть каждый элемент, появляющийся в дизайне. И делают они это с небольшой ссылкой на разметку или вовсе без нее.

Самое детальное руководство по стилю не просто документирует дизайн сайта – оно само его дизайн. Поэтому зачем ждать окончания процесса до того, как сделать руководство по стилю? Вместо этого рассматривайте эти руководства как еще один пример дизайна на уровне элементов.