Фигмопись и другие особенности нашего процесса в Figma

Мы в Embacy делаем фирменные стили и небольшие сайты, в основном для digital-продуктов. За полтора года у нас было 60+ проектов. В каждом из них у клиента был доступ к рабочей Figma с первого дня. Открытая кухня дает возможность делать проекты быстро — по пять дней на фирстиль и сайт, но накладывает свои ограничения на нас и клиента.

В этой статье делимся нашими особенностями и процессом работы в Figma.

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

Как проектная Figma выглядит с высоты птичьего полета:

Если немного приблизить:

Если все равно ничего не видно, то у нас есть одна полностью открытая клиентская Figma, заглядывайте : )

2. Дизайнер работает только над одним проектом

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

3. Не защищаем сделанное

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

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

Если не удалять лишнее, то Figma превратится в хаос, особенно:

• В начале проекта, когда проходит концептуальный и стилистический поиск.
• После середины проекта, когда накопилось много материала.

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

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

В каждом проекте пять этапов:

1. Тренерская установка.
2. Дебют.
3. Второй период.
4. Эндшпиль.
5. Тай-брейк.

Рассказываем про каждый из них.

Это аналитика. Ничего выдающегося в ней у нас нет:

• Понимаем задачу.
• Смотрим конкурентов и смежные сферы: что хорошо, что плохо.
• Ищем позиционирование и пространство для концепции и стилистики.

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

В проекте на два спринта аналитика проводится в первый день. Если сроки сжатые, то аналитика проводится за четыре часа (тут гайд для проджектов, как ее проводить), потому что без неё совсем никак.

Концепция, стилистика, прототип — основа фирстиля и сайта.

Неуверенный дебют — проваленный проект. Что толку от соблюдения правил типографики, если у сайта нет концепции, стоковая стилистика и слабая логика? Поэтому это максимально напряженное время, когда нужно много и быстро думать.

В первый день работаем над концепцией. Это метафора или образ, который упрощает восприятие продукта и делает фирстиль узнаваемым. Например, девушка-юрист и типографика юридического договора у Norma. Для сравнения — legaltech-сайт без концепции.

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

Внутри каждой концепции:

• Описание метафоры и мудборд.
• Визуальные референсы.
• Шрифты и цветовая палитра (опцонально).

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

В типичном фрейме со стилистикой можно найти:

• Цвета и шрифты (теперь не опционально).
• Описание стилистики и референсы.
• Примеры первого экрана для наглядности.
• Скетч логотипа, если его нужно сделать на спринте на брендинг.

На противоположном фланге параллельно с концепцией и стилистикой проджект занимается прототипом главной страницы.

Сначала утверждаем общую логику и последовательность блоков

Потом — черновой копирайт

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

Логичный вопрос от зрителей: Что вы делаете, если клиент не принимает концепцию или стилистику?

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

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

Классический процесс на примере «Потока»:

• Третий день — первый экран.
  
• Четвертый день — первые три экрана.
• Пятый день — предфинал дизайна.

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

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

Small things matters. Во втором периоде придумываем интересные маленькие решения в тексте, иллюстрациях, сетке или анимациях, которые придают работе уникальность и улучшают общее впечатление

• Горизонтальный скрол и логотипы маркетплейсов в блендере на UpMarket.
• Тень в виде логотипа MainWallet на Bankex (да, иногда нецелевой аудитории эти маленькие вещи ни о чем не говорят)

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

Адаптивы делаем в для четырёх брейкпойнтов:

Верстка занимает у нас один-два дня, потому что используем Webflow. О том, почему верстаем только там, мы написали отдельную статью.

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

В конце расскажем, почему мы ведём проекты именно так:

• Пробежать 10 раз по 1 км проще, чем 10 км за раз. Та же история и с количествами решений по ходу проекта.
• Клиент, как правило, не дизайнер. Поэтому мы не заставляем его думать о дизайне и предлагаем выбрать одно из трёх проработанных решений.
• Мы не уходим на штрафной круг правок в конце, потому что все решения уже приняты по ходу.
• Когда проект перешёл во второй период, проджект может сразу взять ещё один. И при этом выдержать нагрузки без допинга.

Если есть желание обсудить наш процесс, можем перевести статью в овертайм и пообщаться в комментариях : )

#figma #design #webflow #процесс #projectmanagement