Процесс Пиробайта изнутри: как мы создаем дизайн интерфейсов, который приносит результат
В этой статье на собственном примере покажем, как создаем дизайн веб-сервисов и приложений, который помогает превращать посетителей в лояльных клиентов.
Этапы дизайна сайта или мобильного приложения
Дизайн начинается сразу после аналитики. Он включает в себя работу над пользовательским опытом (UX) и визуальной частью интерфейса (UI).
Мы начинаем продумывать UX еще на предпроектной аналитике. После подписания договора и передачи проекта в заботливые руки проджект-менеджера, аналитики проводят с вами бриф, формируют видение и изучают конкурентов.
Ключевые UX-решения появляются уже на этапе анализа аудитории и проработки структуры. Все артефакты аналитиков затем дорабатываются дизайнерами во время проектирования прототипа. Это — следующий этап.
Проектирование прототипа
Прототип — это интерактивная версия будущего веб- или мобильного приложения. На нем вы сможете «опробовать» проект до начала разработки: пройтись по разным сценариям, проверить на удобство, внести правки и утвердить итоговый вариант, по которому потом будет делаться дизайн.
Прототип делается черно-белым — специально, чтобы не отвлекать вас на картинки и визуальные эффекты. Сейчас важно сосредоточиться на логике и работе интерфейса, а визуальный стиль мы обсудим позже.
По вашему желанию можем подготовить интерактивный прототип. Вы сможете открыть его на устройстве, перейти по экранам и посмотреть, как пользователь проходит путь.
Как только прототип согласован с вами — все, дальше в ход вступает визуальная часть.
Разработка дизайн-концепции
Дизайн-концепция — это один или несколько ключевых страниц, которые задают визуальный стиль будущему сайту. Дизайнер собирает требования, выясняет ваши предпочтения, на основе этого готовит мудборд, а после проводит мозговой штурм с командой.
Дизайн создается с опорой на ваши визуальные предпочтения. Вам не нужно разбираться в силовых линиях или модульных сетках, достаточно показать, что вам близко, а мы сделаем так, чтобы интерфейс был не только красивым, но логичным в использовании.
Перед тем как презентовать вам общую концепцию, мы с коллегами проводим внутреннюю приемку. По сути это репетиция, но в кругу своих, чтобы убрать все шероховатости, которые могут помешать на демо.
Иногда нас сходу спрашивают, мол, что будет, если дизайн не понравится? Отвечаем: будем работать до тех пор, пока результат не устроит. Потому что если визуал не откликается в начале, он не понравится и в финале. А значит, продолжать просто нет смысла — велик риск откатиться с предрелизной версии к самым первым экранам.
Ориентировочный таймлайн разработки концепции такой: около недели уходит на прототипы, около двух — на дизайн ключевых экранов. После согласования, в зависимости от объема проекта, приступаем к дизайну внутренних страниц.
Проработка UI-кита
Перед дизайном последующих экранов сайта или приложения мы разрабатываем UI-кит: продумываем все компоненты, из которых состоит интерфейс (типографика, цвета, иконки, кнопки, списки, таблицы и т.д) собираем их в единое место, а затем используем как конструктор.
Это экономит время, сохраняет порядок в проекте и делает интерфейс профессиональным.
Без UI-кита интерфейс будет неоднородным: два разработчика запрограммируют одинаковые элементы по-своему — и пользователь перестанет понимать, как работать с системой:
-
Это что, кнопка?
-
Эта штука работает как кнопка или как переключатель?
Поэтому дизайнер унифицирует все заранее. Для крупных проектов мы разрабатываем уже дизайн-систему.В рамках концепции разрабатываем еще и логотип, если его нет. Бывает, что старый вариант просто не вписывается в новый дизайн — тогда предлагаем «быстролого», который точно передает характер бизнеса. Пример такого лого можно посмотреть в кейсе Crabbit.
После дизайна запускаются сразу два этапа — написание бэклога (или создание ТЗ) и верстка.
Лучшее в блогах
Вам понравится
После успешного переезда сайта важно не просто сохранить позиции, а задать новый вектор роста. Следующий логичный шаг — переключиться с режима «удержать» на режим «расти». Мы решили проверить, может ли информационный контент стать двигателем органики. Спойлер: может.
Есть один сигнал, который мы чаще всего слышим от собственников. Маркетинг вроде присутствует. Что-то продаётся, реклама крутится, контент выходит. А ощущение — как будто бизнес едет с поднятым ручником: формально движется, но медленно и точно не туда, куда хотелось бы.
Российская платформа Picvario DAM (Digital Asset Management) привлекла 30 млн рублей от венчурного фонда MalinaVC. Инвестиции будут направлены на масштабирование платформы, которая стала ключевым инструментом импортозамещения для крупного бизнеса.
Неделя рекламы
Энциклопедия обмана