Дизайн сайта и портала

Подробно

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

С чего начинается дизайн портала

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

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

Прототипы до визуального дизайна

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

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

Визуальный дизайн и UI-кит

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

Результат этапа - макеты всех типовых страниц и UI-кит (библиотека готовых элементов интерфейса: кнопок, полей, таблиц, карточек, уведомлений с описанием всех состояний). UI-кит экономит время разработки и сохраняет единый вид сайта, когда через год нужно добавить новый раздел.

Адаптив под смартфоны и планшеты

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

Дизайн для сложных сайтов и кабинетов

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

Демо-проекты студии Капиталика, Умникум и Терапис показывают, как мы подходим к таким интерфейсам: одна главная задача на экране и минимум лишних действий.

Передача в разработку и стоимость

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

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