Ведёт конверсия
Начинаем с воронки и решения посетителя, потом рисуем, а не наоборот.
Дизайн
Интерфейсы, которые оценивают по заявкам, а не по красоте.
Дизайн для сайтов, у которых есть задача: строится вокруг решения, которое принимает посетитель, и отдаётся файлами, по которым разработчик соберёт всё без домысливания.
Из Figma в вёрсткуМакеты собраны на настоящих компонентах, а не склеены в плоскую картинку.
Сначала конверсияКаждый экран строится вокруг одного решения, которое должен принять посетитель.
Выдерживает живой контентРаскладки проверяются на длинных заголовках, отсутствующих картинках и крайних случаях.
Зачем это нужно
Дизайн чаще всего оценивают по тому, как он выглядит в презентации, а не по тому, что происходит после запуска. Поэтому сайты выходят с первым экраном, который ничего не сообщает, формами, которые спрашивают слишком много, и раскладками, разваливающимися от первого же реального текста.
Дизайн, который отбивает бюджет, начинается с решения, которое принимает посетитель, и убирает всё, что этому не помогает. Такой дизайн заодно выглядит продуманным — но порядок здесь важен.
Ясность работает лучше украшений
Больше всего заявок обычно приносят страницы, которые стали проще, а не те, которые стали красивее.
Дизайн определяет стоимость разработки
Макет, собранный на настоящей системе компонентов, быстрее верстается и куда дешевле расширяется.
Контент — это не «рыба»
Раскладки, которые работают только с идеальным текстом, ломаются на первой же неделе.
[Почему мы]
Четыре причины, по которым наш дизайн переживает встречу с реальной разработкой.
Процесс, а не импровизация
Изучение, прототип, дизайн, проверка вёрстки — одни и те же описанные этапы на каждом проекте.
Команда полного цикла
Разработчики смотрят макеты до передачи — ничего, что нельзя собрать быстро работающим, дальше не идёт.
Системы, а не экраны
Вы получаете библиотеку компонентов и токены — следующие двадцать страниц останутся единообразными и без нас.
[Что вы получите]
Файлы, по которым ваши разработчики соберут сайт, и систему, которая продолжает работать после запуска.
[ 01 ]
Логика и прототипы
Структура и сценарии решаются на схемах — до того, как начнётся спор о цветах.
[ 02 ]
Визуальный дизайн
Полный визуал в Figma — адаптивный, доступный и построенный на реальной шкале шрифтов и цветов.
[ 03 ]
Дизайн-система
Переиспользуемые компоненты и токены с описанием, чтобы будущие страницы не разъезжались.
[ 04 ]
Передача в вёрстку
Передача со спецификациями, состояниями и описанным поведением — или мы верстаем сами.
[ 05 ]
Посадочные страницы
Страницы под горячий спрос, построенные вокруг одной цели по конверсии.
[ 06 ]
Адаптивное поведение
Каждая контрольная ширина продумана, а не оставлена на импровизацию верстальщику.
[ 07 ]
Базовая доступность
Контраст, состояния фокуса и размеры кликабельных зон проверяются в рамках работы.
[ 08 ]
Раскладки под реальный контент
Макеты проверяются на длинном, коротком и отсутствующем контенте до передачи.
[Как проходит работа]
Три-шесть недель, причём структура согласуется до того, как начнётся вылизывание пикселей.
[ 01 ]
Погружение
Аудитория, воронка и решения, которые должна поддерживать каждая страница.
Неделя 1 [ 02 ]
Прототипы
Структура и иерархия на схемах — согласовать их дёшево, переделать потом дорого.
Недели 1–2 [ 03 ]
Визуальный дизайн
Полный интерфейс в Figma с настоящим набором компонентов за ним.
Недели 2–4 [ 04 ]
Система и спецификации
Токены, состояния и адаптивное поведение описаны для вёрстки.
Недели 4–5 [ 05 ]
Проверка вёрстки
Сверяем вёрстку с макетом и убираем расхождения до запуска.
На этапе сборки[Кому подходит]
Тем, чей сайт должен работать, а не просто представлять компанию.
Перед переделкой сайта
Вы знаете, что нынешний сайт не справляется, и хотите, чтобы редизайн опирался не на вкус.
Сервисы и SaaS
Сайты и продуктовые экраны, где ясность напрямую влияет на регистрации.
Интернет-магазины
Шаблоны категорий и товаров, где небольшие изменения структуры двигают выручку.
Профессиональные услуги
Компании, которым нужно выглядеть убедительно для клиента, сравнивающего три варианта.
Страницы под рекламу
Отдельные страницы, которые должны превращать платный трафик в заявки без переделки всего сайта.
Команды без дизайнера
Инженерные команды, которым нужна система, по которой можно собирать.
[Стоимость]
Проекты с фиксированной ценой, которая называется после созвона по объёму. Дизайн и вёрстку можно взять вместе или по отдельности.
Посадочная страница
45 000 – 95 000 ₽проект с фиксированной ценой
Одна страница, построенная вокруг одной цели по конверсии.
- Структура и прототип
- Полный адаптивный визуальный дизайн
- Направление текста и иерархия блоков
- Спецификации, готовые для вёрстки
- Один круг правок
Дизайн сайта
170 000 – 390 000 ₽проект с фиксированной ценой
Полноценный сайт с системой компонентов за ним.
- Погружение и прототипы
- Дизайн всех ключевых шаблонов
- Библиотека компонентов и токены
- Описанное адаптивное поведение
- Проверка базовой доступности
- Проверка вёрстки во время разработки
Дизайн-система
По запросупроект с фиксированной ценой
Продуктовым командам, которым нужна описанная система, а не отдельные страницы.
- Инвентаризация и аудит компонентов
- Архитектура токенов
- Описанные правила использования
- Передача библиотеки в Figma
- Разбор системы с вашей командой
Дизайн естественно сочетается с разработкой: если брать вместе, исчезают потери на передаче и вёрстка стартует раньше. На тарифе «Под ключ» комплексного SEO часы дизайна входят ежемесячно.
Не понимаете, что мешает — дизайн или SEO?
Пришлите адрес страницы. Честно скажем, у вас проблема с видимостью или с конверсией, — это разные задачи и разные бюджеты.
Дизайн, который себя окупает
Созвон по объёму, фиксированная цена и работа, которую оценивают по заявкам.
[Частые вопросы]
Да, только в ней — с настоящими компонентами, токенами и описанными состояниями, чтобы передача не требовала перевода с языка на язык.
Да. Если брендбук есть — работаем внутри него; если нет, задаём необходимый минимум: шкалу шрифтов, цвета и отступы.
Обычно да, и так выходит дешевле. Если у вас свои разработчики, передаём макеты с полными спецификациями и проверяем вёрстку перед запуском.
Два на этапе прототипа и два на этапе визуала. На практике, когда структура согласована на прототипе, визуальные круги почти не нужны.
Да — начать с одного шаблона, на который идёт много трафика, часто выгоднее всего, и мы скажем, если у вас именно этот случай.