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

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

Adobe Photoshop и Fireworks могут оказаться и не лучшими средствами для веб-разработки, но все же будут ценными для создания любого вида компонентов. Чтобы помочь вам избавиться от мыслей о разметке на данном этапе, попробуйте начать с холстов Photoshop и Fireworks, размеры которых составляют 10,000 на 10,000 пикселей и больше.

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

Трент Уолтон писал[140]:

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

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

Последние несколько месяцев я использовал схемы дизайна для демонстрации моим клиентам. Я счел это чрезвычайно эффективным, несмотря на то что требуется несколько минут, чтобы объяснить суть клиенту, который до этого ничего не знал о таком методе работы раньше. Мы можем спросить у любого, кто заинтересован: «Это то настроение сайта, к которому мы стремились?»

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

• Насколько чистым или минималистичным должен быть дизайн?

• Как мы будем использовать цвет для передачи действий и смысла?

• Сколько будет шагов в тоне и контрасте?

• Как будут использоваться гарнитуры для различия типов контента?

• Сколько уровней будет в типографической иерархии?

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

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

Одна схема вам известна:

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

Мозайка стилей

Абстракция дизайна во впечатлениях и ощущениях от элементов – это нечто такое, о чем думает дизайнер Саманта Уоррен. Она называет эту технику мозайкой стилей.

Саманта поясняет[141]:

«Мозаика стилей – это визуальный трей из элементов цветовой палитры, текстурных узоров и цветовых вариантов, которые поддерживают цели клиентов. У меня есть шаблон в Photoshop со специально замаскированными участками, где […] я представляю образцы стилей клавиш, решения навигации и типографических возможностей».

Саманта считает эту технику эффективным средством коммуникации, так же как и для дизайна на уровне компонентов[142].

BOOTSTRAP

[143]

Для других, элементы страницы могут быть компоновочными блоками для будущего дизайна. Возьмем Марка Отто и Джейкоба Торнтона – тандем дизайнеров-разработчиков, которые работают в Twitter. Эти двое стоят за Bootstrap[144]. Интернет может быть безграничным, но контент у него есть всегда. Мы выражаем этот контент через соответствующие HTML-элементы:

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

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

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

Рисунок 11.4. MailChimp создал свою собственную библиотеку образцов пользовательского интерфейса, чтобы документировать, как задается стиль элементам пользовательского интерфейса