Кратко: визуально эстетичный дизайн использует согласованную типографику, устанавливает четкую иерархию, использует изысканную цветовую палитру и выравнивается четко по сетке.
Такие визуальные детали, как шрифты, цвета и выравнивание создают удобство для пользователя и отражают особенности бренда (например, дружелюбие или надежность).
Посмотрев на дизайн, легко заметить, хорошо ли он выглядит. Гораздо сложнее бывает понять, что именно делает его хорошим. В этой статье мы анализируем три интерфейса и говорим о тех принципах визуального дизайна, которые делают эти интерфейсы привлекательными.
Пример 1: Типографика и отступы
Наш первый пример из Medium.com. Сетка, пустое пространство и типографская система используются для создания красивого и в то же время удобного для чтения дизайна.
Выравнивание по сетке. Для начала — есть сетка (розовые линии на изображении выше). Сетка представляет собой вертикальные линии привязки, по которым выравниваются объекты. Поскольку содержимое боковой панели выровнено по левому краю и по крайней левой линии сетки, дизайн выглядит четким, а содержимое боковой панели легко читается. Текст статьи также выравнивается по левому краю по линии сетки.
Во время работы настройте сетку и сохраняйте это выравнивание на разных страницах и элементах. Любые несоответствия при выравнивании должны быть целенаправленными — определите четкие правила, которыми вы будете руководствоваться (и помните, что выравнивание по левому краю упрощает визуальное восприятие.
Вариантность в типографике. Medium использует разные стили шрифта из одного и того же семейства шрифтов (малые прописные, полужирный, курсив, подчеркнутый) и небольшие изменения цвета (черный и серый) чтобы дифференцировать разный тип контента. Хотя слишком большое разнообразие может нарушить согласованность и сделать дизайн бессистемным, варианты Medium применяются последовательно и целенаправленно. Например, заглавные буквы WRITTEN BY указывают на то, что это заголовок раздела. Благодаря такой вариантности дизайн не кажется плоским, и при этом сохраняется ощущение согласованности с остальным текстом. Возьмите за правило изначально устанавливать одну типографскую систему и ограничьте свой дизайн 1-2 шрифтами; всегда используйте один и тот же вариант шрифта (курсив, полужирный шрифт, заглавные буквы) для одной и той же цели (даже на разных веб-страницах или областях вашего интерфейса).
Дополнительный интервал между строками текста. Интервал, который представляет собой расстояние между базовой линией (воображаемая прямая линия, проходящая по нижнему краю букв без учета их свисающих элементов) каждой строки абзаца, немного увеличен по сравнению с интервалом по умолчанию (который обычно на 2 пикселя больше размера шрифта). В этом случае интервал на 4–6 пикселей больше размера шрифта, что помогает создать легкий для восприятия текстовый блок. Уменьшение стандартного межстрочного интервала привело бы к неудобным визуальным наслаиваниям между верхними и нижними выносными элементами букв, а также к слишком близкому размещению текста.
Если у вас есть несколько абзацев, которые визуально могут казаться трудно читаемыми и тяжелыми, рассмотрите возможность увеличения интервала по умолчанию на 2 пикселя.
Кёрнинг и трекинг. Дизайнер Medium также учел неудобные промежутки между буквами из-за их особой формы. Кёрнинг (избирательное изменение интервала между буквами в зависимости от их формы. — прим) и трекинг (равномерное изменение расстояния между буквами — прим) обычно применяются к более крупным шрифтам, например заголовкам, так как там пробелы гораздо заметнее. Обычно, пробелы возникают между буквами, которые образуют угол, например W, Y, V или T. К примеру, в заголовке «What Exercise Looks Like in Japan» интервал между буквами W и h в слове What был слегка сжат. Хотя большинство семейств шрифтов автоматически регулируют кёрнинг (он встроен в стиль шрифта), рассмотрите возможность ручной настройки кёрнинга для больших заголовков или логотипов, где есть сильно заметное межбуквенное пространство.
В совокупности все эти детали делают дизайн красивым, но в то же время выполняют главную функцию веб-страницы — делают ее легко читаемой.
Пример 2: Иерархия и Цвет
Наш второй пример — сайт компании Ritual.com, они производят витамины. Иерархия, цвета и изображения используются здесь для визуально привлекательного восприятия.
Утонченная цветовая палитра. Цветовая палитра ограничена двумя основными цветами: синим и желтым. Это классические дополняющие цвета. Выбранные синий и желтый цвета делают дизайн привлекательным — желтый не слишком яркий, а синий достаточно темный, чтобы его можно было читать на белом фоне. Если бы были выбраны базовые желтый и синий из CMYK (CMYK Ritual в своем дизайне используют цвет и масштаб для создания иерархии страниц система цветопередачи, использует голубой, пурпурный и жёлтый цвета в роли основных, а также чёрный цвет Ritual в своем дизайне используют цвет и масштаб для создания иерархии страниц прим.), дизайн не выглядел бы так утонченно (и больше походил бы на дизайн сайта из начала 90-х). Выбирая цветовые оттенки для своего дизайна, создайте цветовую палитру и экспериментируйте — добавляйте и убирайте разные цвета, чтобы увидеть, какие из них хорошо сочетаются друг с другом. Держитесь подальше от всего, что слишком похоже на цвет маркера-выделителя, т.е. всего слишком яркого. Слегка отрегулировав цвет по сравнению с базовым вы сможете добиться нужного вам оттенка. Например, приведенный выше снимок экрана был изменен (новый ниже), чтобы продемонстрировать, как выглядел бы дизайн, если бы использовались базовые цвета палитры.
Вдохновение для создания палитры мы черпаем из Adobe Color. Если вам нравятся цвета на каком-то сайте, попробуйте понять почему — может это конкретная цветовая комбинация, оттенок или уровни насыщенности? Ограничивая палитру несколькими цветами, вы фокусируете внимание на дизайне, поскольку становится мало элементов (и, следовательно, с помощью этого ограничения у вас меньше отвлекающих факторов). Дизайн создаст более сильную репрезентацию бренда.
Четкая визуальная иерархия. Визуальная иерархия направляет взгляд и сигнализирует о важных элементах на странице. В этом примере внимание сначала обращается на самый крупный элемент, большой заголовок «Essential for Women», который дает пользователю быстрый краткий обзор контента страницы. Затем наше внимание переключается на желтые изображения и кнопки «Добавить в корзину».
Обратите внимание на смешанную типографику в заголовке: «Essential for Women», который, кажется, стремится подчеркнуть и важность продуктов и тот факт, что они созданы специально для женщин.
В ваших собственных разработках при смешивании стилей типографики, обязательно:
- Используйте не более двух разных шрифтовых настроек в одном заголовке. (Под шрифтовыми настройками мы подразумеваем обычный, курсив и полужирный шрифт с несколькими вариантами начертания, каждый с вариантом курсива). Используйте жирный шрифт или подчеркивание для наиболее важных слов и курсив для второстепенных слов. Лучше меньше, да лучше — например, если бы также было подчеркнуто слово «Women», дизайн выглядел бы бессистемно. Это составило бы конкуренцию дерзкой трактовке «Essential» и нарушило бы иерархию чтения.
- Сохраняйте единообразие стилей на всех страницах. Поскольку слово «Essential» в этом заголовке выделено жирным шрифтом, оно должно быть выделено жирным шрифтом и на целевой странице категории «Essential for Men».
После прочтения заголовка наше внимание переключается на большие изображения продуктов и желтые кнопки «Добавить в корзину».
Использование изображений высокого качества. Изображения могут добавить ценную информацию к описанию продукта. Простой стиль фотографии без лишнего мусора, отвлекающего от продукта, тоже влияет на общий визуальный дизайн. Фоны изображений плавно переходят в фон карточки товара и придают странице более утонченный вид. Фотографии в вашем макете должны помочь пользователям визуально понять продукт или концепцию, а не быть просто украшением. Чтобы ваш дизайн стал лучше, позвольте изображениям сливаться с остальным дизайном, сочетайте цвета фона на изображении с остальными цветами на сайте.
Пример 3: Последовательность
Наш третий пример взят из мобильного приложения Spotify. Здесь эффективно используется единообразие визуальной обработки для создания общего впечатления от прослушивания музыки в этом приложении.
Последовательная визуальная обработка. Дизайн будет выглядеть непрофессионально и небезупречно, если визуальные элементы используются непоследовательно или эпизодически. В Spotify же большая часть визуальных элементов остаются неизменными в разных частях приложения. Во-первых, отступы от контента справа и слева одинакового размера на всех экранах приложения. Более того, внутри жанров верхние линии сетки (и, следовательно, выравнивание и расположение заголовков в верхней части экранов) и типографская обработка остаются точно такими же. Хотя цвет градиента меняется от жанра к жанру, он сохраняет постоянный оттенок и насыщенность.
Во-вторых, в каждой категории есть блок с индивидуальным изображением. Хотя каждая категория имеет определенный цвет и графику, блоки единообразны по макету и иерархии. Например, название каждой категории (Pop, Rock, Educational на экране поиска) находится в одном и том же месте в каждом блоке. Изображение (т.е. обложка альбома) всегда справа, расположена полностью на блоке. Все эти детали делают дизайн утонченным и целостным.
В своих проектах вы должны стремиться создать определенную визуальную систему и придерживаться ее в различных частях приложения. Например, сделайте межэлементный интервал на вашей веб-странице одинаковым или кратным одной и той же единице (например, если базовое расстояние между заголовком и контентом составляет 5 пикселей, для деления разных разделов можно использовать +2 единицы базового интервала и т.д.)
Пространство для создания групп объектов. Принцип близости, или по-другому незаполненное пространство между элементами, помогает группировать объекты. В нашем случае в блоке Your top genres “Поп” и “Рок” находятся рядом, что говорит о том, что они связаны, в то время как Educational и True Crime принадлежат к категории “Популярное”. Для создания таких объединений используйте меньше места между заголовком и его контентным блоком, и больше места между группами.
Заключение
Красивый дизайн — не случайность. Каждое решение в создании дизайна должно приниматься намеренно, в идеале оно должно быть подкреплено визуальной системой. Хотя нет ничего, что могло бы объяснить, хорошо выглядит дизайн или нет, следование нескольким принципам увеличивает вероятность того, что дизайн хорош:
- Выравнивайте типографику (и другие графические элементы) по сетке. Расположите каждый элемент согласно линиям вашей сетки.
- Устанавливайте четкую иерархию и цветовую палитру. Решите, что является наиболее важным в вашем дизайне, и намеренно примените к нему определенную визуальную обработку (размер, цвет, размещение), чтобы пользователи увидели это в первую очередь.
- Оставайтесь последовательными. Определите четкие визуальные правила и последовательно применяйте их во всем своем дизайне.
Именно применение этих принципов дизайна в совокупности делает дизайн красивым и способствует удобству его использования.
