Визуальная грамотность

Принципы дизайна

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

9 принципов

5 минут чтения

Без теории ради теории

Основы композиции

Девять принципов

Каждая карточка — один принцип: что он значит и какими инструментами достигается. Вместе они складываются в язык, на котором обсуждают макет.

01

Баланс

Визуальная устойчивость и равновесие макета: вес элементов распределён так, что композиция не заваливается на один край.

Симметрия · Асимметрия · Визуальный вес

02

Контраст

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

Цвет · Размер · Форма · Шрифт

03

Выравнивание

Порядок и связь между элементами: ничего не стоит случайно — всё привязано к общим направляющим.

Сетка · Поля · Направляющие

04

Повторение

Последовательность и ритм: повторяющиеся формы, цвета и отступы связывают страницы в один узнаваемый стиль.

Паттерн · Ритм · Консистентность

05

Близость

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

Группировка · Отступы · Структура

06

Акцент

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

Размер · Цвет · Изоляция

07

Воздух

Негативное пространство ради ясности и фокуса: пустота вокруг элемента — тоже часть композиции.

Белое пространство · Дыхание макета · Чистота

08

Иерархия

Важность передаётся масштабом, насыщенностью и цветом: читатель сразу понимает, с чего начинать.

Масштаб · Насыщенность · Цвет

09

Движение

Поток и направление для взгляда зрителя: композиция ведёт от главного к деталям по заданному маршруту.

Линии · Действие · Ритм

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

Принцип 01 из 09

Баланс

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

Чего не рассказывают

Баланс — это не симметрия. Симметрия — самый простой случай. Настоящая работа начинается там, где элементы разные, а равновесие всё равно есть.

Вес — не только размер

Тяжелее элемент делают цвет, плотность, текстура и положение относительно центра. Маленькое красное пятно перевешивает большой серый блок.

Типичная ошибка

Считать баланс геометрией: двигать блоки по линейке, не глядя на цвет и плотность.

Симметрия · Асимметрия · Радиальный · Визуальный вес

Принцип 02 из 09

Контраст

Различие, которое делает элементы различимыми — и сразу расставляет приоритеты.

Чего не рассказывают

Контраст не украшает, а создаёт иерархию сам по себе: взгляд идёт к самому непохожему, объяснять ему ничего не нужно.

Пять осей

Размер, цвет, начертание, форма, текстура. Сильная работа обычно использует несколько сразу, а не одну.

Типичная ошибка

Контраст по одной оси и ноль по другой: заголовок вдвое крупнее текста, но того же цвета и веса. Возникает напряжение без ясности — «что-то не так, а что — непонятно».

Размер · Цвет · Шрифт · Форма · Текстура

Принцип 03 из 09

Выравнивание

Невидимая структура: каждый элемент связан с каким-то другим, ничто не висит само по себе.

Чего не рассказывают

Выравнивание не замечают, пока оно есть. Смещение в несколько пикселей никто не назовёт словами, но макет уже читается как неаккуратный.

Правило связи

У каждого элемента должна быть визуальная связь хотя бы с одним соседом: общий край, общая ось, общая линия.

Типичная ошибка

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

Сетка · Поля · Направляющие · Оптика

Принцип 04 из 09

Повторение

Повторяющиеся решения превращают набор отдельных экранов в систему.

Чего не рассказывают

Кроме узнаваемости повторение даёт ритм: одинаковые интервалы читаются как визуальный такт, и структуру видно раньше, чем прочитан текст.

Что повторять

Небольшой набор решений: цвета, шрифтовые пары, радиусы, стиль иконок, шаг отступов. И держаться его.

Типичная ошибка

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

Паттерн · Ритм · Консистентность

Принцип 05 из 09

Близость

Расстояние сообщает связь: что рядом — то вместе, что далеко — то про разное.

Чего не рассказывают

Самый недооценённый принцип. Он снимает работу с читателя: группы понятны без рамок, линий и пояснений.

Типичная ошибка

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

Проверка

Посмотрите на макет, не читая: сколько групп вы видите — столько смыслов и получил зритель.

Группировка · Отступы · Когнитивная нагрузка

Принцип 06 из 09

Акцент

В композиции побеждает что-то одно. Не два и не три.

Тест прищуром

Сощурьтесь и посмотрите на макет. Что осталось читаемым — то и есть акцент. Если конкурируют несколько элементов, акцента нет — есть шум.

Чем строится

Масштабом, контрастом, изоляцией и цветом. «Сделать крупнее» — только один из четырёх инструментов, и не самый сильный.

Типичная ошибка

Выделить всё. Когда жирным набрано всё, жирным не набрано ничто.

Масштаб · Контраст · Изоляция · Цвет

Принцип 07 из 09

Воздух

Пустое место — не «ничего». Это полноценный элемент композиции.

Делает три вещи сразу

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

Скрытый инструмент

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

