Для начала определимся, что такое вкус, он же — чувство прекрасного.
Вкус — это умение визуально различать хорошее и плохое в продукте по объективным признакам. Чтобы отличить красочный фильм от невзрачного, красивую картину от посредственной, нужно развивать насмотренность.
Хороший вкус в работе дизайнера — одно из главных требований. Сегодня поговорим о том как его развить конкретно в UI-дизайне.
Калибруем вкус
Визуальный вкус состоит из насмотренности и практики. Если представить развитие дизайнера как шкалу, то только 40% на ней будет занимать насмотренность, а 60% — практика. Все потому что важно не только развивать «уровень нормы», но и применять его. Просто сидеть на Behance и смотреть на других — недостаточно. Важно научиться анализировать выбор цветов, композиции и других аспектов. А потом попробовать применить полученные знания в работе.
Составляющие хорошего дизайна
Любой продукт творчества состоит из частей, которые образуют единое целое. Музыка состоит из нот, тональности и ритма. Картина — из композиции, светотени, красок, сюжета.
Классный дизайн тоже складывается по кирпичикам. Если один из них «запороть», то ваша работа станет в разы слабее.
Вот эти кирпичики UI-дизайна:
- Композиция
- Аккуратность
- Типографика
- Работа с цветом
- Работа с вижуалами
- Работа с текстом
Поговорим о каждом.
Композиция
Сравните дизайн справа и слева. Какой, на ваш взгляд, лучше воспринимается?
Слева есть четкая структура и все расположено аккуратно. Справа же все хаотично — так делать не надо, ведь мозг любит системность. Дизайн должен быть упорядоченным.
Однако системность — не значит монотонность. Гармоничному макету требуется разнообразие — чередование повторяющихся блоков. Потому что продукт, состоящий из одинаковых композиционных блоков, воспринимается скучно и слишком статично. Стоит добавить немного динамики — и все сразу становится интереснее и естественнее. Так же как системность, мозг еще любит смену обстановки. Здесь важно найти баланс.
Рассмотрим пример выше. Какой вариант хочется рассматривать больше? Макет справа воспринимается более легким и приятным. Все потому что мозг не любит композиционные «панельки».
Погрузимся в дизайн глубже. Существуют гештальт-принципы, которые объясняют как наш мозг обрабатывает визуальные стимулы. Вот они:
Принцип близости
Объекты, которые расположены рядом, объединяются в одно целое, а те, что разделены расстоянием, стоят обособленно. С помощью близости мы можем группировать объекты. На примере видно, как обособляются объекты фиолетового цвета за счет расстояния.
Принцип подобия
Похожие элементы человек воспринимает как принадлежащие одной группе. Так мы можем группировать объекты, в зависимости от их связей с другими членами группы. На этот процесс могут влиять характеристики: цвет, размер, форма и ориентация.
Принцип соотношения фигуры и фона
Все в вашем дизайне будет рассматриваться как фигура или фон. Если изменить первое, то поменяется и второе. Еще фигура и фон могут преувеличивать или преуменьшать друг друга, так они взаимно дополняются.
На примере видно, как равномерно размещенные черные линии создают серое поле. При этом фигура и фон находятся в устойчивом соотношении. На второй картинке пространства нет — фигура доминирует. На третьем примере устранены две черные линии. За счет этого пространство стало активным.
После гештальт-принципов важно обсудить еще один аспект — контраст!
Контраст величин, цвета и состояний
Контраст делает композицию более выразительной. Самый наглядный пример — это черный и белый цвет, крупный текст и мелкий. Такие сочетания всегда удачны.
Чем больше элемент, тем больше внимание к нему. Если хотите, чтобы на элемент сразу обратили внимание, сделайте его большим на макете, Так вы зададите иерархию.
Можно ли обойтись без контрастов? Только если хотите получить безжизненную скучную композицию.
Не забывайте оставлять в композиции «воздух». Это негативное или пустое пространство между элементами. Оно помогает разделять объекты друг от друга и акцентирует внимание на главном. Без воздуха контент будет скученным и тяжелым, такое нелегко воспринимать. Взгляните на баннер сайта re:Store. Вокруг часов очень много негативного пространства. За счет этого мы сразу обращаем внимание на продукт, а баннер воспринимается легким и минималистичным.
Сетки
На этапе проектирования дизайна важно обращаться к сеткам.
Они нужны для выравнивания элементов дизайна. Дизайнеры основывают свою работу на сетке, а потом слой с ней отключают. Получается макет с правильными отступами и расстояниями. Такой прием связывает объекты в общую систему, задает выравнивание и логично поддерживает композицию.
Колоночные сетки собирают контент в равномерные вертикальные столбцы с интервалами. Обычно используют 12 столбцов, чтобы разделить область на 1/2, 1/3, 1/4, 1/6. Это один из самых удобных и распространенных видов сеток.
Модульные сетки похожи на школьную тетрадь. Они состоят из пересекающихся прямых, которые образуют модули. Они идеальны для строгих макетов.
Золотое сечение
Его используют не только в искусстве, но и в дизайне. Золотое сечение применяется в макетах, чтобы сбалансировать контент. Визуально она выглядит как дугообразная линия, закручивающаяся по спирали. Спираль можно использовать для распределения объектов на плоскости. В центр обычно ставят самые важные детали.
Как видите, сетки могут быть разными, но принцип один: все должно быть упорядочено.
Как прокачать навыки композиции:
- Используйте сетку, пробуйте разные виды.
- Изучите гештальт-принципы.
- Держитесь ритмичного дизайна, где разнообразие чередуется с монотонностью.
- Используйте контраст и не забывайте про воздух на макетах;
- Ведите дневник наблюдений: делайте скрины интересных механик и приемов на сайтах.
Аккуратность
Аккуратность — это 30% вашего успеха. Она придает продукту законченный вид и организовывает пространство.
Какой дизайн лучше?
Здесь еще раз обратимся к принципу близости. Абзацы слева композиционно составляют единое целое и смотрятся гармоничнее. Когда нет системы отступов и все элементы расположены как попало, нет единства.
Также важен принцип выравнивания. Согласно ему, ничто не должно располагаться на странице произвольно. Каждый элемент должен иметь визуальную связь с чем-то другим на странице и быть выровненным относительно него.
Как сделать макеты аккуратнее?
- Изучите правило близости.
- При расчете отступов выберите значение, которому будут кратны все остальные.
- Придерживайтесь единого выравнивания.
Сегодня мы рассказали только о двух составляющих хорошего дизайна. В следующих раз расскажем об остальных.
Если статья была вам полезна, ставьте стрелочку вверх.
Больше статей о UX/UI-дизайне вы можете найти в нашем сообществе Вконтакте