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

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

Рисунок 11.5. Сайт Food Sense

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

Как пример, мы можем описать работу с контурами. Какие они: простые, двойные или пунктирные? С постоянной шириной? Существует ли иерархия ширины разделительной линии между второстепенными и основными разделами? Если да, то, как выстраивается эта иерархия?

Как затеняется контент? Блоки имеют однородный цвет фона? Они градуированные или с паттернами? Углы блоков закругленные или квадратные? Все это относится к текстуре.

Food Sense имеет плоское цветное затенение для блоков и простые серые пунктирные или сплошные линии, которые разделяют область контента.

Его кнопки и активные ссылки с тонкими серыми подчеркиваниями и тенями. Изображения в контенте даны в белой рамке с серой границей. Представленные в виде рисованных набросков, пиктограммы усиливают атмосферу дизайна сайта Food Sense.

Типографика, возможно, представляет собой самый простой элемент атмосферы, который можно извлечь, но она значит больше, чем просто выбор гарнитуры. Типографическая атмосфера включает в себя межстрочный интервал (высота строки), трекинг (межбуквенное расстояние), а также свободное пространство разделяющее элементы.

Элиот Джей Стокс пишет [149]:

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

Дизайнеры сайта Food Sense выбрали строчный шрифт с засечками FF Tisa Web Pro для заголовков, основного текста и навигации. Этот дизайн допускает много свободного пространства, которое создает открытую и легкую атмосферу.

Изучая атмосферу дизайна, наш взгляд быстро настраивается на разницу между ними. С той же тематикой – о еде– сайт Джейми Оливера [150]выглядит иначе, чем сайт Food Sense. Теперь ваша очередь извлекать атмосферу из сайта Джейми Оливера и анализировать цвет, текстуру и типографику.

Рисунок 11.6. Сайт Джейми Оливера

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

Текстура. Как на сайте используются фоновые иллюстрации для создания блоков контента? Вы заметили паттерны? Например, как заголовки отделены от контента под ними? Какой стиль у кнопок? Их углы закругленные или квадратные? Есть ли последовательность?

Типографика. На сайте используются обычные предустановленные шрифты. Есть ли легко распознаваемая типографическая иерархия заголовков? Существует ли разница между видами основного текста? Если да, то в чем? Сайт воспринимается как открытый или сжатый? Как поля и отступы влияют на чувство пространства внутри дизайна?

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

BBC Food использует цвет, чтобы пояснить, какие элементы являются ссылками. У него приглушенная палитра, возможно для того, чтобы сделать акцент на цвете фотографий. Там, где BBC использует иконки из своего комплекта иконок GEL, они плоские и одноцветные – такие же, как фон блоков контекста.

Края блоков сайта BBC остаются квадратными и острыми. Где контент перекрывает изображения, дизайнеры BBC Food используют полупрозрачные черно-белые прямоугольники. Сами изображения по большому счету необработанные и у них нет никаких границ.

Рисунок 11.7. Сайт BBC Food