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

Термин «дизайн-система» появился в середине ХХ века и означал систему визуальной идентификации бренда. Это набор ценностей бренда, инструментов и компонентов, который упрощает создание, тестирование, визуальное и техническое обновление продуктов, а также обеспечивает единообразие их интерфейсов.

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

Отсутствие дизайн-системы ведет к постоянным вопросам: какие шрифты мы выбрали? Какой цвет взять, чтобы дизайн создавал нужное настроение? Мы вообще определились с основными элементами? Действия внутри команды десинхронизированы, появляются нестыковки дизайн-макетов и верстки, приходится тратить много времени на согласование.

Ключевые премущества от разработки дизайн-системы

• синхронизация между членами команды, диалог на одном языке;
• единые библиотеки элементов для разных продуктов в одной экосистеме;
• сокращение времени на прототипирование и дизайн, разработку типовых страниц, тестирование готовых страниц и обучение новых членов команды.

Внедрение ключевых принципов в разработку, что это дает?
Все участники команды проектируют, разрабатывают презентацию на основе общих элементов дизайна. Формируется единая визуальная среда. Коммуникации между сотрудниками становятся проще. Дизайн-система повышает лояльность сотрудников компании к собственным продуктам, положительно влияет на репутацию компании на рынке. Единый визуальный стиль всех презентаций позволяет более эффективно выстраивать взаимодействие с клиентом, сокращать время на разработку не теряя в качестве.

Элементы проектирования.

Система дизайна позволяет работать с элементами и проектировать весь образ презентации

1. Логотип, фирменный блок
   
2. Цветовая палитра бренда
   
3. Шрифт, основы типографики
4. Пиктограммы
   
5. Характер графики
6. Фотостиль

Когда нужно подчеркнуть эксперность и избранность продукта, то нужно использовать 1 цвет, который занимает 80-90% и 1 дополнительный в качестве акцента.

Когда вы сообщаете что "я веселый, классный, креативный", ваша цель передать атмосферу удовольствия, создать определенное настроение. Используйте яркие контрастные цвета.

Эстеты любят окружать приятными вещами, живут в комфортной обстановке, обладают высокой чувствительностью. Используйте пастельную гамму, более мягкую тональность.

Иконки должны вписываться в общую стилистику презентации. Есть есть фирменный стиль, то придерживайтесь его требований. Создавая презентацию помните, что особенности аудитории определяют характер графики и визуализации.

Все иконки презентации должны быть в одном стиле и из одного набора. Смешивание иконок из разных типов сильно бросается в глаза и создает впечатление некачественной работы. Если контурные иконки не из одного набора (pack) или от разных авторов, их стиль может отличаться (толщина линий, скругления углов, цветовая палитра и т.д.). Лучше придерживаться одного выбранного стиля.

Изображения передают эмоции, поэтому используйте изображения, чтобы вызвать эмоциональную реакцию и мотивировать слушателей. У каждого слайда, так и его элементов, должна быть определенная цель. Самый важный вопрос при проектировании - «какая цель этого слайда?» Что должна передать данная фотография на слайде? В связи с этим можно выделить три вида изображений исходя из цели слайда:

1. Цель - описать: документальное изображение
Имеет прямое отношение к тому, о чем вы сообщаете в тексте, и представляет собой, по сути, вещественное доказательство. Основная задача - передать информацию через визуал. Например, вы собираете презентацию о новом коттеджном поселке. Вашими документальными иллюстрациями будут фотографии коттеджей или их стройки, прилегающих территорий, чертежи и схемы местной инфраструктуры. В итоге изображение проще воспринимается и быстрее считывается смысл вместо подробного описания.

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

3. цель: замотивировать: рекламное изображение
Покажите людям всю индивидуальность и энергичность вашего продукта или бренда. Такие фото имеют красочные цвета и креатив в основе. Изображения должны получить эмоциональный отклик от посетителя и вызывать желание попробовать. Они надолго заседают в подсознание.

В нее могут входить примеры цветовых схем, шрифтов, оформления отдельных блоков, фотографий в интерфейсе, компоновки и отдельных графических элементов. Подборка может быть структурированной (каждый блок подписан, назначение каждого примера однозначно понятно), либо хаотичной. Референсы - это конкретные примеры дизайн коммуникаций. Это тот язык, который позволяет вам синхронизировать выбранные визуальные направления графического поиска который вы выбираете для своей презентации.


Источники

1. www.awwwards.com
2. www.siteinspire.com
3. www.pinterest.ru

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

Подходы
1. разработка презентации с учетом фирменного стиля компании
В случае утвержденной системы дизайна компании/бренда, которая определяет набор стилистических элементов, действуйте в рамках брендбука/гайдлайна компании.

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