Виды и правила композиции в веб-дизайне

Научитесь создавать грамотные и удобные композиции, чтобы пользователям было удобно пользоваться вашим дизайн. О том как это сделать - читайте в данной статье.

Что такое композиция в UX/UI дизайне?

Композиция в дизайне сайтов – это набор элементов, которые описывают одну мысль или несут один посыл в дизайн-макете. Например: карточка товара — рассказывает о товаре; блок сертификатов — описывает лицензии, которые есть у компании и т.д.

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

Виды композиции

Упрощенно, все виды композиций можно поделить на количество визуальных центров, которые присутствуют в дизайн-макете.

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

За счет заголовка и управляющих элементов слайдера, композиция имеет визуальный центр посередине.

Два визуальных акцента. Второй по распространенности вид. Парой в этих случаях выступает: текст + изображений.

Два центра (список преимуществ слева и инфографика справа).

Основные визуальные правила в композиции (с примерами)

  1. Акценты внимания. Когда вы разрабатываете композицию части интерфейса, всегда выделяем ключевые элементы, которые являются основой. Например: карточка товара — изображение и цена; главный экран сайта — заголовок и описание того, чем занимается компания. При просмотре композиции, ключевые элементы должны выделяться на фоне других частей макета. Это можно делать за счет: размеров, цвета, добавления эффектов (тени, градиент, подчеркивание).
  2. Правило преемственности. Все композиции, которые вы используете в своем макете, должны быть в едином стиле и оформлены с одинаковыми эффектами (цвета, тени, обводки и градиенты и др.).

Свежие материалы

Все материалы