Сибирикс
99

Когда дизайн-система становится жизненно необходимой для проекта

На примере сайта клиента и нашего собственного проекта

В закладки

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

Дизайн-система для Portobello

С eBazaar (ныне Portobello) мы работаем 8 лет и пережили две версии сайта. Вместе с тем совместно разрабатываем новые проекты и поддерживаем прежние. В сезоны высокого спроса на товар заказчика, необходимо решать вопросы в срочном порядке. Правки и дополнительные элементы сайта вносились в режиме «здесь и сейчас», не тратя время и деньги на глубокую аналитику и согласование с основным вектором сайта. Накопительный эффект точечных доработок привел к тому, что некоторые элементы дизайна (например, кнопки, отступы, шрифты) стали жить своей жизнью: не было ни единообразия, ни связи друг с другом.

Например, за 7 лет кнопки использовались в 10 вариантах

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

Обычно мы имеем дело с развивающимися проектами: добавить то, убрать это, а то переделать. И обычно все нужно быстро. Я терпеть не могу, когда мне в качестве рабочих заданий пытаются пропихнуть «размышление об архитектуре». Код, который не работает — протухает. Однако, со временем количество странного кода, технологического долга (из-за спешки) или решений-экспериментов начинают затруднять работу. Проект становится сложно поддерживать. Особенно вредна смена людей на проекте — разобраться в чужом коде в 10 раз сложнее, чем написать свой (актуально для проектов, которые сложнее чем сайт-визитка).

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

Как его делать? Мы составляем план рефакторинга — список самых заскорузлых мест, которые нас самих пугают. Делаем оценки в часах. Проверяем целесообразность (в том числе экономику) рефакторинга (к сожалению, тут формулы я не придумал, только опыт и эмпирика). И по чуть-чуть начинаем внедрять изменения в продукт. Общее правило такое: рефакторится тот участок кода, который требует рефакторинга и с которым команда работает в данном спринте. Это хорошее правило (работает — не трогай), поэтому какие-то вещи могут долго оставаться нетронутыми, хоть они и требуют рефакторига (эстетически), но функцию свою выполняют. Например, какой-нибудь импорт: там вроде бы все сложно, но он работает, а задач по его обновлению нет — значит, пока не трогаем.

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

Владимир
CEO «Сибирикс»

Юзабилити-анализ и дизайн-гайд

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

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

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

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

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

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

Евгений
арт-директор

Из чего состоит дизайн-система

1. Визуальный язык

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

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

2. Сетка для трех сценариев: широкая страница (например, каталог), обычная неполноэкранная страница (для контента), адаптивная версия.

3. Кнопки, ссылки, навигация.

4. Построение блочных элементов: карточки товара, новости, акции, маркетинговые и презентационные материалы и т. д.

5. Каталог (полноэкранная страница).

6. Детальная страница товара.

7. Новости/Акции/Мероприятия.

8. Детальная страница раздела Новости/Акции/Мероприятия.

9. Файлы и прайсы.

Когда я впервые делала дизайн для Portobello, то ощутила на раскопках: у проекта было штук 7 стилей чекбоксов. Сколько дизайнеров проект трогало, столько стилей и образовалось. Найти актуальный было невозможно, потому что верстка кодом нарисовала его сразу на сайте.

Эта система была моей первой :) И хотелось сделать не какую-то лайтовую, а осмысленную инструкцию, где даже интенсивность теней логически зависит от элементов. По ходу правок к системе подключался наш другой дизайнер и отзыв был положительным — он в 2 раза быстрее закончил свою часть сборки! Тем и хороша дизайн-система: почти любой компонент создается копипастом. То есть, дизайнер, не причастный к системе, легко сориентировался на новом для себя проекте.

Кристина
дизайнер

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

Иван
руководитель проекта

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

Дизайн-система для SingularityApp

Приложение SingularityApp — это кроссплатформенный проект, который создан для всех популярных видов площадок: macOS, Windows, iOS, Android, есть браузерная версия. Первым был дизайн интерфейса для мобильного приложения. Когда мы начали переносить его на декстопную версию, поняли, что не все одинаково хорошо смотрится и на телефоне, и на компьютере:

  • шрифт, который встает на iOS, не встает на Windows — в итоге использовали разный;
  • нашли ограничения для дизайна по ОС;
  • когда добавляли заголовок с новой фичей, он мог не поместиться в сетку экрана и нужно было поджать для него место;
  • иконки были разными по размеру, т.к. смотрелись лучше даже при увеличении на 1 пиксель и прочее.

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

Какие задачи SingularityApp решает дизайн-система:

  1. Приводит все элементы в единый вид.
  2. Обеспечивает наличие web и нативного дизайна, т. к. приложение рассчитано на носители с разными операционными системами.
  3. Учитывает гайды Android и iOS.

Особую «радость» работы без дизайн-системы ощутили на иконках. Изначально рисовали их под web: бразуеры умеют обрабатывать картинки формата svg и рендерить их, iOS и Android — нет, у них свои четкие требования. Подогнать иконки под нужные размеры — даже не полдела. Размерность тянула за собой искажение их визуального восприятия и юзабилити. В итоге перерисовывали иконки 3 раза, а их 140 штук.

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

Евгений
арт-директор

Я заметил, что дизайн-системы хоть и призваны стандартизировать все и вся, но в реальности только добавляют хаоса. В дальнейшем подключать дополнительных людей к проекту с дизайн-системой — это саморучно «расшатывать» сформированные в ней правила. Бить палками за ошибки тут сложно: чтобы найти эти ошибки, нужно потратить уйму времени. Не думаю, что кто-то из маленьких компаний может финансово позволить себе содержать и поддерживать дизайн-систему в порядке (подойдет UI-кит). Однако, если на продукте десятки или сотни экранов, над которыми трудятся разные команды, дизайн-система — это хоть какой-то шанс управления хаосом. Голову при этом никто не отменял!

Владимир
CEO «Сибирикс»
{ "author_name": "Сибирикс", "author_type": "self", "tags": [], "comments": 0, "likes": 5, "favorites": 4, "is_advertisement": false, "subsite_label": "unknown", "id": 131040, "is_wide": true, "is_ugc": true, "date": "Mon, 01 Jun 2020 09:36:05 +0300", "is_special": false }
Вебинар: продвижение бизнеса в Азию: как выбрать подходящий момент и верную стратегию? Тенденции, инсайты, бизнес-кейсы
2 июля Онлайн Бесплатно
Объявление на vc.ru
0
Комментариев нет
Популярные
По порядку

Комментарии