Главное Авторские колонки Вакансии Образование
Выбор редакции:
3 572 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

​Как отличить хороший дизайн от плохого

Плохой дизайн похож на неудобное кресло. Оно может выглядеть вполне обычно, но чувствуется — что-то тут не так. В этой статье мы разберём, что «не так» бывает в дизайне и по каким признакам это определить.Во многом дизайн — вещь субъективная. Но есть ряд самых общих и явных признаков, по которым качественный дизайн можно отличить от халтуры.
Мнение автора может не совпадать с мнением редакции

Композиция и вёрстка

Композиция — гармоничное сочетание всех элементов страницы (изображений, блоков текста, иконок и т. д.). Она определяет, как элементы расположены относительно друг друга и как объединены в одно целое. Правильная композиция помогает читателю быстро понять, о чём говорится на странице и что там самое важное.

Обычно мы изучаем страницу так:

  1. Сначала смотрим на картинку, потом — на текст;
  2. Просматриваем страницу слева направо или сверху вниз. Траектории взгляда при этом напоминают буквы F или Z.

_E9JhdnGBCrtgYL39HSphLE0iqjoTas8-DVfXJPa

Так идёт направление взгляда по Z-траектории

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

Визуальная иерархия

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

Вот пример, когда с визуальной иерархией всё хорошо:

oaSup_qGJJ-BcptH1lYSJLX4spuwqVuQkjGJy2od

На этом скриншоте ключевой объект — большая фотография спикера справа:

  • Сначала мы смотрим на фото;
  • Потом переводим взгляд на заголовок, выделенный полужирным;
  • Затем — на описание и форму заявки внизу. Целевая кнопка выделена красным, поэтому сразу бросается в глаза. К тому же на неё указывает рукой спикер на основном фото.

Наверху и внизу страницы есть дополнительные элементы — текстовые врезки про дату, стоимость, онлайн-трансляцию. Они не так важны, и на них мы наверняка посмотрим только после того, как окинем взглядом главное.

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

RIBf1-4u65eqRvXr6NYYHn1WsjO2JBQ4ldQrm5_e

Визуальная иерархия нарушена — трудно понять, куда смотреть и на что нажимать

Якорные объекты

Якорные объекты — это ключевые и самые заметные элементы на странице. «Якорями» могут быть иллюстрации, логотипы, иконки, заголовки и даже блоки текста.

В хорошем дизайне якоря образуют чёткую структуру — каркас страницы. Обычно это структура в форме классического прямоугольника. Якорные объекты в таком прямоугольнике привязаны либо к точкам по углам и по центру, либо к сторонам. Вот две типичные схемы:

l5jhPtYjD63GuiNRmpLbnCC1tZEgZhxQwd9_yHfw

В первом случае якоря привязаны к углам и центру. Во втором — к сторонам

Возможны вариации. Например, так выглядит страница с четырьмя якорями:

-Bk8qThLaBAD68Zx5qhuLGR-IBQvnvO2PX-REDsi

Здесь есть центральный объект (фотография смартфонов) и 3 второстепенных якоря — в обоих верхних углах и по центру снизу. Они формируют прямоугольный каркас (обозначен пунктиром)

А это более сложная в плане дизайна страница. Здесь якорей больше, но прямоугольник прослеживается так же чётко:

bHgQrzEGgoatAVgJW2B3TtsWxOas3WpVe-XtJakD

Ясно заметны якорные объекты в центре, по углам и по правой стороне

Без «якорей» страница становится аморфной, пропадает ощущение организованности и баланса:

DCK9qhUCB7bBKLQr7TKe-avWluVzprpWWMlJKpON

Здесь нарушена композиция, нет якорей, не выделен главный элемент, дизайнер не продумал последовательность восприятия

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

Воздух

«Воздух» — это свободное пространство вокруг элементов. Сайт, где композиция разряжена, а вокруг объектов достаточно пустого места («воздуха»), выглядит спокойно и красиво. Минимализм решает. Вот пример:

L5uOtJ64-sMGI2NYPGouQ776C6-wgh3HWL1mzll_

Блоки текста и постеры фильмов окружены свободным пространством

Здесь свободного пространства ещё больше — и это оправдано:

Jg_PSQIRPQV-6ZstF4GqpOvyU99vzd9uPgC7sJkI

Такая страница легко читается — всего несколько информационных блоков, много «воздуха» и чётко обозначенные «якоря»

А вот типичная перегруженная страница:

meey_H9vDt48E-Mi0597YvINJxEvN6D54as8Z3qV

Картинки, кнопки обратного звонка и пункты меню лепятся друг к другу, рядом яркие рекламные блоки. Страница словно атакует нас, как только мы на неё зайдём. Поэтому второй раз заходить не хочется — трудно разобраться в такой мешанине.

Близость, внутреннее и внешнее

Объекты, расположенные близко друг к другу, воспринимаются связанно. Хороший дизайнер понимает, какие элементы поместить рядом, а какие разделить отступами. Простейший пример — взаимосвязь заголовка и текста:

s2E1WfWi-ebuF9t6Cg7GiwxifZzollQ6oIiPva4t

Здесь заголовок «Автопарк» относится к нижнему блоку. Но расстояние до нижнего блока (внутренний отступ) больше, чем до верхнего (внешний отступ). Надо было сделать наоборот.

Согласно теории близости внутренние отступы должны быть меньше внешних:

внут­рен­нее ≤ внеш­нее

