Интерфейсы
и дизайн-системы

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

Работать с нами проще, чем делать все своими силами.
Оценить проект

ПРИНЦИПЫ РАБОТЫ

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

ВАРИАНТЫ УСЛУГИ

Мы владеем десятками методов сбора и анализа требований. Обычно используем CJM, объектно-ориентированный дизайн, моделирование AS IS / TO BE, BPMN и UML диаграммы. Подбираем наиболее подходящие методы под конкретный проект.
Анализ бизнеса
Сбор и анализ требований
Постановка задачи
00
Предпроектное обследование
На выходе
Концепция проекта
Разработка профилей пользователей
Анализ аналогов и конкурентов
Разработка структуры системы
Анализ и приоритизация контента
Анализ объектов, параметров и функций

/01
На выходе
Профили пользователей

Разработка интерактивного прототипа
Разработка спецификации требований
Прототипирование
На выходе
Интерактивный прототип в Axure/proto.io

Проектирование

Проектирование информационной архитектуры
/02
00
/03
Структура системы в формате mindmap
Документ «Спецификация требований»
Разбираем примеры ключевых частей дизайна: шрифты, палитру, стилистику и референсы. Отсекаем всё лишнее и выбираем правильное направление.
01
Разработка moodboard
/01

Вариант 1. Постраничная отрисовка

Создание дизайн-концепции
/02
01
Подходит для проектов с большим количеством графики и уникальным контентом, который невозможно описать общими правилами. Например, для корпоративных сайтов и контентных систем.
На примере одной страницы отрабатываем итоговый вариант шрифтов, цветовой схемы и общей стилистики сайта.
/03
Отрисовка страниц / экранов
Отрисовываем страницы сайта, включая все состояния макетов. Порядок отрисовки согласовываем с разработчиками и заказчиком.
На выходе
Исходники макетов (.psd или .sketch)
Экспорт макетов и графики в png/svg
UiKit со всеми состояниями элементов
Диаграмма навигации для для мобильных приложений
Описание особенностей поведения интерфейса
На этапе разработки
Согласовываем и проверяем собранные страницы проекта с заказчиком
Консультируем разработчиков: участвуем в общих чатах и совещаниях
Дорабатываем логику и макеты по запросу разработчиков
Верстка упрощается за счет готовых макетов всех страниц
Преимущества
Заказчик видит и согласовывает дизайн всех страниц до верстки
Процесс работы

ПРИМЕРЫ ПРОЕКТОВ

Это проекты с большим количеством уникального контента, которые не предполагают увеличения объема системы. Поэтому мы реализовали их методом постраничной отрисовки.
DataArt
Корпоративный сайт
dataart.ru
смотреть все
fc-zenit.ru
Официальный сайт
kassir.ru
Kassir.ru
Билетный оператор
ФК «Зенит»
Быстрая подготовка макетов для больших систем
02
Преимущества

Вариант 2. Дизайн-система

Новым участникам проекта легко включиться в работу
В дальнейшем продукт можно развивать уже без нашего участия
Позволяет постепенно, но постоянно развивать продукт без героических редизайнов
Процесс работы
Разработка moodboard
/01
Создание дизайн-концепции
/02
Проработка элементов, компонентов и блоков

/03
Разработка принципов и стандартов
/04
Определяем принципы и стандарты, на которых будет основана дизайн-система. Это позволит сохранить логичность и согласованность системы при ее развитии. А новым сотрудникам будет проще разобраться в проекте и включиться в работу.
На основе прототипа и дизайн-концепции создаем библиотеку элементов и блоков будущей системы.
Разработка руководства по дизайн-системе
/05
Объединяем все подготовленные стандарты и принципы в единый документ. Эта информация доступна всем специалистам, которые работают или будут работать над проектом.
Создание шаблонов экранов/страниц
/06
На основе прототипа и дизайн-системы собираем несколько ключевых страниц. Они послужат примерами для верстальщиков и разработчиков — чтобы им была понятна логика сборки итоговых лейаутов.
Разработка графической спецификации
/07
Дополняем дизайн-систему описанием логики и механики работы сложных элементов интерфейса. Описываем и формализуем взаимодействие и различные состояния элементов, анимацию и валидацию.
На выходе
Исходники макетов (.psd или .sketch)
Экспорт макетов и графики в png/svg
Библиотека UI элементов, блоков и лейаутов
Диаграмма навигации для мобильных приложений
Графическая спецификация
Руководство по дизайн-системе
Что делаем во время разработки
Согласовываем и проверяем собранные страницы проекта с заказчиком
Консультируем разработчиков: участвуем в общих чатах и совещаниях
Дорабатываем логику и макеты по запросу разработчиков
02
Подходит для сервисов, стартапов и других сложных проектов.
Разбираем примеры ключевых частей дизайна: шрифты, палитру, стилистику и референсы. Отсекаем всё лишнее и выбираем правильное направление.
На примере одной страницы отрабатываем итоговый вариант шрифтов, цветовой схемы и общей стилистики сайта.
Узнайте,
как мы работаем

ПРИМЕРЫ ПРОЕКТОВ

Эти системы постоянно развиваются и видоизменяются. Мы создали для них полноценные дизайн-системы, которые помогают разработчикам добавлять новые функции и страницы, не привлекая дизайнеров.
nativeroll.tv
NativeRoll
Дизайн-система
смотреть все
lfacademy.ru
LF academy
Онлайн образование
ПОЛУЧИТЬ КОНСУЛЬТАЦИЮ
И ЗАКАЗАТЬ ПРОЕКТ
Для продуктивных команд, стартапов и компаний с собственной разработкой