Что такое композиция в UX/UI дизайне?
Композиция в дизайне сайтов – это набор элементов, которые описывают одну мысль или несут один посыл в дизайн-макете. Например: карточка товара — рассказывает о товаре; блок сертификатов — описывает лицензии, которые есть у компании и т.д.
Мы можем каждую композицию оформлять как хотим. Но единство всех элементов сайта даст совокупный эффект хорошего и органичного дизайна. Поэтому есть несколько общих правил, которые вам помогут на начальном этапе.
Виды композиции
Упрощенно, все виды композиций можно поделить на количество визуальных центров, которые присутствуют в дизайн-макете.
Один визуальный акцент. Чаще всего это композиция с акцентом в центральную часть дизайн-макета. Данный вид композиции используется во всех сфера графического и веб-дизайна.
Два визуальных акцента. Второй по распространенности вид. Парой в этих случаях выступает: текст + изображений.
Основные визуальные правила в композиции (с примерами)
- Акценты внимания. Когда вы разрабатываете композицию части интерфейса, всегда выделяем ключевые элементы, которые являются основой. Например: карточка товара — изображение и цена; главный экран сайта — заголовок и описание того, чем занимается компания. При просмотре композиции, ключевые элементы должны выделяться на фоне других частей макета. Это можно делать за счет: размеров, цвета, добавления эффектов (тени, градиент, подчеркивание).
- Правило преемственности. Все композиции, которые вы используете в своем макете, должны быть в едином стиле и оформлены с одинаковыми эффектами (цвета, тени, обводки и градиенты и др.).