Типичная ошибка

Заполнять каждый свободный угол, потому что «пусто — значит недоделано».

Негативное пространство · Поля · Фокус

Принцип 08 из 09

Иерархия

Порядок чтения: что смотрят первым, что вторым, что остаётся на потом.

Три вопроса без слов

Что здесь главное? Что дальше? Что просто поддерживает? Хорошая иерархия отвечает на них раньше, чем зритель начал читать.

Работает хором

Размер, вес, цвет, позиция и воздух должны говорить одно и то же. Если они спорят, порядок чтения ломается.

Типичная ошибка

Визуально главное ≠ главное по смыслу: картинка-герой перебивает заголовок, декоративный блок перетягивает внимание с кнопки.

Размер · Вес · Цвет · Позиция · Воздух

Принцип 09 из 09

Движение

Маршрут, по которому идёт взгляд. Речь не про анимацию.

Чем ведут взгляд

Линиями, повторами и градациями: ряд элементов работает как дорожка, диагональ задаёт направление, уменьшающиеся объекты тянут от большого к малому.

Зачем

Композиция должна доводить до конца — от первого акцента к пояснению и к действию.

Типичная ошибка

Макет без маршрута: глазу одинаково интересно везде, поэтому он не задерживается нигде.

Линии · Направление · Ритм · Градации

Как натренировать глаз

Работающие принципы невидимы. Видно только нарушение.

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

  1. 1Найдите макет, который вам не нравится.
  2. 2Назовите словами, что именно сломано: сетка, группы, контраст, акцент.
  3. 3Почините мысленно — одним движением, а не пятью.

Перед тем как сдать макет

Пять вопросов

Быстрая проверка своими глазами: пройтись по списку занимает минуту, а ловит большую часть того, что потом назовут «что-то не так».

01

Прищурьтесь. Остаётся ровно один акцент?

Если конкурируют два — зритель выберет случайный.

02

К чему привязан каждый элемент?

Если ни к чему — он выглядит забытым, а не свободным.

03

Сколько групп видно, если не читать?

Столько смыслов и получил зритель. Совпадает с задуманным?

04

Куда взгляд идёт первым и куда вторым?

Этот маршрут вы построили — или он получился сам?

05

Что будет, если убрать половину декора?

Обычно — станет лучше. Это и есть проверка на воздух.

→

Ни один вопрос не про красоту.

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

Частый вопрос

Элементы и принципы

Элементы — материал

То, из чего собран макет, — сырьё, которое можно перечислить.

ЛинияФормаЦветТекстураПространствоОбъёмТон

Существительные

Принципы — организация

Как этот материал расставлен: что рядом с чем, что крупнее, что первым, куда идёт взгляд.

БалансКонтрастВыравниваниеПовторениеБлизостьАкцентВоздухИерархияДвижение

Глаголы

А если выбирать один главный принцип — это иерархия: она задаёт порядок чтения, а все остальные на неё работают.

Где это в работе

Веб и интерфейсы

В продуктовом дизайне принципы перестают быть теорией и превращаются в конкретные решения — вот самые частые.

Близость

Группирует поля формы и пункты меню.

Половина «непонятных» форм чинится отступами, а не текстом.

Иерархия

Ведёт к целевому действию.

Одна главная кнопка на экран — остальное тише.

Контраст

Это читаемость, а не украшение.

И требование доступности: WCAG задаёт минимум по контрасту текста.

Выравнивание

Даёт ощущение, что интерфейсу можно доверять.

Кривая сетка читается как небрежность продукта в целом.

Повторение

Превращает экраны в систему.

Компоненты — это повторение, оформленное в правила.

Воздух

Снижает нагрузку на внимание.

Плотный экран утомляет быстрее, чем длинный.

Итог

Вопрос не «красиво ли». Вопрос — почему это работает.

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

Девять принципов

Тест прищуром

Пять вопросов перед сдачей

Продолжение разбора · 12 слайдов

Четыре архетипа лендинга

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

Разбор для эфира

Сюжет
страницы

Один рассказ на всю страницу: кто здесь продукт и почему экраны идут именно в этом порядке.

4 архетипа

выбор до первой секции

что снимать

Продолжение разбора «Принципы дизайна»

С чего начнём

Без сюжета каждая секция решается заново —
и выходит несколько начал подряд вместо истории.

Ощущение знакомое: блоки по отдельности аккуратные, а вместе страница не читается. Это не вопрос вёрстки и не вопрос вкуса — просто никто не решил заранее, про что эта страница.

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

Карта эфира

Кто здесь продукт

Архетип 1 из 4

Сюжет страницы

Герой

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

Первый экран

Лицо и прямая речь. Не «мы на рынке двенадцать лет», а «вы хотите вот этого, но мешает вот это». Читатель должен узнать себя в первом же экране.

Как идут экраны

