UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Почему дизайн выглядит хорошо? Небольшое исследование Nielsen Norman Group
Редакція
Редакція

Опубліковано

Почему дизайн выглядит хорошо? Небольшое исследование Nielsen Norman Group

#ui

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

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

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

Пример 1: Типографика и интервалы

Наш первый пример взят с Medium.com. В этом дизайне используются сетка, пустое пространство и типографическая система для создания удобного, но красивого опыта чтения.

Дизайн Medium простой, но привлекательный. Продуманная система типографики, интервалы и последовательное выравнивание по левому краю упрощают чтение, а дополнительная информация представлена ​​на визуально целостной боковой панели.

В дизайне используется сетка из 3 столбцов. Каждый текстовый элемент выравнивается по линиям сетки. Между значками на левой боковой панели используется единый элемент отступа (вертикальные разделители), а для разделения на группы используется принцип группирования. Заглавные буквы выделяют заголовок WRITTEN BY, а очень большой лидинг делает дизайн воздушным и легким.

Выравнивание по сетке. Для начала есть сетка столбцов (розовые линии на изображении выше). Сетка столбцов представляет собой вертикальные линии привязки, по которым выравниваются объекты. Поскольку содержимое боковой панели выровнено по левому краю по крайней левой линии сетки, дизайн выглядит четким, а содержимое боковой панели легко сканировать. Текст статьи также выравнивается по левому краю по линии сетки столбцов.

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

Типографическая дисперсия. Medium использует разные стили шрифта из одного и того же семейства (маленькие заглавные, полужирный, курсив, подчеркнутый) и небольшие изменения цвета (черный вместо серого), чтобы различать разные типы контента. Хотя слишком большое разнообразие может нарушить согласованность и сделать дизайн бессистемным, варианты Medium применяются последовательно и целенаправленно. Например, заглавные буквы надписи WRITTEN BY указывают на то, что это заголовок раздела. Это выделение не дает дизайну казаться плоским, но при этом создает ощущение связности с остальным текстом. Как правило, определите типографическую систему и ограничьте свой дизайн 1-2 шрифтами; всегда используйте один и тот же вариант шрифта (курсив, полужирный, заглавные буквы) для одной и той же цели (даже для веб-страниц или областей вашего интерфейса).

Дополнительный интервал между строками текста. Лидинг, который представляет собой расстояние между базовой линией каждой строки абзаца, немного увеличивается по сравнению с интервалом по умолчанию (который обычно на 2px больше размера шрифта). В этом случае лидинг на 4–6 пикселей больше размера шрифта, что помогает создать легкий и открытый текстовый блок. Уменьшение стандартного межстрочного интервала привело бы к неудобным столкновениям между верхними и нижними элементами, а также к высокой плотности текста. Рассмотрите возможность увеличения лидинга по умолчанию +2px, если у вас есть несколько абзацев текста, которые в противном случае могут выглядеть визуально плотными и тяжелыми.

Настройки кернинга и трекинга. Дизайнер также учел неудобные промежутки между буквами из-за их особой формы. Кернинг и трекинг обычно применяются к более крупному тексту, например, к заголовкам, где пробелы более заметны. Обычно пробелы возникают вокруг букв, образующих угол (W, Y, V или T). Например, в заголовке «What Exercise Looks Like in Japan» интервал между буквами W и h в слове What был слегка сжат. Хотя большинство семейств шрифтов автоматически регулируют кернинг (он встроен в стиль шрифта), рассмотрите возможность ручной настройки кернинга для больших заголовков или логотипов, где пространство между буквами заметно.

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

Пример 2: Иерархия и цвет

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

В дизайне Ritual используются масштаб и цвет для создания иерархии страниц.

Этот дизайн центрирует контент на 3-х якорных линиях. Название, изображение, описание и кнопка каждого продукта сосредоточены вокруг одной из линий. Цветовая палитра ограничена – преобладает синий и желтый. Этот тип палитры позволяет четко различать контент (синий) и призыв к действию (желтый).

Улучшенная цветовая палитра. Цветовая палитра ограничена двумя основными цветами: синим и желтым, классическими дополнительными цветами. Особые цвета синий и желтый делают дизайн привлекательным – желтый не слишком яркий, а синий достаточно темный, чтобы его можно было читать на белом фоне. Если бы желтый и синий были основными цветами CMYK, дизайн не выглядел бы так утонченно (и больше напоминал бы дизайн веб-сайта начала 90-х). Выбирая цветовые оттенки для своего дизайна, создайте цветовую палитру и проведите итерацию – меняйте разные цвета, чтобы увидеть, как они сочетается друг с другом. Слегка отрегулировав цвет по сравнению с основным цветом, вы сможете улучшить свой выбор. Например, скриншот выше был изменен (ниже), чтобы продемонстрировать, как бы выглядел дизайн, если бы использовались основные цвета.

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

Нам нравится использовать Adobe Color для вдохновения чужими цветовыми палитрами. Если вам нравятся цвета на другом сайте, попробуйте определить, почему вам нравится именно эта цветовая комбинация, тона или уровни насыщенности? Ограничивая цветовую палитру несколькими цветами, вы фокусируете внимание на дизайне, так как нужно учитывать несколько элементов (и, следовательно, меньше отвлекающих факторов). Дизайн будет лучше представлять бренд.

