компонентный дизайн
Веб-дизайн 0 Комментариев

Что такое компонентный дизайн?

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

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

Что же такое компонентный дизайн?

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

Идентичность.

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

компонентный дизайн

Элементы.

Вторая группа состоит из более мелких деталей – элементов. Их примером могут быть кнопки, ссылки, раскрывающиеся (изменяющиеся элементы). Для каждого из них определяется вид, форма взаимодействия с пользователем. Девизом этого этапа может служить фраза: «Определить один раз, чтобы использовать всегда.»

компонентный дизайн

Компоненты.

Это следующая по масштабу группа. Компонентами называются блоки элементов, проектируемые в приложениях или веб-страницах. Компонент – группа элементов (карты, меню). Тем не менее, компоненты совсем не обязательно должны выглядеть составными.

компонентный дизайн

При проектировании компонентов создаются разные версии каждого из них для различных размеров экрана (мы же за адаптивный дизайн!). Это избавит от возвращения к проектированию отдельных частей.

Композиции.

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

На примере ниже мы видим табличный шаблон. Это очень простой пример композиции.

компонентный дизайн

Шаблон.

Пятая группа, шаблон, — это более абстрактная коллекция дизайнерских принципов.

компонентный дизайн

Страницы.

Страницы (экраны) – это последняя, самая общая группа проекта. Каждая страница определяет расположение композиций и компонентов.

компонентный дизайн

Пример.

Давайте разберем очень простой пример компонентного дизайна.

Скажем, мы продаем билеты на какое-то мероприятие. Существует три вида билетов. Каждый из них представлен одинаково, с определенным количеством элементов внутри. В нашем случае, кнопка и какой-то текст. Это значит, что билет – это компонент.

компонентный дизайн

Теперь уточним, что мы хотим видеть на главной странице все три вида билетов на главной странице. Данный этап – это композиция. Композиция определяет, какое количество места будет между компонентами (билетами) а также название над ними.

компонентный дизайн

Sketch

Не секрет, что Sketch с недавних пор стал одним из главных инструментов создания UI/UX-дизайна.

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

компонентный дизайн

Заключение.

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



Подпишитесь на обновления блога!

Будьте всегда в курсе новостей

Добавить комментарий