Четыре принципа дизайна

Тема первой лекции — четыре принципа дизайна. У вас бывало такое, что вот вам дали информаци, вы её собрали на макете, но что-то явно не так и вы не можете понять что именно. Избавиться от такого чувства вам помогут четыре принципа дизайна.

Мы как дизайнеры в первую очередь работаем с глазами человека, зрителя. С его взглядом. Нам важно уметь направлять взгляд зрителя и не напрягать зрение.

К примеру, перед нам визитками с каким-то текстом. Мы догадываемся, что по центру название компании, а по бокам его контактные данные. Но наш взгляд бегает по визитке, чтобы это понять. Мы можем облегчить восприятие.

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

Всего у нас четыре принципа: приближенность, выравнивание, повтор, контраст.

Первый принцип

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

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

Второй принцип

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

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

Третий принцип

— повтор. Перед нами эмблемы четырёх факультетов Хогвартса. Поскольку факультеты равносильны, то и их эмблемы похожи. Мы видим, что везде по центру изображается животное — символ факультета. Снизу на ленте написано название, сверху шлем, а по бокам листья. Таким образом, мы понимаем, что эти четыре факультета это часть чего-то одного, что-то их объединяет.

Например, мы повторяем подзаголовки в меню. Это позволяет нам ориентироваться среди этой информации проще и быстрее

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

Четвёртый принцип

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

Хороший пример — это формы call-to-action. Её задача, чтобы вы оставили свои данные и нажали «Подписаться». Следовательно, эта главная функция, главное действие выделяется при помощи контраста цвета.

Пример

И того у нас четыре принципа. Приближенность, повтор, контраст, выравнивание. Повторим их на примере. Возьмём известный мультсериал Закусочная Баба и попробуем заверстать их меню.

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

Далее мы разделим меню на несколько групп. Добавляем девайдеры.

Используем принцип повтора. Слева название блюд, справа их цена.

И контраст. Логотип делаем больше. Текст поменьше. Название — чёрными, цены — серыми.

До и после. Меню стало опрятнее, его стало легче читать.

И ещё раз. Выравнивание, приближенность, повтор, контраст.