Tilda Education
Азбука дизайна: главные принципы и законы
Гид, после которого даже начинающий сможет сделать приличную картинку или веб-страницу
10 октября
18 минут
Из статьи вы узнаете, что такое:
Кому полезна статья
Всем, кто делает контент
Знание основных принципов упростит жизнь тем, кто создаёт любые визуальные штуки: креативы для соцсетей, иллюстрации в блог, обложки для статей, заставки для видео и так далее.
Начинающим дизайнерам
«Чтобы сделать крутой дизайн, можно нарушать правила» — возможно, вы слышали такую формулировку и уже хотите её применять. Но чтобы перестать следовать законам, для начала нужно научиться ими пользоваться.
Коллегам дизайнеров
База пригодится всем, кто работает с дизайнерами. Если вы оцениваете макет и влияете на финальный результат, лучше говорить с коллегой на одном языке.
Заказчикам
Если вы даёте техническое задание, оцениваете и принимаете результат, лучше руководствоваться общепринятыми правилами. «Что-то не то» — слишком абстрактная обратная связь.
Базовые элементы
Точка, линия и прямоугольник
Кажется, что дизайн — это сочетание множества разных элементов и объектов, креатив, художественное видение. На самом деле, он строится на трёх базовых элементах:
1
Точка — акцентный элемент, который сразу бросается в глаза. Например, красная кнопка «Купить». Даже если она квадратная или треугольная, она работает как яркая точка, потому что притягивает внимание.
2
Линия — направляющая. Например, меню в шапке сайта — это линия, вдоль которой выстроены пункты.
3
Прямоугольник — любой блок. Может быть заголовком и описанием, карточкой товара, разделом на странице и так далее.
Всё остальное — просто комбинации этих элементов.
Какие элементы будут в вашем дизайне?
Продумайте, что вам понадобится: фотографии, кнопки, тексты или что-то другое? Решите заранее, к какой базовой фигуре их можно привязать.
Любой дизайн можно разобрать на базовые элементы. Если периодически анализировать чужие работы и обращать внимание на то, из чего они построены, будет легче создать собственный дизайн.
Первое, что стоит сделать новичку перед началом работы — найти несколько понравившихся материалов и посмотреть, как в них используются линии, точки и прямоугольники. Удачные решения можно запомнить и применить в собственном проекте.
Вопросы для самопроверки:
Из каких элементов состоит этот дизайн? Сколько точек используется в каждом блоке? Не слишком ли их много?
Из каких элементов состоит этот дизайн? Сколько точек используется в каждом блоке? Не слишком ли их много?
Иерархия
В дизайне должно быть главное и второстепенное
Дизайнер не думает в рамках яркости и размера: «Какой элемент светлее? Какой больше? А какой ярче?» Он смотрит, насколько акцентный элемент на экране: привлекает ли он внимание или же теряется среди других.
Как выстроить визуальную иерархию на сайте
Подробный пошаговый гид
Если на макете все объекты одинаково важные или, наоборот, незаметные, то глазу не за что зацепиться. Такой дизайн не привлекает, не подталкивает совершить действие и не запоминается.
Так выглядят типичные вывески в провинциальном городе, где каждый элемент на плакате старается «перекричать» другой. В итоге всё сливается в одно большое пятно, где сложно разглядеть что-то конкретное.
Уже нарисовали точки, линии и прямоугольники?
Теперь продумайте, какие из этих элементов можно сделать меньше и светлее, а какие — больше и ярче.
Акцент можно сделать разными средствами: цветом, размером, формой. Самое важное, чтобы в вашем дизайне были главные и второстепенные объекты. Тогда появляется иерархия, при которой человек сначала считывает важные объекты и только потом — все остальные.
Это правило позволяет решить основную задачу — привлечь внимание к наиболее важным объектам.
Вопросы для самопроверки:
Какие элементы кажутся главными? Почему? Если никакие, то как показать, какие объекты самые важные?
Какие элементы кажутся главными? Почему? Если никакие, то как показать, какие объекты самые важные?
Теория близости
Объекты, которые расположены рядом, кажутся связанными
Правило работает даже в жизни. Например, если вывеска «Магазин» находится прямо над конкретной дверью, мы делаем вывод, что магазин находится именно за ней, а не за какой-то другой — более далеко находящейся дверью. То же происходит и с объектами дизайна.
На сайте alfabank.ru элементы внутри светло-серых карточек (кредитки, монеты, купюры) связаны, потому что расположены рядом. Из них получилось четыре композиции, которые находятся на достаточном расстоянии друг от друга, чтобы глаз человека сразу считал: здесь представлены четыре разных продукта. Сами карточки при этом — отдельная группа, которая отделена от крупного текста в верхней части экрана.
Сгруппируйте элементы
Решите, как из ваших объектов должны находиться близко, а какие — далеко друг от друга. Распределите их на смысловые группы.
Если расположить элементы хаотично, могут возникнуть ненужные ассоциации. Связанными будут казаться те объекты, которые на самом деле далеки друг от друга по смыслу и содержанию.
В «Ководстве» Артемий Лебедев приводит пример, когда надписи «круглосуточно» и «технический перерыв» склеились. Из-за этого возникла ложная связь между объектами: кажется, что банк не работает никогда.
Вопросы для самопроверки:
А точно ли я отделил расстоянием то, что хотел? Не возникли ли ложные связи между объектами?
А точно ли я отделил расстоянием то, что хотел? Не возникли ли ложные связи между объектами?
Якорные объекты
Важные элементы должны располагаться там, где их заметят
Якорные объекты — самые заметные на экране: иллюстрация, заголовок, логотип. Они должны располагаться в одном из углов или в визуальном центре. Так композиция будет выглядеть сбалансированной, а объекты не будут «висеть в воздухе».
Расставьте элементы
Наконец, пришло время найти место для каждого объекта. Разместите каждую смысловую группу в один из углов.
Правило якорных объектов поможет побороть страх чистого листа, когда дизайнер не понимает, как располагать объекты на экране. Например, если вы делаете стандартную карточку для соцсетей, то очень удобно раскидать элементы по углам. Так вы сразу соберёте крепкую композицию, которую потом можно докручивать.
- Илья Поликарповавтор статьиВы можете зайти на любимые сайты и самостоятельно проверить, как используется правило якорных объектов. Вы точно заметите, что страницу можно визуально разделить на прямоугольники, а в центре или по углам этих фигур обязательно будут расположены важные элементы.
Вопросы для самопроверки:
По какому правилу расставлены объекты? А если попробую не соблюсти правило якорных объектов, что получится?
По какому правилу расставлены объекты? А если попробую не соблюсти правило якорных объектов, что получится?
Z- и F-паттерны
Люди сканируют, а не читают целиком
Человек читает слева направо и сверху вниз. Это правило работает и для сайтов. Пользователи не читают всю информацию, а сканируют: смотрят на выделяющиеся объекты и вычленяют важное.
F-паттерн — это горизонтальный просмотр информации на странице. Сначала пользователь слева направо просматривает верхнюю область, затем спускается ниже и так же сканирует середину, а в завершении — левую нижнюю часть.
В дизайне на F-паттерн ориентируются, когда создают экраны, где пользователь будет последовательно и спокойно изучать информацию.
На сайте rutube.ru информация подана линейно по F-паттерну, чтобы пользователь читал спокойно слева направо и так шёл вниз.
На сайте mvideo.ru предполагается, что пользователь будет смотреть по F-паттерну: слева направо и сверху вниз.
Передвиньте важное туда, где люди это заметят
В каждой смысловой группе есть самый главный элемент. Его лучше поставить туда, куда люди смотрят в первую очередь.
Z-паттерн — диагональный просмотр информации. Сначала пользователь смотрит слева направо, затем смещает взгляд по диагонали налево и вниз, а в заключении — в правую нижнюю часть.
Подходит для более динамичной композиции, когда информации на странице немного. Позволяет правильно управлять вниманием пользователя.
На сайте samolet.ru все важные кнопки расположили по Z-паттерну.
Вопросы для самопроверки:
На какие объекты я обращаю внимание? Как они расположены? Какой паттерн используется на странице?
На какие объекты я обращаю внимание? Как они расположены? Какой паттерн используется на странице?
Модульность
Все элементы должны встать в прямоугольники
Группы объектов визуально образуют прямоугольники — модули. А они, в свою очередь, заполняют экран, обложку, карточку для соцсетей — тоже прямоугольники. Дизайн в этом случае выглядит гармонично и аккуратно.
Чтобы было легче понять это правило, можно посмотреть примеры сайтов в бенто-стиле. За счёт него дизайнеры облегчили себе задачу: они рисуют прямоугольники наглядно, не скрывая их. А уже сверху накладывают тексты, картинки и другие элементы.
Каждая группа элементов — прямоугольник
Когда объекты уже примерно расставлены по углам и паттернам чтения, нужно окончательно выровнять их расположение. Для этого представьте, что вокруг каждой смысловой группы нарисован прямоугольник. Расположите элементы по его границам.
Вопросы для самопроверки:
Состоит ли мой дизайн из одинаковых прямоугольников? Если нет, что этому мешает?
Состоит ли мой дизайн из одинаковых прямоугольников? Если нет, что этому мешает?
Пустое пространство
Вокруг объектов лучше делать отступы
Пустое пространство (негативное, белое, контрпространство, воздух) — свободное место вокруг объекта, которое позволяет акцентировать на нём внимание. Если правильно его использовать, оно поможет выделить главное и логично расставить объекты на экране.
Большое количество пустого пространства — один из признаков минималистичного стиля. Можно сказать, что на этом приёме и строится такой дизайн.
Компания Apple давно задала тренд на постоянное использование пустого пространства. Страница Apple Watch — канонический пример.
Проверьте, остался ли в вашем дизайне воздух
Если его совсем нет, попробуйте уменьшить элементы. Если пустого пространства слишком много, подумайте, какие ассоциации вызывает такой дизайн и подходят ли они под вашу задачу.
Белое пространство позволяет делать стильный дизайн даже при небольшом количестве контента. Например, так можно акцентировать внимание на важном объекте и рассмотреть его досконально без лишнего «визуального шума».
В некоторых блоках на сайте mercedes-benz.com элементы занимают 10–20% экрана, а всё остальное — контрпространство, которое акцентирует внимание на контенте.
- Илья Поликарповавтор статьиИспользование воздуха — приём, которым надо уметь пользоваться. Часто начинающие дизайнеры видят сайты в минималистичном стиле и начинают повторять. Они располагают несколько объектов на экране, а всю остальную область оставляют пустой. Представляете себе много пустого пространства на сайте маркетплейса или магазина одежды?
Воздух нужен только там, где это действительно уместно. Например, на лендинге известного бренда, у которого всего один продукт: про компанию все давно знают, а текста о товаре не так много.
Вопросы для самопроверки:
А точно ли этот приём подходит для сферы? Какую роль здесь играет пустое пространство, на чём я акцентирую внимание?
А точно ли этот приём подходит для сферы? Какую роль здесь играет пустое пространство, на чём я акцентирую внимание?
Цветовая палитра
Основа стиля — правильно подобранная палитра
Цвет формирует ассоциации с брендом. Компании с помощью фирменных цветов могут сразу сказать: «Эта реклама моя». И вам даже не надо читать текст на баннере.
Например, если вы видите сочетание синего и ярко-розового, то сразу понимаете: это, скорее всего, Озон. А если зелёный с фиолетовым, то Мегафон.
Ура, переходим к цвету!
Выберите подходящие под вашу задачу цвета. Раскрасьте элементы. Теперь подумайте, нужен ли цвет фону или его можно оставить белым.
Если вы делаете проект с нуля, то фирменный стиль ещё не сформирован. Значит, вам предстоит самостоятельно подобрать подходящие цвета, а в дальнейшем их переиспользовать. Если вы начинающий дизайнер, то лучше воспользоваться проверенными сервисами:
1
Таблица «безопасных» цветов на сайте студии Лебедева. Здесь вы можете найти «чистые» оттенки, которые не будут «загрязнять» макет.
2
Adobe Color — можно найти готовые цветовые палитры или даже создать собственные.
3
Tilda Colors — заранее подготовленные оттенки для использования в дизайне, а также хорошие сочетания цветов для градиентов.
С оттенками надо научиться работать: правильно их выбирать и сочетать. Поэтому, если палитра не принципиальна, не используйте сразу большое количество оттенков. Лучше ограничитесь одним основным и одним акцентным цветом, чтобы не получилась неразбериха.
Вопросы для самопроверки:
Есть ли у компании, для которой я делаю проект, фирменные цвета? Какие палитры характерны для стиля, в котором я работаю? Сочетаются ли оттенки, которые я использую?
Есть ли у компании, для которой я делаю проект, фирменные цвета? Какие палитры характерны для стиля, в котором я работаю? Сочетаются ли оттенки, которые я использую?
Последовательность
Общие правила следует переиспользовать
Последовательность — правило, которое часто нарушается дизайнерами. Например, на одной и той же странице сайта используются сильно отличающиеся друг от друга скругления кнопок и картинок. Или в одном блоке ссылка подчёркнута, а в другом — нет. Из-за таких мелочей в итоге появляется ощущение общей неряшливости макета. Это портит общее впечатление о бренде.
Проверьте детали
Используйте один размер для основного текста и другой — для заголовков. Не стоит делать слишком много разных размеров.
Проверьте, что у фигур одинаковые углы: либо скруглённые, либо острые. Между ними также должны быть одинаковые расстояния.
Проверьте, что у фигур одинаковые углы: либо скруглённые, либо острые. Между ними также должны быть одинаковые расстояния.
Если вы откроете сайт с хорошим дизайном и начнёте анализировать отступы, виды кнопок, картинки, расположение — увидите, что у всего есть определённая закономерность. Она и позволяет макетам и изображениям выглядеть цельно.
Последовательность — чёткий маркер, по которому можно оценить дизайн. Например, если в одном блоке заголовок 56 пикселей, в другом — 54, а в третьем — 52, макет точно будет выглядеть «как-то не так». В таком дизайне нет системы и правил.
Вопросы для самопроверки:
Почему дизайн мне кажется последовательным, какие правила есть в макете? А не использую ли я на одной странице одновременно разные стили для одинаковых элементов? Почему мой дизайн «разваливается», и как я могу его спасти с помощью последовательности?
Почему дизайн мне кажется последовательным, какие правила есть в макете? А не использую ли я на одной странице одновременно разные стили для одинаковых элементов? Почему мой дизайн «разваливается», и как я могу его спасти с помощью последовательности?
Закон Фиттса
Чем больше и ближе цель, тем легче в неё попасть
Кажется, что здесь всё просто. Но как на самом деле применять правило в дизайне? Какие цели? Куда попадать?
Цель — объект на экране компьютера, в который надо попасть курсором. Например, лучше использовать кнопку, которая состоит из текста и иконки, а не только из иконки. Тогда она станет крупнее, а значит, на неё будет проще нажать.
На сайте sberbank.ru кнопка открытия меню состоит из текста и трёх полосок (иконки-гамбургера). Благодаря этому пользователю легче попасть в цель. Кнопка поиска же оформлена без текста. Из-за этого пространства для клика значительно меньше.
Осталось только отполировать!
Если в вашем дизайне есть элементы, на которые можно кликнуть, проверьте, что пользователю будет легко это сделать.
Канонический пример крутого проявления закона Фиттса — бесконечная область нажатия кнопки. Это термин, которым называют область вокруг кнопки, которая тоже ведёт на нужную страницу, хотя и выглядит всего лишь как фон.
Например, когда меню находится в одном из углов экрана. В этом случае достаточно поднести мышку к краю и кликнуть. Не обязательно нажимать прицельно на иконку — можно просто где-то рядом.
На Mac OS достаточно подвинуть мышь в левый верхний угол — не обязательно целиться курсором в яблоко.
Вопросы для самопроверки:
А точно ли все кликабельные объекты на экране заметны? Удобно ли на них нажимать? Могу ли я сделать область нажатия больше?
А точно ли все кликабельные объекты на экране заметны? Удобно ли на них нажимать? Могу ли я сделать область нажатия больше?
Дизайн всё ещё кажется неполноценным?
Когда вы научились основам, можно выбрать стиль для своей работы. Мы собрали целую подборку, а ещё примеры и рекомендации, как достичь классного результата.
Коротко: 10 основных принципов дизайна
Базовые элементы
Любой дизайн состоит из трёх основных элементов. Их можно увидеть в каждом проекте: от большого сайта до простой обложки.
Иерархия
Для того чтобы элементы дизайна воспринимались правильно, нужно расставить акценты. Большие и яркие объекты привлекают внимание первыми.
Теория близости
Объекты, находящиеся рядом, воспринимаются как связанные. Правило помогает избежать визуальной путаницы: структурировать контент и логично его разместить.
Якорные объекты
Ключевые элементы размещают по углам или в центре. Это помогает дизайнерам справиться со страхом чистого листа, а пользователям — сразу увидеть важные части.
Пустое пространство
Чтобы всё не смешалось в кучу, важно оставлять свободное место вокруг элементов. Но в одних случаях его нужно много, а в других — совсем чуть-чуть.
Цветовая палитра
Важно выбрать палитру цветов и придерживаться её. Начинающему дизайнеру лучше использовать два-три оттенка, чтобы не запутаться.
Читайте также:
Бесплатный онлайн курс, который научит создавать эффективные посадочные страницы
Курс, который научит вас продвигать свой сайт
Теоретический курс Никиты Обухова по веб-дизайну
Бесплатный учебник по веб-анимации с примерами и правилами использования
