1 BmaLZzro CRuppVWr1hzVA 1160x620 - Как создать фронтенд фреймворк при помощи Sketch
1 5XO0vb0mmbRoCLvB1Laxww 80x43 - Как создать фронтенд фреймворк при помощи Sketch
Фронтенд фреймворк

Сперва, следует рассмотреть некоторые аспекты:

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

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

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

Прежде, чем приступить к созданию FEF, важно учитывать следующие аспекты:

Он должен использоваться и его должно быть просто внедрить в различные рабочие процессы.

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

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

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

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

Давайте начнем внедрение FEF

Шаг 1, определение информационной архитектуры:

Первый шаг – определение контента (на основании нашего продукта мы разделили его на следующие элементы):

  1. Стиль: цветовая схема, шрифт, типографика, иконки.
  2. Лейауты и шаблоны страниц: различные сочетания, сетки и основная навигация.
  3. Элементы навигации: ссылки, вкладки и пагинация.
  4. Модальные окна: вспомогательные экраны, тултипы, выпадающие окна, сообщения.
  5. Ввод текста: формы.
  6. Компоненты

Шаг 2, создание контента FEF:

Стиль – Первоочередная задача – это создать первичную, вторичную цветовую схему и вспомогательные цвета, определение их в #HEX и возможность их использования.

1 0680BvMRMDvOqv4MRA4VQg 80x37 - Как создать фронтенд фреймворк при помощи Sketch
Цветовая схема

Затем создайте стили в Sketch для возможности оптимизации рабочего процесса при создании дизайна.

1 21VbE5DSGT7keM78gPgmwQ 80x29 - Как создать фронтенд фреймворк при помощи Sketch
Создайте новый стиль, которым можно поделиться

Чем лучше вы создадите номенклатуру компонентов в FEF, тем более организованной будет ваша таблица в Sketch.

1 HF9eeJVg8B9SPtTZaILG8g 80x111 - Как создать фронтенд фреймворк при помощи Sketch
Созданные стили

Таким образом, если мы хотим быстро изменить цвет компонента, мы сможем это сделать в окне стилей и при этом не добавим лишний цвет.

1 BECrGby5mDvj2CvH0PD7Tw 80x29 - Как создать фронтенд фреймворк при помощи Sketch
Выбор предустановленного цвета фона

Повторяем процесс для стилей типографики:

1 7Y7b4PgKIfW0ZjfQRVdeYw 80x31 - Как создать фронтенд фреймворк при помощи Sketch
Типографика
  1. Детализируем шрифты, которые будут использоваться в дизайне, основные и второстепенные.
  2. Создаем стили в Sketch как и в случае с цветами
1 r5kXboT OU3FuvYW JTdDA 80x45 - Как создать фронтенд фреймворк при помощи Sketch
Созданные стили

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

1 zY38WGccGulaGcDx9mN pQ 80x67 - Как создать фронтенд фреймворк при помощи Sketch
Семейство иконок

Совет: Создавайте одну иконку в различных состояниях и присваивайте ей имя по такому принципу ComponentName / state / sub-state, таким образом, вы сможете получить доступ ко всем состояниям в главном меню и не будете править оригинальную иконку.

1 Plvt7vP2xWMqdNddWTpAEg 80x14 - Как создать фронтенд фреймворк при помощи Sketch

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

1 x7SSpMS1HYyksCeGDlf0ew 80x157 - Как создать фронтенд фреймворк при помощи Sketch

  1. checkbox/normal (нормальный)
  2. checkbox/hover (ховер)
  3. checkbox/focus/minus (фокус/минус)
  4. checkbox/focus/check (фокус/проверка)
  5. checkbox/pressed (нажатие)
  6. checkbox/disabled/check (отмена нажатия)
  7. checkbox/disabled (отключен)

Соответственно, вот, что будет показано в выпадающем списке на верхней панеле:

1 kBtWUmlgfvJ9eTjD4B3srg 80x24 - Как создать фронтенд фреймворк при помощи Sketch

Таким способ можно достичь смену состояний от одного к другому намного проще, доступнее и избежать беспорядка в дизайне.

1 O5oibWdHf0nAw2F H2o3eQ 80x43 - Как создать фронтенд фреймворк при помощи Sketch
Изменение стилей

Шаг 3, создание компонентов:

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

Вот некоторые компоненты, которые я хотел бы показать в качестве примера:

1 RsguKlz0WVVfrxnby2cGGg 80x49 - Как создать фронтенд фреймворк при помощи Sketch
Подсказки

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

1 rmoiLTbljAL Iv jREEfqw 80x46 - Как создать фронтенд фреймворк при помощи Sketch

Формы – Совет: Создав текстовое поле в виде символа, вы получите возможность редактировать контент без доступа к самому символу.

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

1 XTVyLYKhaCv1sbPbk36HQQ 80x26 - Как создать фронтенд фреймворк при помощи Sketch
Пример вспомогательного окна

1 2czyxGfUjQTlZlVcnYSHvQ 80x81 - Как создать фронтенд фреймворк при помощи Sketch

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

1 jkfloUVJ4GNoYqjxhMkPmg 80x52 - Как создать фронтенд фреймворк при помощи Sketch
Просмотр в Zeplin

Шаг 4, поведения:

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

1 GmMBqaF  o8DSW15ofCA1Q 80x36 - Как создать фронтенд фреймворк при помощи Sketch
Пример адаптивной сетки
1 lsv9CluG3SLG1IiUtHrsoQ 80x39 - Как создать фронтенд фреймворк при помощи Sketch
Пример адаптивных колонок

Как добиться такого поведения? В 39 версии Sketch добавлены 4 опции, которые помогают достичь это.

Эти опции:

1 2fdvGW7BjPqQJux63bv9BQ 80x148 - Как создать фронтенд фреймворк при помощи Sketch

Stretch – ресайз слоя при сохранении его исходного положения (эту опцию следует применять для разделительных линий и прямоугольников).

Pin to corner  – автоматически закрепляет слой в ближайшем углу и не изменяет своего размера. (эта опция должны применяться для иконок и чекбоксов.)

Resize object – изменяет размер слоя в момент ресайза родительской группы. (Опция для текстовых полей).

Float in place – слой не изменяет своего размера, но он меняет свою позицию в процентном соотношении. (Эту опцию следует применять для иконок, которые должны находиться по центру колонки.)

Для большей информации о том, как создавать эти таблицы, рекомендую следующую статью:

Шаг 5, рекомендации

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

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

1 7dwpsMQbPutwLDEz8cCzfg 80x25 - Как создать фронтенд фреймворк при помощи Sketch
Компоненты

Общее будущее

Работая бок-о-бок с другими членами команды над общим проектом на основе гида по стилю, может значительно увеличить качество работы. Совместная работа над проектом в этом случае больше не будет содержать вопросы типа: “А что будет, с компонентом “X” в меньшем разрешении?

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

Скачайте мой Sketch файл: https://www.dropbox.com/s/kknipcg3u0e69ds/FEF.sketch?dl=0

Свежие вакансии
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург По договоренности ₽
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
                        Kodix Kodix UX/UI Designer Офис Москва (Moscow, Russia)
Все вакансии

Оригинал: Seba Mantel

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Организация пространства в дизайне. Отступы, сетки и лейауты

В этом руководстве мы рассмотрим основы определения пространственных базовых единиц и создание правил отношений с помощью сеток

История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему

Опыт перехода дизайн команды Dropbox на Figma

Почему дизайн-системы терпят неудачу и как заставить их работать в 2020 году

После отказа от нашей первой дизайн-системы в конце 2018 года мы создали новую и улучшенную дизайн-систему с нуля