Четкая визуальная иерархия. Визуальная иерархия направляет взгляд и сигнализирует о важных элементах страницы. В этом примере внимание сначала обращается на самый крупный типографический элемент, большой заголовок «Essential for Women,», который дает пользователю быстрый и краткий обзор содержимого страницы. Затем наше внимание переключается на желтые изображения и кнопки «Add to Cart».

Обратите внимание на смешанный типографический подход к заголовку: «Essential for Women,», который, по-видимому, стремится подчеркнуть важность продуктов и тот факт, что они созданы специально для женщин.

В ваших собственных дизайнах при смешивании стилей текста обязательно:

  1. Используйте не более двух разных шрифтов в одном заголовке. (мы имеем ввиду обычный, курсив и полужирный шрифт с несколькими вариантами начертания, каждый с вариантом курсива). Используйте полужирный шрифт или подчеркивание для наиболее важных слов и курсив для второстепенных. Лучше меньше, да лучше – например, если бы слово «Women» также было подчеркнуто, дизайн выглядел бы бессистемно. Оно составило бы конкуренцию выделенному полужирным слову «Essential» и нарушило бы иерархию чтения.
  2. Сохраняйте единообразие стилей на всех страницах. Так как «Essential» в этом заголовке выделено полужирным шрифтом, на целевой странице категории «Essential for Men» оно тоже должно быть выделено полужирным.

После прочтения заголовка наше внимание переключается на большие изображения продуктов и желтые кнопки «Add to Cart».

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

Пример 3: Последовательность

Наш третий пример взят из мобильного приложения Spotify. В этом дизайне эффективно используется единообразие визуальной обработки для создания единого опыта от прослушивания в приложении.

Приложение Spotify использует согласованность в изображениях, цветах и ​​интервале для создания единства, сохраняя при этом ясность во многих областях приложения.

Визуальная согласованность – главный фактор, способствующий безупречному внешнему виду Spotify. Есть согласованность, типографики и отступов, а также жанра иллюстраций. Единственным исключением из этой последовательности является расстояние между разделом Popular playlists и плитками ниже (средний экран), которое не соответствует интервалу между разделом Classic Rock и плитками ниже (правый экран). В идеале расстояние должно быть одинаковым. Интервал четко определяет группировку, в то время, как цвет различает жанры.

Последовательная визуальная обработка. Если визуальные элементы используются непоследовательно или время от времени, дизайн будет выглядеть непрофессиональным. В Spotify многие визуальные элементы остаются неизменными в разных областях приложения. Во-первых, интервалы между столбцами (слева и справа) одинакового размера на всех экранах приложений. Более того, внутри жанров верхние линии сетки (и, следовательно, выравнивание и расположение заголовков в верхней части экранов) и типографика остаются неизменными. Хотя цвет градиента меняется от жанра к жанру, он сохраняет постоянный оттенок и насыщенность.

Во-вторых, в каждой категории есть плитка с индивидуальным изображением. Хотя каждая категория имеет определенный цвет и графику, плитки единообразны по макету и иерархии. Например, название каждой категории (Pop, Rock, Educational на экране поиска) находится в одном и том же месте на каждой плитке. Изображение на плитке (т. е. обложка альбома) постоянно расположено справа, растекаясь по плитке. Эти детали делают весь дизайн целостным и изысканным.

В своих дизайнах вы должны стремиться создать визуальную систему и придерживаться ее в различных областях. Например, сделайте межэлементный интервал на веб-странице одинаковым или кратным одной и той же единице (например, если базовое расстояние между заголовком и основным текстом составляет 5px, для разделения разных разделов можно использовать 2 единицы базового интервала и т. д.).

Отступы для создания групп. Близость или расстояние между элементами помогает формировать группы. В нашем примере минимальное пространство между плитками контента в разделе Your top genres (Pop and Rock) свидетельствует о том, что они принадлежат друг другу, в то время, как разделы Educational и True Crime относятся к категории Popular podcast. При создании групп используйте меньше места между заголовком и его содержимым и больше места между группами.

Вывод

Дизайны не выглядят удачными случайно. Каждое дизайн-решение должно приниматься намеренно, и в идеале должно быть подкреплено системой визуального дизайна. Хотя нет однозначных критериев, определяющих хорошо выглядит дизайн, соблюдение ряда принципов увеличивает вероятность того, что это так:

  • Выровняйте типографику (и другие графические элементы) по сетке. Прикрепите каждый элемент к линии вашей сетки.
  • Установите четкую иерархию и цветовую палитру. Решите, что является наиболее важным, и намеренно примените к нему определенную визуальную обработку (размер, цвет, размещение), чтобы пользователи увидели этот элемент первым.
  • Сохраняйте последовательность. Определите четкие визуальные правила и последовательно применяйте их во всем дизайне.

Именно применение этих принципов дизайна в совокупности делает дизайн красивым и способствует удобству опыта.


Перевод статьи nngroup.com

Топ коментарі (0)