Это относится ко всем элементам на странице. Посмотрите на главную страницу YouDo:

Yus9k7GQpnKgRp8KmFKdziQpCDR8gwHrOHeJZJb_

Она выглядит компактно и симпатично, потому что соблюдено правило внутреннего и внешнего. Отступы внутри каждого блока меньше, чем между блоками:

zyK2AB1zCGjB7416bl2XeUa74-fYta8SDQndfv5l

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

Выравнивание элементов

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

Композиция часто страдает от того, что элементы расположены в произвольном порядке. Здесь дизайнер неправильно поместил иконки:

xYFervoiQIhoI-Vcr9WI2xvsbT6LT5E24EDoT_wD

Нижний ряд словно перевёрнут относительно верхнего. В верхнем ряду надписи над иконками, в нижнем — под иконками. Такую мозаику сложно воспринимать

Гораздо лучше делать так:

YexaOGe8RxXybZ7N9MQItlgRZitwY45ON-m6JXtv

Правильные сочетания цветов

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

  • Жёлтый — позитивный, тёплый, солнечный цвет;
  • Красный — энергичный, лидерский;
  • Синий символизирует спокойствие и гармонию, свежесть и чистоту;
  • Зелёный успокаивает, создаёт ощущение открытости и безопасности.

В хорошем дизайне цвета и сочетания цветов подобраны так, чтобы вызвать нужное впечатление. Например, детский сайт ФК «Зенит» не случайно выполнен в жёлто-голубой гамме:

R8Xezp6ig6UWaCRs5Z4p40-hzNop3ulx_PVEPxy3

Сочетание голубого с жёлтым даёт ощущение силы, открытости, взаимоподдержки и стремления к победе — идеальное решение для детей

В дизайне есть теория цветового круга. Она объясняет, как создавать гармоничные комбинации цвета:

kaL8Ik_u5HHjgj72FfvpyzsMvvFD5kd6aVIOSIme

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

Типографика

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

Шрифт

Главное в шрифте — читабельность и эмоциональное впечатление.

Стандартные, широко распространённые шрифты обычно более читабельны, чем редкие и причудливые.

HMTe5kGCMty2IARCgTdtfiG7I36Omgku9tfJQUm5

В первом случае текст читается лучше, чем во втором. Это заслуга шрифта

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

Y7ap6bGIdXIiK9qvlCO3B4qZJXIXIzkyCCIvOgNe

Пример лёгкого плавного шрифта на сайте детского центра

Важно выбирать шрифт, который хорошо смотрится в разных размерах — и на больших, и на маленьких экранах.

В хорошем дизайне шрифты используются осмысленно и со вкусом. На одной странице — не более 1-2 шрифтов. Размеров шрифта — не более 3-4 (например, 18 pt для заголовка, 16 pt для подзаголовков и 12 pt для основного текста).

Кегль и межстрочный интервал

Кегль — это высота буквы. Если на странице больше одного шрифта — у всех должен быть примерно одинаковый кегль. Кегль лучше не делать слишком маленьким, чтобы читателю не пришлось вглядываться в крошечные буквы. Оптимальная величина — 14-18 pt, и точно не меньше 12 pt.

JwadWkztyr1cpd4pfhH8cZp93G854DpaDzA1T238

Простые шрифты средних размеров выглядят симпатично и читаются легко

Интервал между строками (интерлиньяж) должен быть больше высоты букв на 20-30%. Если интервал слишком маленький — строки сливаются, и текст превращается в «простынку». Если слишком большой — образуется слишком много лишнего пространства.

Длина строки и выравнивание текста

Оптимальная длина строки — не больше 700-1000 px. Это примерно 60-80 символов на строку (для мобильных устройств нужно ещё меньше — 30-40 символов).

4OyTHo-pSfkQu3vtYLtZXELMvFwh8FesLwUwRoDe

Текст длиной от края до края экрана трудно читать, легко потерять следующую строчку

Выравнивание в текстовых блоках следует делать только по левому краю. По ширине, центру и правому краю — неправильно, потому что хуже читается.

Выделение текста

Писать текст прописными буквами — плохая идея, потому что его читабельность сразу падает. Если в тексте надо выделить какое-то предложение — лучше написать строчными буквами и выделить полужирным.

Взгляните на пример плохой типографики:

zIU3b74402mDUxrfIwJ9hQPAZXPtA2W8mkw5PHny

Текст, написанный прописными буквами, сложнее читать

Контент

Контент — это содержимое сайта: фотографии, иллюстрации, видеоролики, текст. Некачественный контент может визуально испортить сайт, даже если дизайн в целом неплохой.

Реальные и стоковые фотографии

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

JoV2oBF73PoJlK3ncN4Ile1U87TOi73Hte0JnIg4

Это настоящие врачи, а не профессиональные модели

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

8MScCbVH3S49hnumbPzdsR8bVCPgoAsIrfL9lHMp

А это человек со стокового фото, которое висит на сотнях сайтов

Качественные и некачественные фотографии

Снимки для сайта должен делать фотограф на профессиональную камеру. Так выглядят реальные фото, на которые приятно смотреть:

GX3PirPIYsNxmtK9bFSfdQqxlQcgCbBFIhk9ZpON

Качественные фото фермерской продукции. Они настоящие, но при этом красивые

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

GBNRDGpFfW3CQ8DaSjcpPEc17-rx2PY1FdgI-o_M

Фотография размытая, тусклая, в низком разрешении

Дизайн — это удобство

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

+1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.