{"id":8545,"title":"\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0437\u0430\u043a\u0443\u043f\u0438\u0442\u044c\u0441\u044f \u0431\u0430\u0442\u0430\u0440\u0435\u0439\u043a\u0430\u043c\u0438 \u0438 \u043d\u0435 \u043f\u0440\u043e\u0433\u043e\u0440\u0435\u0442\u044c","url":"\/redirect?component=advertising&id=8545&url=https:\/\/vc.ru\/special\/isource&placeBit=1&hash=2b5b7b247ca83e67628673cba216c312801b86af12a116e7df5c8ab9fae04e8c","isPaidAndBannersEnabled":false}
Дизайн
Embacy

Фигмопись и другие особенности нашего процесса в 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 км за раз. Та же история и с количествами решений по ходу проекта.
  • Клиент, как правило, не дизайнер. Поэтому мы не заставляем его думать о дизайне и предлагаем выбрать одно из трёх проработанных решений.
  • Мы не уходим на штрафной круг правок в конце, потому что все решения уже приняты по ходу.
  • Когда проект перешёл во второй период, проджект может сразу взять ещё один. И при этом выдержать нагрузки без допинга.

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

0
20 комментариев
Популярные
По порядку
Написать комментарий...

Ну и молодцы

7

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

0

Огонь!

4

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

0

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

6

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

1

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

2

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

1

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

0

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

4

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

1

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

2

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

1

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

2

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

0

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

0

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

1

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

0

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

0

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

0
Читать все 20 комментариев
Бот, который сделает маму счастливее

Kind Bot напечатает и отправит по почте фото вашей маме. В 2 клика.

Завод по производству идей. Как работают акселераторы, зачем они нужны стартапам и куда идти с идеей прямо сейчас

По данным Startup Genome, 9 из 10 стартапов терпят неудачу. Возможных причин «смерти» много: недостаточно протестированная гипотеза, неподтвержденная юнит-экономика, неверная стратегия или просто неудача в подходе к продажам.

Возник по просьбе бразильских банкиров и стал любимым напитком солдат во время Второй мировой: история Nescafe Статьи редакции

В 2021 году Nescafe — крупнейшее подразделение Nestle и бренд, который оценивается больше чем в $20 млрд. По собственным данным компании, в мире каждую секунду выпивают более 5000 чашек напитка.

Дегустация Nescafe National Museum
Как я заработал свой первый миллион просмотров на лонгридах

Мой опыт ведения текстового блога на «Виси», «Пикабу», «Хабре», Дзене и еще пачке площадок. Сколько потратил на них сил и какую отдачу в итоге получил.

Потратили $1 млн на клинику для профилактики здоровья зубов в Москве — и через десять месяцев закрыли проект

История о неудачном запуске монопродукта в стоматологии — его пришлось переформатировать.

Та самая клиника
Английский язык. Как это надо делать, если вернуть 2 года назад

Всегда считал себя неспособным к языкам, школу закончил, мягко говоря, с 0 знанием Английского языка. Как ,наверно, 95% населения нашей страны.

Как у меня украли 600 тысяч с карты, а Тинькофф нарушает федеральный закон

Спойлер: я НЕ вводил никуда код, НЕ переходил по ссылкам и НЕ сообщал данные карты.

Я всегда считал себя финансово грамотным человеком, сам когда-то работал в банке, соблюдал цифровую гигиену, держал деньги на нескольких счетах, не привязывал основную карту в непонятных сервисах, в 90% оплат пользовался Google Pay. Когда родственники присылали…

Из науки в IT: как создать свой стартап и стать преподавателем

Как перейти в IT из другой сферы? Как разработать курс, которому нет аналогов? Как студенту получить максимум пользы от занятий? Рассказывает преподаватель OTUS Сергей Окатов, руководитель курсов «Kotlin Backend Developer» и «Kotlin Developer. Basic».

Хочу кухню как у подруги: зачем в Циан сделали поиск квартир по фото

Рассказывает Юлия Зыкова, руководитель команды «Аудитория» в Циан.

Наследник Рокфеллера, сын Софи Лорен, боксёр и продюсер: история француза, обманувшего Рурка, Ван Дамма и других звёзд Статьи редакции

СМИ прозвали Кристофера Роканкура звёздным мошенником: его жертвами были голливудские знаменитости и американские предприниматели. Точная сумма ущерба от действий француза неизвестна, но сам он утверждает, что за свою жизнь «заработал» $40 млн.

Кристофер Роканкур и Наоми Кэмпбелл francetvinfo
Бизнес — как ребенок: как мамы совмещают свое дело с заботой о детях

Как совмещать бизнес и семью? Ко Дню матери своими историями поделились бизнесвумен, которые работают c ЮKassa и занимаются детьми. Читайте, как им удается сохранять жизненный баланс и добиваться успеха.

null