Как создать эффективную структуру дизайна (включает бесплатную структуру пользовательского интерфейса Sketch)

Если вы какое-то время были в мире дизайна, вы, вероятно, слышали такие термины: фреймворк дизайна, фреймворк пользовательского интерфейса, набор пользовательского интерфейса или библиотека шаблонов. Все они относятся к одному и тому же — системе стандартов дизайна, шаблонов, шаблонов пользовательского интерфейса и компонентов, которые используются во всем продукте и служат его языку дизайна.

Если вы раньше не создавали структуру проектирования, запуск ее может показаться сложным и трудоемким, но это ускорит вашу работу по проектированию и сделает ее более эффективной в целом.

Давайте обрисуем основные проблемы, которые решает фреймворк дизайна, зачем он вам нужен, и компоненты, которые вам нужно будет создать при его создании. Далее в статье вы найдете бесплатно загружаемый фреймворк пользовательского интерфейса Sketch, который позволит вам создать свой собственный фреймворк дизайна.

Что такое дизайн-фреймворк?

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

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

Фреймворки дизайна решают несколько проблем, в том числе:

• Устранение несоответствий в дизайне продукта.
• Увеличение сотрудничества, эффективности и коммуникации между командами дизайнеров и разработчиков.
• Внесение изменений в дизайн позже в процессе проектирования менее утомительно.

Первая проблема: непоследовательность в продукте

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

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

Фреймворки проектирования решают эту проблему, устанавливая согласованные стандарты.

Вторая проблема: пробелы в сотрудничестве и коммуникации

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

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

Третья проблема: изменения дизайна на поздних стадиях

Сколько раз дизайнерам приходится вносить одно изменение цвета в файл дизайна с уже разработанными 120 монтажными областями? Сколько раз нужно менять иконку, входящую в состав 200 компонентов?

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

Как создать дизайн-фреймворк

Теперь, когда мы знаем, что такое фреймворк проектирования и проблемы, которые он решает, давайте поговорим о его создании (и о том, что входит в загрузку комплекта пользовательского интерфейса Sketch, предоставленную далее в статье).

Среда проектирования, используемая в этой статье, представляет собой один файл Sketch, созданный с использованием определенной иерархии компонентов, известных в Sketch как «символы». Эти символы упрощают внесение изменений в файл одним щелчком мыши. Одно изменение в «главном» компоненте — «символе» — мгновенно отражается во всех остальных экземплярах.

Иерархия среды разработки

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

Цвет

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

Хорошей практикой является разделение цветов на группы:

1. Основные цвета — это основные цвета бренда, которые обычно используются для создания общей цветовой схемы проекта и для таких важных компонентов, как кнопки.
2. Вторичные цвета дополняют основную палитру — часто это разные оттенки, насыщенность или оттенки основных цветов. Оттенки серого обычно используются для типографики или фона. Где-то от пяти до восьми уровней серого должно быть достаточно.
3. Цвета системной обратной связи — важная группа, о которой часто забывают дизайнеры. Эти цвета отображают системные сообщения, включая оповещения, предупреждения и уведомления.

Сетка: пространство дизайна

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

Существует два типа сетки: вертикальная и горизонтальная .

Вертикальная сетка используется чаще всего и выравнивает все по горизонтали. Есть много популярных систем сетки, таких как Bootstrap или старая сетка 960px.

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

Модификаторы: стилистические правила

В дополнение к цвету и сетке есть еще один компонент, который находится высоко в иерархии фреймворка дизайна: модификаторы. Их нельзя использовать как автономные компоненты — они используются для изменения или оформления других компонентов.

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

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

Этот метод позволяет дизайнерам больше сосредоточиться на UX, а не на внешнем виде компонентов пользовательского интерфейса. Это также позволяет легко вернуться к базовой форме, изменить ее стиль (например, радиус угла), и все, что связано, будет обновляться автоматически.

Типографика: содержание

Типографика — последний важный компонент фреймворка дизайна. Его можно разделить на две группы: статическая копия страницы, такая как заголовки и абзацы; и интерактивное копирование компонентов, таких как кнопки, навигация или поля ввода.

Разработайте стиль и размер всех заголовков (H1, H2, H3 и т. д.) и абзацев. Статическая копия страницы обычно не имеет большого количества стилистических (цветовых или весовых) вариаций. Единственная вариация, связанная со стилем статической копии страницы, заключается в том, находится ли она на светлом или темном фоне. Поэтому лучше всего создать два набора цветов, чтобы статическая копия страницы работала на обоих.

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

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

Иконки

В дизайн-системе есть две группы иконок: информативные и иконки пользовательского интерфейса. Первая группа обычно является частью системы иллюстраций и не используется для каких-либо компонентов взаимодействия с пользовательским интерфейсом (например, кнопок). Вторая группа — значки пользовательского интерфейса — добавляют смысл более сложным компонентам: кнопкам, меткам или таблицам, занимая при этом очень мало места. Значки в пользовательском интерфейсе также можно использовать в качестве триггеров функций, таких как «изменить», «копировать», «загрузить» и «удалить».

Начните с простых значков, используемых для взаимодействия с пользовательским интерфейсом, таких как стрелки, «добавить» (+) или «закрыть» (x). Хорошей практикой является создание их в разных размерах (12px, 16px, 24px 32px).

Компоненты

Кнопки

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

При разработке кнопок обязательно разрабатывайте их отдельные «состояния». Как правило, кнопка имеет несколько состояний и обеспечивает визуальную обратную связь для пользователей, чтобы указать текущее состояние (ожидание, наведение, нажатие, отключено, активно и т. д.).

Есть два способа сделать это: первый — спроектировать внешний вид кнопок отдельно для каждого состояния (обычное, активное, наведенное и нажатое). Это решение может занять много времени, но впоследствии дает большую гибкость. (Этот метод использовался в бесплатной платформе пользовательского интерфейса Sketch, приведенной ниже.)

Второй способ — спроектировать все состояния на основе исходного. Например, создайте один символ Sketch, который изменит цвет, насыщенность или яркость каждого состояния.

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

Входные компоненты

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

Сложные компоненты

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

Разделы

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

Рекомендации по разработке фреймворка

Постоянно тестируйте структуру дизайна

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

Создание простых компонентов пользовательского интерфейса

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

Не зацикливайтесь на одном стиле

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

Создайте свой собственный дизайн-фреймворк

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

Готовы ли вы запустить свой собственный дизайн-фреймворк?

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

Вдохновляющие дизайн-системы и UI-фреймворки

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

Google Material Design — в настоящее время одна из самых популярных сред дизайна в мире. Узнайте, как Google распределяет весь процесс проектирования по слоям и создает полезную иерархию компонентов.

Язык дизайна IBM — IBM делится всем своим процессом проектирования, включая подробное объяснение каждой детали. Они также делятся множеством ресурсов из своего языка дизайна, от простых иконок до библиотеки анимации пользовательского интерфейса.

Atlassian — еще один отличный ресурс для обучения. Их руководство по стилю продукта — отличная система дизайна для изучения. Они делятся своим пакетом веб-интерфейса, файлом Sketch с множеством компонентов и концепций.

• • •

Дальнейшее чтение в блоге Toptal Design:

• UX электронной коммерции — обзор лучших практик (с инфографикой)
• Важность ориентированного на человека дизайна в дизайне продукта
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Эвристические принципы для мобильных интерфейсов
• Упреждающий дизайн: как создать волшебный пользовательский опыт