Дизайн
Embacy
4644

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

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

В закладки
Аудио

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

Наши особенности

1. Фигмопись, или ставим ежедневные отсечки

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

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

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

Figma понедельника, вторника и среды первого спринта​

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

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

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

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

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

4. Принимаем решения каждое утро

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

5. Прибираемся в Figma

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

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

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

Процесс

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

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

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

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

Тренерская установка

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

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

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

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

Дебют

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Второй период

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

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

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

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

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

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

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

Эндшпиль

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

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

​1440px — десктоп; 780px — планшет; 570px — горизонтальный мобайл; 320px — вертикальный мобайл. Под остальные разрешения адаптируем уже внутри Webflow

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

Тай-брейк

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

Послематчевая пресс-конференция

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

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

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

Делаем фирменные стили и сайты для айти-продуктов. Работаем со Skyeng, «Яндексом», МТС, ВТБ. Портфолио: http://be.net/embacy
{ "author_name": "Embacy", "author_type": "editor", "tags": ["\u043f\u0440\u043e\u0446\u0435\u0441\u0441","webflow","projectmanagement","figma","design"], "comments": 20, "likes": 55, "favorites": 226, "is_advertisement": false, "subsite_label": "design", "id": 122439, "is_wide": false, "is_ugc": false, "date": "Thu, 23 Apr 2020 15:49:15 +0300", "is_special": false }
Мегаплан
Как мы сделали приложение для work-life симбиоза: опыт Мегаплана
Готовы поспорить: вы решаете рабочие вопросы вне офиса, вечером и на выходных. А в рабочее время иногда отвлекаетесь…
Объявление на vc.ru
0
20 комментариев
Популярные
По порядку
Написать комментарий...
6

Ну и молодцы

Ответить
0

Спасибо, Евгений :)

Ответить
4

Огонь!

Ответить
0

Игорь, а что понравилось? Нам важно понимать для следующих материалов)

Ответить
6

1. «Без звёздной болезни»
2. Терминология - сразу понятен смысл спринта (имхо разъяснял бы на примерах ещё больше - эпики, бэклог, сториз - нигде пока не встречал также ясно как вы делаете)
3. Кейсы 🔥
4. Будет интересно 2-3 примера неудач или клиентского вампиризма, как преодолевать.
5. Отдельное спасибо за Webflow - прям жир.

Ответить
1

Спасибооо!
Самую большую неудачу прошлого года расписали тут: https://vc.ru/design/105071-16-veshchey-kotorye-my-mogli-sdelat-chtoby-spasti-nash-pervyy-proekt-iz-silikonovoy-doliny
Как что-то сложное и яркое еще произойдет - поделимся :)

Ответить
2

Годнота! Зафоловил вас на Беханс

Ответить
1

Воу, круто. Мы там чаще кейсы выкладываем, чем тут статьи :)

Ответить
0

А вы стримы/вебинары проводите/не?)

Ответить
4

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

Ответить
1

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

Ответить
2

Все хорошо, но только при условии адекватного заказчика. 50% наших хотят видеть 100% работы и только потом показывают шефу и вот тут начинаются 90% правок. 

Ответить
1

Это да))
Мы стараемся на берегу объяснить максимально подробно процесс и формат работы, понимаем, что некоторым будет некомфортно с работать с нами, а нам с ними. Поэтому и не нужно работать :)

Ответить
2

Эмбасси. Ай Лав ю..Помимо крутых проектов еще и отличные структурные мануалы!

Ответить
0

Спасибо, Александр :)

Ответить
0

брэкпоинт на 1920?)))

Ответить
1

в тексте вроде 1440

Ответить
0

а на 1200 какой размер контейнера будет? какой интервал брекпоинта берется?)

Ответить
0

Наш базовый десктоп 1440, но иногда делаем исключения и берем 1920 :)

Ответить
0

Это промо-страницы или продающие сайты? 
Если второе, то в тексте не увидел работы над продающими текстами - анализ ЦА, конкурентов и самой компании. 

Ответить

Прямой эфир