Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

• заголовки и их уровни от 1 до 6;

• параграфы, цитаты и элементы на уровне текста;

• списки: определения, нумерованный и ненумерованные;

• медиа: диаграммы, заголовки и изображения;

• таблицы;

• формы: кнопки, элементы и метки.

Так же как у Twitter есть своя сетка, так и Bootstrap включает в себя дизайн по умолчанию для «типографики, форм, клавиш, меток, сеток, навигации и остального». Bootstrap интересен по ряду причин. Не только потому, что это мощный шаблон для разработки, но и потому что в нем есть полный список HTML-элементов, вместе с несколькими стилями по умолчанию, что является идеальной отправной точкой для нового дизайна.

Рисунок 11.1. Сначала вы должны узнать, почему такие средства разработчика, как Bootstrap важны для отзывчивого рабочего процесса. Возможно, вы удивитесь, когда узнаете, что Bootstrap – это великолепная исходная точка для разработки элементов страницы

Dribbble [145]– это сайт, где дизайнеры обмениваются маленькими скриншотами (максимум 400 на 300 пикселей) дизайнов, над которыми они работают.

Рисунок 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, – великолепные примеры дизайна элементов. Они детально описывают, как должен выглядеть каждый элемент, появляющийся в дизайне. И делают они это с небольшой ссылкой на разметку или вовсе без нее.

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

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