Дизайн интерфейсов и бренда

1Когда к нам приходят

• «Сайт аккуратный, а заявок с него почти нет»

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

• Личный кабинет или CRM рисует программист

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

• Логотип есть, фирменного стиля нет

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

• «Скоро встреча с инвестором, а слайды не готовы»

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

2Что входит

• UX-исследование: интервью с клиентами, разбор конкурентов, карта пользовательских сценариев
• Кликабельные прототипы ключевых экранов и проверка их на пользователях
• Дизайн сайтов и лендингов с адаптивами под планшеты и смартфоны
• Интерфейсы веб-сервисов, личных кабинетов и CRM
• Дизайн-система и UI-кит в Figma: цвета, шрифты, кнопки, формы и их состояния
• Логотип, фирменный стиль и гайдлайн по его применению
• Презентации для продаж и инвесторов, редактируемые шаблоны для команды
• Размеченные макеты для разработчиков и сверка готовой вёрстки с дизайном
• Передача всех исходников: файлы Figma, иконки, изображения, экспорт для веба и печати

3Что вы получаете

• Сайт, понятный с первого экрана

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

• Меньше переделок в разработке

  Программисты собирают интерфейс из готовых компонентов по размеченным макетам. Меньше вопросов «а как это должно работать» и доработок после запуска.

• Единый облик компании в каждом канале

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

4Этапы и сроки

1. 01

   Бриф и исследование1–2 нед.

   Разбираем задачи бизнеса, аудиторию, конкурентов и текущую аналитику. Если есть возможность, говорим с вашими клиентами и менеджерами по продажам.

   На выходеКарта сценариев и требования к экранам

2. 02

   Прототипы1–2 нед.

   Собираем структуру и логику экранов в чёрно-белых прототипах. Согласуем путь пользователя до того, как тратить время на визуал.

   На выходеКликабельный прототип ключевых экранов

3. 03

   Визуальная концепция1 нед.

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

   На выходеУтверждённый стиль ключевых экранов

4. 04

   Дизайн всех экранов2–4 нед.

   Отрисовываем остальные страницы и состояния элементов, адаптивы для планшетов и смартфонов, собираем UI-кит.

   На выходеПолный комплект макетов и UI-кит в Figma

5. 05

   Передача в разработку3–5 дней

   Размечаем макеты, описываем поведение элементов, отвечаем на вопросы разработчиков и сверяем готовую вёрстку с дизайном.

   На выходеРазмеченные макеты и все исходники

5Как мы это делаем

• Не «красиво», а понятно

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

• Макеты, которые можно собрать

  Рисуем из компонентов, которые разработчик переиспользует, и сразу учитываем, на чём будет работать продукт: конструктор, CMS или своя разработка. Макет не расходится с тем, что увидит пользователь в браузере.

• ИИ для поиска вариантов, решения за дизайнером

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

6Вопросы