Визуальный стиль сторис в приложении
Мы делаем макеты для сторис разнообразными: используем яркий фон, живые фотографии, цветные плашки и декоративные элементы. Чтобы визуалы оставались узнаваемыми и согласованными с общим стилем Додо, мы следуем правилам, описанным в этом гайде.
Общие принципы: каким должен быть визуал
Сформулировали 4 принципа, которым следуем при разработке сторис:
Узнаваемость. Экспериментируем с дизайном, но оформляем макеты в едином графическом стиле: используем фирменный шрифт, узнаваемые плашки, естественные фотографии.
Разнообразность. Сохраняем гибкость в выборе цветов и дополнительных элементов. Пробуем разные цветовые схемы, меняем композицию, рисуем уникальные иллюстрации.
Легкость. Оставляем «воздух» в композиции: умеренно используем плашки и иллюстрации, разбиваем длинный текст на несколько слайдов.
Понятность. Поддерживаем текст визуалом: тщательно подбираем изображения под тему, размещаем простые иконки и символы, избегаем перегруженности в макетах. Делаем так, чтобы пользователь считывал главное даже при беглом просмотре сторис.
Цвета
Не ограничиваем цветовую палитру, но придерживаемся основных правил:
- Оранжевый — главный цветовой идентификатор бренда. Красим оранжевым максимум площади, если хотим сообщить, что это Додо.
- Используем контрастные оттенки для текста и фона, чтобы улучшить читабельность.
- Добавляем разнообразия с помощью градиентов.
- В продуктовых сторис используем фон теплых оттенков. Избегаем чрезмерно ярких цветов — они отвлекают внимание от продукта.
Удачные цветовые решения
Шрифт и стили текста
- Основной шрифт для сторис — Dodo Rounded v2 Variable.
- Размер и настройки текста в разных программах выставляем по шаблонам.
- Делаем заголовок как минимум в 1,75–2 раза крупнее основного текста.
- Используем не больше 2–3 вариантов кегля на странице. Кегль настраиваем опционально.
Структура текстовых блоков, которая выглядит хорошо 
Плохой пример с большим количеством начертаний, в котором отсутствует контрастность и нет визуальной иерархии - Размещаем текст на однородном фоне, чтобы он легко читался.
- Детализированные и пестрые фотографии оформляем в коллажи. Так останется место для текста.
Обложка сторис
- Для разработки обложек сторис пользуемся шаблонами. В них указаны размеры шрифта и пропорции.
- Фон обложки всегда делаем цветным, чтобы он не сливался с белым фоном приложения.
- Лейбл с рубрикой указываем в правом верхнем углу обложки.
Примеры рубрик 
Пример обложки с лейблом - Размещаем на обложке крупные элементы, которые видно издалека.
Все элементы легко считываются, их будет видно на экране приложения 
Пользователь не разглядит пометку «25 см» в превью приложения. Ее нужно сделать крупнее
Стиль фотографий и изображений
- Показываем продукт в контексте реальной жизни. Выбираем живые фотографии вместо фонов.
- Делаем акцент на людях и ситуациях, в которых они потребляют продукт. Так мы напоминаем, что в Додо можно быстро подкрепиться, а потом продолжить заниматься делами.
На подносе в пиццерии 
Лужайка на пикнике 
В процессе - Максимально приближаем контент к лайфстайлу. Подбираем фотографии, которые отражают реалистичные ситуации и моменты из повседневной жизни. Следим за тем, чтобы позы и эмоции героев выглядели естественными.
Девушка с открытой коробкой стоит посреди улицы. Ситуация неестественная, снимок не вызывает эмоций 
Героиня изображает удовольствие от еды. Несмотря на домашний интерьер, расслабленную одежду и позу, снимок выглядит постановочным - Работаем только с изображениями, у которых есть лицензия на коммерческое использование. Выбираем фото высокого качества с четкой обтравкой.
Кнопки
- Добавляем только одну кнопку в серию сторис. Избыток кнопок путает пользователя.
- Цвет текста на кнопке делаем контрастным по отношению к фону.
Хороший контраст 
Плохой контраст - Всегда используем стандартный размер кнопок.
Нужные пропорции кнопки 
Неправильные пропорции кнопки - Размер шрифта в кнопках отставляем неизменным.
Правильный размер шрифта в кнопке 
Слишком крупный шрифт в кнопке - Размещаем кнопку в нижней части макета. Ориентируемся на шаблон.
Дополнительные элементы
Используем плашки, стрелки и иллюстрации, чтобы разнообразить макет.
Плашка с текстом
- Ставим на плашку не более двух слов.
- Цвет плашки делаем контрастным по отношению к цвету текста.
- Экспериментируем с расположением плашек. Если хотим сделать макет более динамичным, размещаем плашки под разными углами.
Выделение текста на макетах с помощью цветных плашек
Нумерация в сторис
- Используем плашки с нумерацией в длинных сторис — от 4 слайдов. Помогаем пользователям сориентироваться и показываем, сколько контента их ждет.
- Располагаем плашки как вверху, так и внизу макета.
Пример использования плашек с нумерацией
Стрелки
- Используем стрелки, чтобы управлять вниманием пользователя.
Варианты стрелок - Размещаем не больше 1–2 стрелок в серии сторис.
- Все стрелки в серии делаем одинаковыми по толщине и стилистике.
- Рисуем плавные изгибы, избегаем заломов.
Стрелка с правильными изгибами 
Стрелка с заломами - Используем контур с умеренной толщиной, чтобы он не отвлекал внимание от текста и других элементов.
Нормальная жирность контура 
Слишком жирный контур
Декоративные элементы
- Умеренно используем декоративные элементы и гармонично встраиваем их в композицию.
- Отказываемся от них, если на макете много текста и других содержательных элементов.
- Следим, чтобы декоративные элементы поддерживали и усиливали сообщение, а не конкурировали с ним. Декоративные элементы для сторис в приложении.
Сетка
Всегда учитываем охранные поля и сетки при разработке сторис.
Основная зона. Здесь находится наш контент (1500 px на 840 px).
Видимая зона. На некоторых устройствах эти поля обрезаются, поэтому не располагаем здесь текст и важные элементы (2084 px на 130 px).
Поля, которые не отображаются на экранах мобильных телефонов. Ничего здесь не размещаем. Только фон. (2084 px на 125 px).
Зона для кнопки 962 px на 146 px.
Читать далее: