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

Сайт Figma
Перейти

Преимущества

Назад
Вперед

Доступно онлайн

Для просмотра работы в Figma не требуется авторизация или специальное ПО: макеты можно смотреть и комментировать по ссылке в браузере. Это делает процесс прозрачным, упрощает коммуникацию с дизайнером и ускоряет внесение правок в макеты.
Доступно онлайн

Командная работа из любой точки мира

Дизайнеры, иллюстраторы и верстальщики могут заходить и изменять макеты Figma онлайн в любое время, где бы они не находились. Это делает командную работу более гибкой, простой и комфортной.
Командная работа из любой точки мира

Активное сообщество

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

Интерактивный прототип готов к вашим комментариям!

Режим просмотра Figma позволяет организовать итерационный показ макетов. Ощутите себя пользователем вашего сайта, взаимодействуя с ним через навигационные элементы. Оставляйте комментарии к макетам в тех местах, где они необходимы.
Интерактивный прототип готов к вашим комментариям!

Дизайн-система — легко

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

Как построен процесс?

01

Брифинг и документы

2–5 рабочих дней
Вперед
  • Вы оставляете заявку.
  • Мы письменно или через созвон уточняем запрос.
  • Готовим смету и коммерческое предложение, отправляем на согласование.
  • Запрашиваем ваши реквизиты, высылаем договор и счет на предоплату.
  • Этапность обсуждается перед стартом проекта.
Есть возможность по договоренности изменить стандартный процесс.
Результат этапа:
  • Cсылка на смету (Google Sheets)
  • Ссылка на коммерческое предложение (Google Docs)
  • Заполненный договор (.docx)
  • Счет на предоплату (.pdf)
02

Прототип, структура сайта, ТЗ, таблица для наполнения контентом

5–10 рабочих дней
Вперед
  • После получения предоплаты мы приступаем к разработке прототипа и технического задания — ТЗ. Запрашиваем у вас дополнительную информацию и контент.
  • Готовим прототип и ТЗ, высылаем на согласование. Вы согласовываете прототип.
  • Вносим правки в прототип и ТЗ, если требуется. На число правок ограничений нет, но есть лимит на число итераций, как правило, их две.
  • Готовим Google-таблицу для сбора контента и мета-информации страниц. Утверждаем этап.
Результат этапа:
  • ТЗ (Google Docs)
  • Интерактивный прототип (версия для ПК; ссылка на просмотр Figma)
  • Таблица для сбора контента (Google Sheets)
03

Дизайн-концепция

5–10 рабочих дней
Вперед
  • После согласования прототипа и ТЗ мы переходим к разработке дизайн-концепции.
  • Собираем и согласуем с вами список визуальных референсов.
  • Разрабатываем дизайн-концепт. Как правило, это главная страница сайта (версия для ПК). Высылаем макет вам на согласование.
  • Вносим правки в дизайн-концепцию, если требуется. Утверждаем этап.
Результат этапа:
  • Список референсов (ссылка для просмотра Figma)
  • Дизайн-концепт сайта (ссылка для просмотра Figma)
04

Дизайн-макеты, подготовка к верстке

5–15 рабочих дней
Вперед
  • После согласования дизайн-концепции мы переходим к разработке дизайн-макетов внутренних страниц сайта.
  • Разрабатываем дизайн-макеты (версия для ПК). Высылаем вам на согласование.
  • Вносим правки в дизайн-макеты, если требуется. Утверждаем этап. Подписываем акт.
Результат этапа:
  • Интерактивные дизайн-макеты сайта (ссылка для просмотра Figma)
05

Верстка и программирование

5–20 рабочих дней
Вперед
  • После согласования дизайн-макетов, подписания акта и получения оплаты мы переходим к верстке и программированию веб-сайта.
  • Верстаем страницы, включая адаптивные версии. Высылаем на согласование на тестовом домене. Вносим правки в верстку, если требуется.
  • Организуем Collections — базу данный Webflow. Настраиваем функционал сайта и внешние интеграции. Подключаем сервисы аналитики. Высылаем на согласование на тестовом домене. Вносим правки, если требуется. Утверждаем этап. Подписываем акт. Получаем оплату.
Результат этапа:
  • Опубликованный на тестовом домене сайт с утвержденными версткой и функционалом, анимацией, который хорошо отображается на всех устройствах.
06

Релиз, инструкции, гарантийный период и сопровождение

Вперед
  • После подписания акта и получения оплаты мы публикуем сайт на боевом домене.
  • Передаем документ с доступами к сайту и полезными ссылками. В него включаем ссылку на дизайн-макеты с возможностью копирования.
  • По договоренности составляем и записываем инструкции по управлению сайтом.
  • После релиза начинаем отсчет гарантийного периода, который как правило составляет 3 месяца.
  • По договоренности обсуждаем и организуем техническую поддержку сайта.
Результат этапа:
  • Файл с доступами и полезными ссылками (Google Docs)
  • Инструкции по управлению сайтом (ссылки на видео в Loom, Google Docs)
  • Запуск гарантийного периода
  • Опционально: запуск технической поддержки

Экспертиза Atman

Системный подход

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

Прозрачный итеративный процесс

В проект включено 3 шага внутри Figma: прототип, дизайн-концепт и дизайн-макеты. На каждом шаге предусмотрен показ результата и прием замечаний. Итерации замечаний отражаем в Figma — можно увидеть, как улучшается макет после внесения изменений.
Прозрачный итеративный процесс

Плагин-пак для проектов

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

Передаем доступы и исходники

По завершению проекта предоставляем файл с доступами, в котором содержатся ссылки на просмотр и редактирование проекта в Figma. Кроме того, передаем исходники в формате .fig и .pdf.
Передаем доступы и исходники

Примеры проектов

Назад
Вперед
blueocean.dev
blueocean.dev

blueocean.dev

blueocean.dev

Корпоративный сайт
Финансы
ecokorm.ru
ecokorm.ru

ecokorm.ru

ecokorm.ru

Корпоративный сайт
Животноводство
conf.ontico.ru
conf.ontico.ru

conf.ontico.ru

conf.ontico.ru

Проектирование и дизайн
Мероприятия
gb.ru — digest MBA
gb.ru — digest MBA

gb.ru — digest MBA

gb.ru — digest MBA

Имиджевый лендинг
Образование

Хотите свой проект?

Заполните бриф — мы ответим и обсудим детали. Или напишите и мы заполним бриф за вас: hi@atman.pro.

Тип проекта

Можно выбрать несколько вариантов.

Детали

Опишите вашу задачу текстом. Что еще можно приложить:

  • Ссылку на заполненный бриф (скачать);
  • Ссылки на визуальные референсы к проекту;
  • Ссылки на ваш логотип и брендбук.

Бюджет *

Сроки *

Процесс

Можно выбрать несколько вариантов.

Спасибо за интерес!

Как правило, мы отвечаем в течение 1–3 рабочих дней. Если не хотите ждать, пишите: hi@atman.pro.
Что-то пошло не так. Проверьте, все ли обязательные поля вы заполнили и попробуйте снова.