По пути героя: проблема → что меняется → как проходит работа → результат → кто ведёт. Порядок биографический, его нельзя тасовать: нельзя показать результат до того, как названа проблема.

Типичная ошибка

Перепутать, кто герой. Как только портрет на первом экране становится портретом команды, путь обрывается, и страница превращается в рассказ о себе.

Услуги · Курсы · Эксперты · Нужны свои фотографии людей

Архетип 2 из 4

Сюжет страницы

Локация

Продукт — место или мир вокруг него. Первый экран — место целиком, во весь экран; дальше камера подходит ближе.

Первый экран

Общий план и минимум текста поверх кадра. Задача первого экрана — дать ощущение «я там был», а не перечислить услуги.

Как идут экраны

Камера идёт внутрь: мир → комната → вещь в руках. Каждый следующий кадр крупнее предыдущего — и это даёт ощущение движения без единой анимации.

Типичная ошибка

Сбить масштаб: после общего плана поставить ещё один общий. Зритель перестаёт чувствовать приближение, и страница встаёт на месте.

Бренды · Товары · Пространства · Нужны фотографии места

Архетип 3 из 4

Сюжет страницы

Момент

Продукт — действие. Один яркий стоп-кадр с предложением, а вокруг него — нарочно спокойные экраны.

Первый экран

Пик движения: прыжок, старт, замах. Один кадр, пойманный в верхней точке, и прямо на нём — предложение.

Как идут экраны

Контрастом. После стоп-кадра — тишина: расписание, цены, условия, набранные ровно и скучно. Сильный кадр работает ровно потому, что он один.

Типичная ошибка

Сделать «ярко» всю страницу. Пять динамичных кадров подряд гасят друг друга, и ни один не читается как главный.

Спорт · События · Авто · Нужен один сильный кадр

Архетип 4 из 4

Сюжет страницы

Детали

Продукт — сложная вещь. Первый экран плотный: схема, цифры, устройство. А дальше — резко просто.

Первый экран

Тот редкий случай, когда можно и нужно перегрузить: разрез, схема, характеристики. Такой читатель пришёл разбираться, и плотность читается как компетентность.

Как идут экраны

После плотного первого — сброс: один экран — одна мысль. Перепад плотности и есть ритм такой страницы.

Типичная ошибка

Держать плотность до конца. К третьему экрану внимание кончается, и дальше не читают даже то, ради чего пришли.

B2B · Медицина · Финансы · Нужны схемы и цифры

Зачем он нужен на практике

Шесть решений

01

Что стоит на первом экране

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

02

В каком порядке идут секции

Порядок задан рассказом, а не тем, какой блок первым пришёл в голову.

03

Какой крупности нужны кадры

Общий, средний, крупный — это уже готовое ТЗ фотографу.

04

Что вообще надо снять

Герою нужны люди, локации — место. Без своих съёмок архетип не работает.

05

Чего на странице не будет

Самое полезное: сюжет даёт право выкинуть блок, который «вроде нужен».

→

Ни одно решение не про красоту.

Все шесть — про то, складывается ли из экранов одна история.

Где это ломается

Сюжет чаще всего ломают тремя способами.

  1. 1Два сюжета в одной странице: первый экран про место, второй про человека, третий про схемы.
  2. 2Сюжет выбран после вёрстки — тогда это не сюжет, а объяснение задним числом.
  3. 3Сюжет выбран без съёмки: герой без своих фотографий людей превращается в сток.

Проверка на пальцах: закройте текст и пролистайте страницу по картинкам. Если по одним кадрам видно, что это за рассказ и куда он идёт — сюжет есть.

Как это выглядит в работе

Пример: интерьеры

Задача

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

Своя съёмка объектовНет лицДолгий выбор

Что есть на входе

Сюжет: локация

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

Общий планКомнатаФактураЧертёж

Камера подходит ближе

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

Частый вопрос

Сюжет и принципы

Внутри экрана — принципы

Что главное в этом кадре, что рядом с чем, куда идёт взгляд за первые две секунды.

БалансКонтрастБлизостьАкцентИерархия

Масштаб — один экран

Между экранами — сюжет

Что главное на всей странице, какой экран за каким и куда идёт читатель за первую минуту.

ГеройЛокацияМоментДетали

Масштаб — вся страница

Работа одна и та же — назначить главного и выстроить порядок чтения. Разный только масштаб: кадр или страница.

Итог

Страница — не набор секций.
Это один рассказ.

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

Спасибо, что смотрели

Вопросы — в чат

Продолжение разбора «Принципы дизайна»: там — девять принципов внутри экрана, здесь — рассказ между экранами.

01 / 12
01 / 12

С телефона слайды мелкие: разверните во весь экран и поверните телефон горизонтально.

Разбор собран по материалам статьи Elsie Rainee «Principles of Design» в Muzli: девять принципов, формулировки и иллюстрации — мои.

Наверх
Made on
Tilda