Вкратце пробежимся по основным принципам, которые используются в digital-дизайне и также бегло взглянем на парочку необязательных (но о которых важно знать).
Основные:
- Контекст
- Масштаб, пропорции, пространство и композиция
- Типографика
- Цвет
- Визуальная иерархия (формируется из трех предыдущих)
- Гештальт-принципы
- Доступность (accessibility) и инклюзивный дизайн
В дополнение (*):
- Правило золотого сечения *
- Геймификация *
* - необязательные правила/принципы, но о них полезно знать - могут пригодиться
Ниже рассмотрим каждое правило/принцип отдельно; в конце каждого блока я разместил ссылки на статьи/видео/книги с раскрывающей подробности информацией. Настоятельно рекомендую всё это изучить.
Контекст
Я решил начать с этого правила, потому что про него часто забывают, особенно новички. И это очень плохо, ведь контекст может менять смысл и восприятие одних и тех же элементов в разных ситуациях.
Контекст - это все факторы, которые окружают продукт/сервис, включая его целевую аудиторию, конкурентов, место использования и т.д.
Для наглядности рассмотрим самые очевидные примеры:
Хорошим примером использования контекста в дизайне является дизайн интерфейсов. При создании интерфейса дизайнер должен учитывать контекст использования - это могут быть смартфоны, настольные компьютеры и т.д. В зависимости от контекста использования необходимо выбирать разные элементы дизайна.
Еще один пример - это дизайн упаковки. Мы должны учитывать контекст использования продукта. В зависимости от контекста, необходимо выбирать разные материалы, формы и цвета упаковки.
Пример культурного контекста: Мы должны учитывать культурный контекст, чтобы создавать продукты, которые будут понятны и удобны для пользователей из разных стран и культур. Например, цвета могут иметь разное значение в разных культурах, поэтому необходимо выбирать цвета, которые не вызовут недопонимания или негативных ассоциаций. А также в некоторых культурах, например, в арабских странах, чтение осуществляется справа налево, а не в привычной для нас манере, и это важно учитывать при создании дизайнов под конкретную ЦА.
Больше информации про контекст в дизайне:
Масштаб, пропорции, пространство и композиция
Пространство и композиция - это то, как элементы расположены на странице. Хороший дизайн должен иметь баланс и гармонию. Это может включать выбор правильных пропорций, расстояний между элементами и их относительный размер.
В искусстве и дизайне принцип масштаба означает относительный размер одного объекта по сравнению с другим.
Под пропорциями в искусстве и дизайне понимаются различные размеры отдельных частей, составляющих один объект. Например, реалистичные пропорции позволяют получить более реалистичное изображение.
Вот пример пропорций в дизайне (ссылка на источник)
Для графических дизайнеров, создающих инфографику, логотипы или веб-дизайн, важно учитывать масштаб и пропорции при определении фокусной точки работы. В процессе графического дизайна корректировка масштаба сосредоточена на размере объекта и его соотношении с другими элементами дизайна.
Еще один способ использования масштаба и пропорций в графическом дизайне - это создание гармонии и баланса между элементами.
Гармония - это ощущение единства и согласованности, благодаря которому элементы хорошо сочетаются друг с другом. Это достигается разными приемами, в том числе использованием гештальт-принципов (их рассмотрим отдельно).
Пример: с помощью пропорций можно выровнять элементы по сетке или направляющим, что позволит создать последовательный и упорядоченный макет.
Больше информации про Масштаб, пропорции, пространство и композицию:
- "Масштаб и пропорции при разработке гейм-дизайна" от Level-design.ru ("Михаил Кадиков - Интересное в дизайне уровней")
- "Основы композиции" от CG Fish на YouTube // здесь речь про композицию в целом - просмотр этого видео точно не станет лишним
Типографика
Типографика - это искусство оформления текста. Хорошо оформленный текст должен быть легко читаемым и привлекательным для глаза. Это включает выбор шрифтов, размеров, цветов и расстояний между буквами и строками.
Расшифровка и разбор терминов с картинки есть в этой статье - "Анатомия шрифта: визуальный гайд по типографике".
Отдельно предлагаю рассмотреть популярные категории шрифтов - это нужно знать, потому что в работе вам предстоит отбирать для своих проектов готовые шрифты среди тысяч доступных.
Основные виды шрифтов:
- С засечками (Serif) - больше всего подходят для оформления печатных изданий, в особенности книг, журналов, документов;
- Брусковые - используются как для книжного набора, так и для рекламных решений;
- Гротески (рубленые) - неконтрастные шрифты без засечек, часто используются в интерфейсах: приложениях, сайтах, играх, потому что электронный формат чтения значительно отличается от печатного;
- Рукописные - обычно используются в оформлении обложек альбомов, пригласительных, дипломов. Рукописные шрифты тяжело читать, поэтому ими выделяют лишь несколько элементов, на которых хотят сделать акцент.
- Акцидентные (декоративные) - используются для привлечения внимания, потому что они яркие и броские, встречаются в рекламных заголовках и на обложках журналов.
Посмотреть обзор видов шрифтов и их отличие можно в статье "Виды шрифтов: Как выбрать лучший вариант для дизайна" от Яндекс.Практикум.
Больше информации про типографику в дизайне:
- Видео-лекция "Эстетика и типографика" с Илларионом Гордоном от Яндекс на YouTube // полезно посмотреть
Цвет
Цвет - это мощный инструмент в дизайне. Он может вызывать эмоции и ассоциации у зрителя, а также помогать передать определенное настроение. В дизайне есть много способов использования цвета, и каждый дизайнер должен знать, как правильно его применять.
Цвета могут вызывать различные эмоции и ассоциации. Например, красный цвет может вызывать чувство страсти или опасности, а зеленый цвет может ассоциироваться с природой и спокойствием. Поэтому важно выбирать цвета, которые соответствуют теме и настроению дизайна.
Существуют определенные приемы сочетания цветов, наиболее наглядно на это можно посмотреть здесь: https://color.adobe.com/ru/create/color-wheel
Говоря о теории цвета могу посоветовать начать её изучение с книги Йоханнеса Иттена - "Искусство цвета". Это базовая база. Ниже ссылки для обязательного изучения.
Вот эти обязательные для изучения материалы:
Визуальная иерархия
(формируется из трех предыдущих)
Визуальная иерархия – это порядок, в котором пользователь обрабатывает информацию согласно её важности. Для определения важности информации, дизайнер манипулирует определенными характеристиками: размер, цвет, контрастность, выравнивание, повторение... и так далее (ниже перечислено больше характеристик).
Визуальный вес, или визуальный контраст, который имеет каждый элемент, определяет его важность по отношению к другим элементам дизайна.
Отсюда у дизайнера есть возможность управлять вниманием пользователя. Посмотрите на картинку:
"Визуальная иерархия контролирует процесс восприятия. Если вам трудно понять, куда смотреть на странице, то, скорее всего, в её макете отсутствует четкая визуальная иерархия" Nielsen Norman Group
Для создания и соблюдения иерархии страницы дизайнеры манипулируют следующими характеристиками:
- Размер (пользователи легче замечают крупные элементы);
- Цвет (яркие цвета обычно привлекают больше внимания, чем приглушенные);
- Контрастность (резко контрастные цвета привлекают больше внимания);
- Выравнивание (невыровненные элементы выделяются на фоне выровненных);
- Повторение (повторяющиеся стили могут указывать на то, что содержание связано между собой);
- Близость (близко расположенные элементы кажутся связанными);
- Белое пространство (больше пространства вокруг элементов привлекает к ним внимание);
- Текстура и стиль (более насыщенные текстуры выделяются на фоне плоских).
- И другие...
Этот принцип, можно сказать, тесно связан с гештальт-принципам, которые мы рассмотрим следующими. Но перед этим рекомендую ознакомиться со следующими статьями, чтобы закрепить и углубить свои познания по визуальной иерархии.
Больше информации про визуальную иерархию в дизайне:
Гештальт-принципы
Гештальт-психология - это теория о том, как мы воспринимаем мир вокруг нас. Она говорит, что мы не просто воспринимаем отдельные элементы, а видим их в контексте целого.
Эти принципы можно применять и использовать в качестве аргументации своих дизайн решений в UX/UI. Размер данной статьи ограничен, а тему Гештальт-принципов нужно раскрыть шире, поэтому я подготовил объяснения основных гештальт-принципов с несколькими примерами в отдельной статье: https://telegra.ph/Geshtalt-principy-v-UX-dizajne-08-14. Рекомендую ознакомиться.
А также в дополнение можете почитать эти статьи:
Доступность (accessibility) и инклюзивный дизайн
Доступность (Accessibility) - это дизайн продуктов/сервисов/устройств, которые могут использовать как можно больше людей, включая людей с ограниченными возможностями, такими как нарушение зрения, двигательные трудности, трудности в обучении или глухота.
Разница: доступность - это результат (готовый дизайн), а инклюзивный дизайн - это методология подхода к проектированию.
Доступность является одним из основных результатов эффективного процесса инклюзивного дизайна.
Однако сама по себе доступность оставляет без внимания значительную часть населения, которая не имеет определенных, юридически признанных ограничений, но может испытывать проблемы при взаимодействии с интерфейсами в силу конкретных обстоятельств. Инклюзивный дизайн активно ищет такие разнообразные ситуации и стремится их разрешить.
Статьи для изучения:
Рекомендую ознакомиться с этими статьями, а если у вас трудности с английским, то для вас я подготовил переводы этих статей в телеграм-канале "Воздушный дизайн" в разделе "Переводы". Почитайте и можете подписаться, чтобы не пропускать новые полезные и интересные материалы по digital-дизайну.
На русском языке я также нашел статьи, из которых можно понять что такое доступность и инклюзвиный дизайн, и как делать свои дизайны доступными для более широкого числа пользователей, ссылки:
А теперь перейдем к дополнительным принципам дизайна. Вам необязательно сразу сходу применять и интегрировать их в своих работах, но знать о них следует. Поэтому не закрывайте эту страницу, хотя бы просто не прочитав краткую информацию про эти принципы.
Правило золотого сечения *
Правило золотого сечения - это математическая концепция, которая используется в дизайне для создания гармоничных и пропорциональных композиций.
Это правило гласит, что если разделить отрезок на две части таким образом, чтобы отношение меньшей части к большей было равно отношению большей к целому, то точка разделения будет соответствовать золотому сечению (не вникайте в это определение, просто посмотрите картинки с этим правилом).
Как говорят: "...в дизайне золотое сечение можно применять для расположения элементов на странице, выбора размеров шрифтов и изображений, а также для создания баланса между положительным и отрицательным пространством в дизайне. Правило золотого сечения может быть использовано для создания гармоничных пропорций в дизайне интерфейсов, логотипов, постеров, книжных обложек и других типов дизайна..."
НО! Лично я ни разу не рисовал логотип/макеты с использованием этого правила, поэтому не могу рекомендовать его как полезное. Я максимум накладывал соответствующую схему на некоторые свои готовые работы, когда активно изучал этот вопрос, но это никак не сказалось на результатах.
Об этом правиле говорят больше, чем я встречал его использование на практике. Просто даю вам знать (или напоминаю), что такое правило существует и вы не окажетесь в дураках, когда какой-нибудь условный программист решит проявить свою эрудированность в вопросе дизайна и поведает вам о таком "божественном правиле". Посмотрите видео по ссылке ниже и поймете, почему его называют божественным.
Если вы решите опробовать это правило, то в теории оно поможет вам создавать эстетически привлекательные и уравновешенные дизайнерские решения. Я буду очень рад, если кто-нибудь сможет эффективно внедрить это правило в свою работу и поведает мне о том, как это могу сделать я.
Больше примеров правила: https://www.internet-technologies.ru/articles/ponimanie-roli-zolotogo-secheniya-v-dizayne.html
"Числа Фибоначчи и тайна Золотого сечения" на YouTube: https://www.youtube.com/watch?v=UdW0hfSzATY
"Золотое сечение: Самый раздутый миф в дизайне": https://ux.pub/editorial/zolotoie-siechieniie-samyi-razdutyi-mif-v-dizainie-2pm6
А следующий принцип более важен. Его используют не только в продуктах, но и внедряют в свою жизнь всё большее количество людей. И это оправдано. Даже если на старте карьеры дизайнера вам не предстоит заниматься внедрением данного принципа в свои проекты, то хотя бы знать о нем не будет лишним. Речь идет о геймификации.
Геймификация* (в частности в UX/UI)
Этот пункт очень важно рассмотреть отдельно. И он наиболее актуален в направлениях UX/UI и Product дизайне.
Геймификация - это использование игровых элементов и принципов в негеймовых контекстах. В дизайне, геймификация означает использование игровых механик в интерфейсах и приложениях для улучшения опыта пользователя.
Способы геймификации в дизайне:
- Использование наград и достижений может мотивировать пользователя на выполнение задач и достижение целей;
- Использование игровых принципов, таких как повторение и постепенное усложнение задач, может помочь улучшить понимание и запоминание материала. Кроме того, использование наград и достижений может помочь мотивировать пользователей на изучение новых концепций и технологий;
- Использование игровых механик, таких как лидерборды и конкурсы, может помочь привлечь внимание пользователей к продукту или услуге. Кроме того, использование наград и достижений может помочь повысить лояльность пользователей и увеличить количество повторных покупок.
Ссылка на исследование, подтверждающее эффективность геймификации на примере Smartstore (требуется запрос для скачивания файла с исследованием).
Ниже примеры геймификации, с которыми вы могли встретиться сами в роли пользователя.
Примеры геймификации на реальных продуктах/сервисах:
- Duolingo, которое помогает пользователям изучать новые языки, предоставляя им достижения и возможность соревноваться с другими пользователями. Это помогает пользователям оставаться мотивированными и продолжать изучать язык. (Подробный разбор геймификации приложения Duolingo - на англ. перевод статьи скоро будет доступен в телеграм-канале);
- Headspace – это приложение для медитации и управления стрессом, которое использует геймификацию, чтобы помочь пользователям раскрепоститься и научиться медитировать. Пользователи могут зарабатывать достижения и награды, выполняя цели и достигая лучшего самочувствия. (Подробный разбор геймификации приложения Headspace - на англ. перевод статьи скоро будет доступен в телеграм-канале).
Материалы по геймификации:
На сегодня это всё...
А закончить эту статью хотелось бы словами ИИ:
Все, что было описано выше, является основными принципами в дизайне, которые помогут вам создать продукты, которые будут функциональными, удобными в использовании и привлекательными для пользователей. Однако, не стоит забывать, что дизайн - это не статичная область, а постоянно развивающаяся. Поэтому, следите за тенденциями, обучайтесь и совершенствуйте свои навыки, чтобы создавать дизайн, который будет отвечать потребностям пользователей в настоящем и будущем.
Спасибо за внимание!
Вообще, принципы дизайна - это важная и в то же время очень огромная тема. Поэтому, смею заметить, что данная статья несёт исключительно ознакомительный характер. Вам стоит изучить каждый приведенный выше принцип глубже и начать применять их на практике. В этом вам может помочь мой телеграм канал, загляните.
