Дизайн интерфейсов для систем с данными
Интерфейс у нас рисует тот же состав, который разбирается в данных и интеграциях. Поэтому экран знает, откуда берется каждое поле, и не обещает того, чего система не умеет.
- разложено по жизненным ситуациям в каталоге портала
- 1725 услуг
- разведено в интерфейсе образовательного центра
- 7 аудиторий
- переработано на живом магазине, по частям
- 6 разделов
- работа внутри чужого фирменного стиля — «Мои Документы»
- Брендбук
Кому подходит
Проектам, где интерфейс упирается в данные: каталог с фильтрами, личный кабинет, портал с ролями, административная часть.
Кому не подходит
Сайту-визитке и одностраничнику: там дизайн-система не окупится, а без нее наш подход теряет смысл. Отдельную иллюстрацию или баннер мы тоже не рисуем.
Что получаете
Дизайн-систему и макеты, в которых прописаны сетка, размеры, состояния и поведение на узком экране. По ним верстают, не спрашивая автора.
Что входит
Проектирование
Структура разделов и маршруты аудиторий. У образовательного центра, например, их семь — от бухгалтера до специалиста по охране труда, — и каждая ходит по сайту своей дорогой.
Прототип живым сайтом
Работающие страницы вместо схемы. На них проверяется то, что на макете выглядит решенным: сколько шагов до цели, что происходит с пустым списком и куда попадает человек, нажав не туда.
Дизайн-система
Сетка, шрифтовая шкала, цвета, состояния элементов и набор блоков. Из нее потом собираются новые страницы — в том числе без нас.
Экраны
Каталог и карточка, корзина и оформление, кабинет, формы, административные разделы. Плюс состояния, о которых забывают: пусто, ошибка, загрузка, длинное название.
Иконки и графика
Свой набор знаков под разделы и функции, а не чужая библиотека: в одном магазине медицинского оборудования их понадобилось двадцать шесть.
Передача в разработку
Макеты отдаются так, чтобы их собрали без нас: с сеткой, размерами, состояниями и правилами поведения на узком экране. Макеты отдаются так, чтобы их собрали без нас: с сеткой, размерами, состояниями и правилами поведения на узком экране.
Чего не делаем: пользовательских исследований и тестирования на пользователях — этого у нас нет, и заявлять его мы не будем. Брендинг, логотипы и фирменный стиль тоже не наша работа: мы про интерфейс.
Работы по этой услуге
В одной из этих работ мы делали только дизайн, а собирала магазин команда заказчика. В остальных дизайн шел вместе с разработкой — и это правило, а не совпадение.
Порталы МФЦ
Государственные и муниципальные услуги для физических, юридических лиц и ИП.
SportPoint
Интернет-магазин спортивных товаров: запуск, интеграции и постепенный редизайн.
OHH.RU
Интернет-магазин медицинского оборудования.
АЭФ Консалт
Сайт образовательного проекта международного центра делового развития.
Байк Ленд
Торговая компания, интернет-магазин и сеть мотосалонов в Москве и других городах России.- 160+проектов с 2009 года
Смотреть все работы
Интернет-магазины, порталы, корпоративные сайты и внутренние системы — от разработки с нуля до многолетнего развития.
Как идет работа
Разбор
Смотрим продукт, данные и то, что уже работает. Отдельно спрашиваем про административную часть: ее обычно не показывают, а работают в ней каждый день.
Структура и прототип
Разделы и маршруты собираем сразу живыми страницами. На них видно то, что на макете выглядит решенным: сколько шагов до цели, где список пустой, что делать с длинным названием в две строки.
Система на двух экранах
Основу собираем на самом простом и самом плотном экране сразу. На них проверяется, выдержит ли сетка карточку с восемью характеристиками и не развалится ли фильтр на узком телефоне.
Передача и надзор
Отдаем макеты с размерами и правилами и остаемся на связи, пока идет верстка. Вопрос по верстке стоит дешевле, чем разбор готового результата.
Инструменты
FigmaДизайн-системаПрототип на живых страницах
Основа
Модульная сеткаШрифтовая шкалаСостояния элементовАдаптивность
Что рисуем
Каталог и карточкаКорзина и оформлениеЛичный кабинетАдминистративные разделыИконки
Вопросы и ответы
Делаете дизайн отдельно от разработки?
Делаем: в наших работах есть магазин медицинского оборудования, который мы нарисовали, а собирала команда заказчика. Но чаще дизайн у нас идет вместе с разработкой, и это не организационное удобство — так на экране не появляется поля, которого нет в системе.
Проводите ли вы исследования и тестирование на пользователях?
Нет. Ни интервью, ни юзабилити-тестов мы не проводим и не будем это заявлять. Опираемся на процессы заказчика, на данные его систем и на то, как ведут себя похожие продукты, которые мы вели годами.
Почему цена зависит от того, что у вас уже есть?
Потому что основная работа — не отрисовка экранов, а проектирование: структура, маршруты, правила поведения элементов. Если дизайн-система или готовая структура уже есть, мы отталкиваемся от них и рисуем только недостающее.
Зачем дизайн-система, если нужен просто красивый сайт?
Затем, что сайт живет дольше запуска. Без системы каждая новая страница рисуется заново, и через год у продукта четыре вида кнопок и три сетки. С ней новые разделы собираются из готового — в том числе вашими силами.
Наш подрядчик сможет собрать ваш дизайн?
Да, макеты для этого и готовятся: сетка, размеры, состояния элементов и поведение на узком экране описаны в них, а не остаются в голове у автора. Один такой проект уже собран чужой командой.
Можно обновить дизайн, не останавливая сайт?
Можно, и мы так делали: у спортивного магазина обновленный облик выходил частями, и каждая часть обязана была работать рядом со старыми экранами. Иногда правильнее и вовсе сохранить привычную структуру — у сайта завода мы оставили ее осознанно, обновив все остальное.
Как это выглядит на уровне отдельного элемента — состояния, размеры, текст на кнопке — разобрано в блоге.
