Создание UI-kit: систематизируем «высокие материи»
Друзья, всем привет!
Сегодня наш старший дизайнер Ксения Романова поделится с вами секретами, которые сильно упростили (читай – систематизировали) жизнь дизайнеров и разработчиков в Hopper-IT.
«Но как же так, – скажите вы. - Ведь сложно найти в сфере ИТ более творческое направление, чем дизайн. Дизайн – это красота, лаконичность и бесконечный полет фантазии. При чем тут вообще какая-то систематизация?!»
Мы тоже так когда-то думали. Однако, на практике отсутствие четкого стандарта в сфере дизайна обязательно приведет к бесконечному недопониманию в команде проекта и ее моральному истощению.
Стараясь нивелировать риск возникновения таких ситуаций, мы пришли к выводу – нужно срочно приступать к созданию единого стандарта UI-kit для наших проектов!
Для справки: UI-kit – это набор готовых элементов для создания интерфейса пользователя.
Представьте: нужно сделать сайт или приложение. Можно взять из UI-kit уже готовые кнопки, формы, слайдеры и другие элементы, чтобы быстро собрать свой дизайн. Это, как конструктор, в котором есть все необходимые детали для сборки. Он упрощает работу и дизайнера, и разработчика – ведь им не нужно рисовать каждый элемент с нуля.
Учимся на НАШИХ ошибках
Выглядит неплохо, не так ли? Но разработка UI-kit – очень кропотливый и трудоемкий процесс. Мы, как первопроходцы, прошли через множество трудностей, создавая его, и, чтобы вы не наступали на те же грабли, делимся нашими проверенными правилами:
1. Объясняй здесь и сейчас
Пишите комментарии. Много и везде! Лучше сразу описать, зачем нужен элемент и где он будет использоваться, чем томить разработчиков ожиданием ответа в будущем.
2. Перекличка: «Frame 1, Frame 2…»
Ох, сколько сил мы потратили, чтобы прийти к пониманию того, что фреймы на макетах должны иметь осмысленные названия. Никому не нужна загадка в духе «Frame1» и «Frame 154», из которых не понятно, что искать и куда смотреть. Frame должны говорить сами за себя! Назовите их так, чтобы даже в 3 часа ночи разработчик смог понять, что перед ним. Поверьте, они будут вам аплодировать стоя!
3. Покажите все состояния элементов (но не перегибайте!)
Детализация – это наше всё. Но вот излишняя необоснованная детализация –прямой путь к захламлению. Это как хранить 100 одинаковых фото вашего кота с разными ракурсами (впрочем, это совсем другое). Часто можно видеть, как одна кнопка в компьютерной версии сайта превращается в десяток разных ипостасей: default, hover, disabled, pressed, active, focused, loading, danger…
Разумеется, всё зависит от конкретной ситуации. Но, в большинстве случаев, для кнопки достаточно показать всего 4 состояния: default, hover, disabled, pressed. Остальное – по ситуации. Главное, чтобы все было понятно и не выглядело, как захламленный чердак.
4. Не усложняйте работу
Большинство всеми нами горячо любимых графиков уже давно нарисованы до нас. Поэтому, не стоит упускать возможность облегчить жизнь себе и разработчикам. Используйте готовые графики, например, с сайта. В последствии разработчики смогут легко взять код оттуда и адаптировать его под свой проект. Красиво, быстро и с чувством прекрасного!
5. Включите уведомления (и не выключайте!)
А именно – сообщайте коллегам-разработчикам обо всех изменениях (которые, конечно же, будут) после передачи проекта в разработку.
Передали проект в разработку? Отлично! Но это ещё не конец, ведь изменения неизбежны (мы все знаем, как это бывает). Поэтому не забывайте сообщать коллегам-разработчикам обо всех правках и нововведениях.
Предупреждён —вооружён. А если разработчик узнает об изменениях случайно — держитесь, он может прийти за вами с баг-трекером!
6. Иконки – основа графики
Редкий проект обходится без иконок, ведь это – отличный способ простой и ненавязчивой визуализации. Но помните, иконку нельзя просто так взять и вставить в проект. Это не мем, который можно кинуть в чат.
Любой графический элемент необходимо вставлять в рамку (Frame). Потому что хаос без рамки – это не стиль, а катастрофа. Добавляйте рамку, и иконки заиграют новыми красками.
7. Живой UI: кормите и ухаживайте
UI-kit – живой и динамичный организм, который меняется вместе с проектом. Добавляйте новый элементы, переделывайте старые, и главное, не забывайте делиться изменениями с разработчиками!
Регулярное обновление UI-kit делает процесс работы понятным, а коллег довольными.
Закрепляем материал
Создание UI-kit — это процесс, требующий внимания к деталям, четкой организации работы и постоянного взаимодействия между дизайнерами и разработчиками.
Давайте подытожим ключевые принципы, которые помогли нам в Hopper-IT значительно улучшить качество и скорость разработки проектов, и которые мы рекомендуем применять:
Документация и комментарии. Описывайте понятно и подробно. Объясняйте назначение каждого элемента и его возможных состояний. Это избавит команду от путаницы и сэкономит кучу времени на последующих этапах разработки.
Организация фреймов и их названий. Осмысленные названия фреймов – залог быстрого и легкого понимания макета. Хаос в именах замедляет работу и вызывает лишние вопросы.
Состояния элементов. Показывайте основные состояния элементов, но не усложняйте. Для большинства компонентов достаточно четырех: стандартный вид, состояние при наведении курсора, неактивный режим и состояние «нажат». Все остальное – по необходимости.
Использование готовых решений. Не изобретайте велосипед, когда он уже есть. Готовые графики, например, с Chart.js, ускоряют процесс разработки и минимизируют риск ошибок.
Обновления и уведомления. Постоянно информируйте разработчиков о любых изменениях. Регулярно обновляйте UI-kit, чтобы он оставался актуальным и полезным на каждом этапе проекта.
UI-kit — это живой инструмент, который развивается вместе с проектом. Да, его создание потребует времени и усилий, но результат оправдает себя многократно, обеспечивая эффективную и согласованную работу всей команды!
Послесловие
Не бойтесь наводить порядок и упрощать свою работу! Если уж нам удалось упорядочить хаос процесса дизайна, то для систематизации точно нет ничего невозможного!
Ну, а мы, как всегда, готовы поделиться советами и подсказками! Удачи в ваших проектах и до новых встреч!