Теперь, когда мы делаем отзывчивый дизайн, мы можем начать с моделирования компонентов как индивидуальных, но связанных частей дизайна.
Adobe Photoshop и Fireworks могут оказаться и не лучшими средствами для веб-разработки, но все же будут ценными для создания любого вида компонентов. Чтобы помочь вам избавиться от мыслей о разметке на данном этапе, попробуйте начать с холстов Photoshop и Fireworks, размеры которых составляют 10,000 на 10,000 пикселей и больше.
На этой дизайн-схеме группируйте элементы в заголовки, стили основного текста, формируйте элементы, кнопки, сообщения об ошибках и т. д. Если необходимо, перемещайте компоненты по схеме, чтобы посмотреть, как они будут выглядеть в соотношениях друг с другом.
Трент Уолтон писал[140]:
«Веб-дизайнерам нужно выходить за пределы разметки и представлять, как ее элементы будут переставляться и заключаться в различную ширину при сохранении формы и иерархии. Медиазапросы могут использоваться не только для того, чтобы исправить нарушенное расположение: при правильном планировании мы можем начать выстраивать контент пропорционально размеру экрана, предоставляя самый лучший опыт взаимодействия, который возможен, на любой ширине».
Отделение дизайна от разметки, которого мы добились, когда занимались разработкой на атомарном уровне важно, потому что это помогает всем – дизайнеру и его боссам или заказчику – сконцентрироваться на деталях дизайна, при этом не устанавливая ожиданий, как элементы в конечном счете будут располагаться на экранах разных размеров или устройствах.
Последние несколько месяцев я использовал схемы дизайна для демонстрации моим клиентам. Я счел это чрезвычайно эффективным, несмотря на то что требуется несколько минут, чтобы объяснить суть клиенту, который до этого ничего не знал о таком методе работы раньше. Мы можем спросить у любого, кто заинтересован: «Это то настроение сайта, к которому мы стремились?»
Схемы дизайна – это потрясающие средства для прояснения желаний клиента на раннем этапе процесса разработки. Вместо того чтобы поощрять смутные высказывания типа «Мне не нравится дизайн», этот метод помогает нам быть определенными, когда мы обсуждаем дизайн.
• Насколько чистым или минималистичным должен быть дизайн?
• Как мы будем использовать цвет для передачи действий и смысла?
• Сколько будет шагов в тоне и контрасте?
• Как будут использоваться гарнитуры для различия типов контента?
• Сколько уровней будет в типографической иерархии?
Проектирование компонентов таким способом может помочь нам найти ответы на эти вопросы и предоставить всем заинтересованным лицам альтернативы и возможности изменить свое мнение до вложения значительных инвестиций в дизайн или разработку.