Как отличить хороший дизайн от плохого
Композиция и вёрстка
Композиция — гармоничное сочетание всех элементов страницы (изображений, блоков текста, иконок и т. д.). Она определяет, как элементы расположены относительно друг друга и как объединены в одно целое. Правильная композиция помогает читателю быстро понять, о чём говорится на странице и что там самое важное.
Обычно мы изучаем страницу так:
- Сначала смотрим на картинку, потом — на текст;
- Просматриваем страницу слева направо или сверху вниз. Траектории взгляда при этом напоминают буквы F или Z.
Так идёт направление взгляда по Z-траектории
Хороший дизайнер рисует макет страницы так, чтобы при беглом чтении человек выхватывал информацию в логической последовательности. Это помогает ему выстроить цельную картину того, что мы хотим ему сообщить.
Визуальная иерархия
Визуальная иерархия — главная составляющая композиции. Её задача — показать пользователю, какие элементы на странице главные, а какие — второстепенные. Дизайнер может выстроить иерархию с помощью размера элементов, их цвета, насыщенности, формы.
Вот пример, когда с визуальной иерархией всё хорошо:
На этом скриншоте ключевой объект — большая фотография спикера справа:
- Сначала мы смотрим на фото;
- Потом переводим взгляд на заголовок, выделенный полужирным;
- Затем — на описание и форму заявки внизу. Целевая кнопка выделена красным, поэтому сразу бросается в глаза. К тому же на неё указывает рукой спикер на основном фото.
Наверху и внизу страницы есть дополнительные элементы — текстовые врезки про дату, стоимость, онлайн-трансляцию. Они не так важны, и на них мы наверняка посмотрим только после того, как окинем взглядом главное.
Хороший дизайнер правильно выстраивает иерархию. Плохой не понимает её принципов и лепит на страницу всё подряд. В результате элементы конфликтуют между собой, а вся страница выглядит неряшливо и хаотично.
Визуальная иерархия нарушена — трудно понять, куда смотреть и на что нажимать
Якорные объекты
Якорные объекты — это ключевые и самые заметные элементы на странице. «Якорями» могут быть иллюстрации, логотипы, иконки, заголовки и даже блоки текста.
В хорошем дизайне якоря образуют чёткую структуру — каркас страницы. Обычно это структура в форме классического прямоугольника. Якорные объекты в таком прямоугольнике привязаны либо к точкам по углам и по центру, либо к сторонам. Вот две типичные схемы:
В первом случае якоря привязаны к углам и центру. Во втором — к сторонам
Возможны вариации. Например, так выглядит страница с четырьмя якорями:
Здесь есть центральный объект (фотография смартфонов) и 3 второстепенных якоря — в обоих верхних углах и по центру снизу. Они формируют прямоугольный каркас (обозначен пунктиром)
А это более сложная в плане дизайна страница. Здесь якорей больше, но прямоугольник прослеживается так же чётко:
Ясно заметны якорные объекты в центре, по углам и по правой стороне
Без «якорей» страница становится аморфной, пропадает ощущение организованности и баланса:
Здесь нарушена композиция, нет якорей, не выделен главный элемент, дизайнер не продумал последовательность восприятия
Нам комфортно, когда мы ощущаем закономерность в расположении элементов. Поэтому так важно, чтобы якоря были расположены правильно (и вообще были).
Воздух
«Воздух» — это свободное пространство вокруг элементов. Сайт, где композиция разряжена, а вокруг объектов достаточно пустого места («воздуха»), выглядит спокойно и красиво. Минимализм решает. Вот пример:
Блоки текста и постеры фильмов окружены свободным пространством
Здесь свободного пространства ещё больше — и это оправдано:
Такая страница легко читается — всего несколько информационных блоков, много «воздуха» и чётко обозначенные «якоря»
А вот типичная перегруженная страница:
Картинки, кнопки обратного звонка и пункты меню лепятся друг к другу, рядом яркие рекламные блоки. Страница словно атакует нас, как только мы на неё зайдём. Поэтому второй раз заходить не хочется — трудно разобраться в такой мешанине.
Близость, внутреннее и внешнее
Объекты, расположенные близко друг к другу, воспринимаются связанно. Хороший дизайнер понимает, какие элементы поместить рядом, а какие разделить отступами. Простейший пример — взаимосвязь заголовка и текста:
Здесь заголовок «Автопарк» относится к нижнему блоку. Но расстояние до нижнего блока (внутренний отступ) больше, чем до верхнего (внешний отступ). Надо было сделать наоборот.
Согласно теории близости внутренние отступы должны быть меньше внешних:
внутреннее ≤ внешнее
Это относится ко всем элементам на странице. Посмотрите на главную страницу YouDo:
Она выглядит компактно и симпатично, потому что соблюдено правило внутреннего и внешнего. Отступы внутри каждого блока меньше, чем между блоками:
Если дизайнер нарушает теорию близости, страница выглядит нелогично. Читатель сам вынужден разбираться, что к чему относится.
Выравнивание элементов
В хорошем макете, где соблюдается принцип близости, все элементы выровнены относительно друг друга. Это значит, что отступы равномерны, информационные блоки стоят симметрично, а фотографии не вылезают на поля. Если пропорции нарушены — дизайн непрофессиональный.
Композиция часто страдает от того, что элементы расположены в произвольном порядке. Здесь дизайнер неправильно поместил иконки:
Нижний ряд словно перевёрнут относительно верхнего. В верхнем ряду надписи над иконками, в нижнем — под иконками. Такую мозаику сложно воспринимать
Гораздо лучше делать так:
Правильные сочетания цветов
У каждого цвета — свой характер, свой эмоциональный посыл. Яркие цвета бодрят и создают энергичное настроение. Тёмные и приглушённые расслабляют:
- Жёлтый — позитивный, тёплый, солнечный цвет;
- Красный — энергичный, лидерский;
- Синий символизирует спокойствие и гармонию, свежесть и чистоту;
- Зелёный успокаивает, создаёт ощущение открытости и безопасности.
В хорошем дизайне цвета и сочетания цветов подобраны так, чтобы вызвать нужное впечатление. Например, детский сайт ФК «Зенит» не случайно выполнен в жёлто-голубой гамме:
Сочетание голубого с жёлтым даёт ощущение силы, открытости, взаимоподдержки и стремления к победе — идеальное решение для детей
В дизайне есть теория цветового круга. Она объясняет, как создавать гармоничные комбинации цвета:
Это не догма. Интересные сочетания можно создавать и по другим схемам. Но теория цветового круга — хороший помощник, поскольку она исключает совсем уж вырвиглазные цветовые композиции. А вот в плохом дизайне до сих пор встречаются красные кнопки на розовом фоне и ядовитые цвета.
Типографика
Типографика в дизайне — это свод правил, по которым оформляют текст. Хороший дизайнер знает, как подобрать шрифт, расстояние между строками и ещё десятки других деталей так, чтобы текст было легко читать. А плохая типографика на сайте портит весь дизайн.
Шрифт
Главное в шрифте — читабельность и эмоциональное впечатление.
Стандартные, широко распространённые шрифты обычно более читабельны, чем редкие и причудливые.
В первом случае текст читается лучше, чем во втором. Это заслуга шрифта
Мягкие, плавные шрифты транслируют лёгкость, спокойствие, радость. А вот шрифты с жёсткой, рубленой формой больше подходят для деловых сообщений и серьёзных тем.
Пример лёгкого плавного шрифта на сайте детского центра
Важно выбирать шрифт, который хорошо смотрится в разных размерах — и на больших, и на маленьких экранах.
В хорошем дизайне шрифты используются осмысленно и со вкусом. На одной странице — не более 1-2 шрифтов. Размеров шрифта — не более 3-4 (например, 18 pt для заголовка, 16 pt для подзаголовков и 12 pt для основного текста).
Кегль и межстрочный интервал
Кегль — это высота буквы. Если на странице больше одного шрифта — у всех должен быть примерно одинаковый кегль. Кегль лучше не делать слишком маленьким, чтобы читателю не пришлось вглядываться в крошечные буквы. Оптимальная величина — 14-18 pt, и точно не меньше 12 pt.
Простые шрифты средних размеров выглядят симпатично и читаются легко
Интервал между строками (интерлиньяж) должен быть больше высоты букв на 20-30%. Если интервал слишком маленький — строки сливаются, и текст превращается в «простынку». Если слишком большой — образуется слишком много лишнего пространства.
Длина строки и выравнивание текста
Оптимальная длина строки — не больше 700-1000 px. Это примерно 60-80 символов на строку (для мобильных устройств нужно ещё меньше — 30-40 символов).
Текст длиной от края до края экрана трудно читать, легко потерять следующую строчку
Выравнивание в текстовых блоках следует делать только по левому краю. По ширине, центру и правому краю — неправильно, потому что хуже читается.
Выделение текста
Писать текст прописными буквами — плохая идея, потому что его читабельность сразу падает. Если в тексте надо выделить какое-то предложение — лучше написать строчными буквами и выделить полужирным.
Взгляните на пример плохой типографики:
Текст, написанный прописными буквами, сложнее читать
Контент
Контент — это содержимое сайта: фотографии, иллюстрации, видеоролики, текст. Некачественный контент может визуально испортить сайт, даже если дизайн в целом неплохой.
Реальные и стоковые фотографии
Лучшие фотографии — реальные фотографии. На сайте медклиники должны быть фото врачей, кабинетов и оборудования. В интернет-магазине — снимки именно тех товаров, которые там продаются. Это создаёт доверие. Люди видят, что всё по-честному.
Это настоящие врачи, а не профессиональные модели
Напротив, стоковые картинки убивают доверие посетителей. В интернете полно сайтов с такими изображениями — там улыбаются идеальные модели, а бизнесмены в безупречных костюмах пожимают друг другу руки. Такие фото не имеют отношения к реальности. И посетители это понимают.
А это человек со стокового фото, которое висит на сотнях сайтов
Качественные и некачественные фотографии
Снимки для сайта должен делать фотограф на профессиональную камеру. Так выглядят реальные фото, на которые приятно смотреть:
Качественные фото фермерской продукции. Они настоящие, но при этом красивые
Непрофессиональные фотографии выглядят неряшливо. Снимки, сделанные в низком разрешении, при плохом освещении или с нарушенной композицией, портят впечатление.
Фотография размытая, тусклая, в низком разрешении
Дизайн — это удобство
Хороший дизайн — это не только красивая картинка. Это прежде всего забота о посетителе сайта: правильная композиция делает страницу простой и понятной, типографика и вёрстка добавляют читабельности, а хороший контент мотивирует человека остаться. Доверяйте своим ощущениям, оценивайте дизайн по принципам, о которых мы рассказали — и ни один профан-дизайнер вас не обманет.