Как мы создаем дизайн в Пиробайте

22 июля 2025

Реитинг

0

Время просмотра

5 минут

Количество просмотров

0

Дизайн — это второй большой этап после аналитики. Он включает в себя работу над пользовательским опытом (UX) и визуальной частью интерфейса (UI). В этой статье расскажем, как мы подходим к дизайну веб-сервисов и мобильных приложений: от этапов до важных нюансов.

Этапы дизайна сайта или мобильного приложения

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

Ключевые UX-решения появляются уже на этапе анализа аудитории и проработки структуры. Все артефакты аналитиков затем дорабатываются дизайнерами во время проектирования прототипа. Это — следующий этап.

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

Прототип — это интерактивная версия будущего веб- или мобильного приложения. На нем вы сможете «опробовать» проект до начала разработки: пройтись по разным сценариям, проверить на удобство, внести правки и утвердить итоговый вариант, по которому потом будет делаться дизайн.

Прототип

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

По вашему желанию можем подготовить интерактивный прототип. Вы сможете открыть его на устройстве, перейти по экранам и посмотреть, как пользователь проходит путь.

Как только прототип согласован с вами — все, дальше в ход вступает визуальная часть.

Разработка дизайн-концепции

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

Мудборд

Дизайн создается с опорой на ваши визуальные предпочтения. Вам не нужно разбираться в силовых линиях или модульных сетках, достаточно показать, что вам близко, а мы сделаем так, чтобы интерфейс был не только красивым, но логичным в использовании.

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

Иногда нас сходу спрашивают, мол, что будет, если дизайн не понравится? Отвечаем: будем работать до тех пор, пока результат не устроит. Потому что если визуал не откликается в начале, он не понравится и в финале. А значит, продолжать просто нет смысла — велик риск откатиться с предрелизной версии к самым первым экранам.

Ориентировочный таймлайн разработки концепции такой: около недели уходит на прототипы, около двух — на дизайн ключевых экранов. После согласования, в зависимости от объема проекта, приступаем к дизайну внутренних страниц.

Проработка UI-кита

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

UI-кит

Это экономит время, сохраняет порядок в проекте и делает интерфейс профессиональным. UI-кит на одном из наших проектов:

Без UI-кита интерфейс будет неоднородным: два разработчика запрограммируют одинаковые элементы по-своему — и пользователь перестанет понимать, как работать с системой:

  • Это что, кнопка?
  • Эта штука работает как кнопка или как переключатель?

Поэтому дизайнер унифицирует все заранее. Для крупных проектов мы разрабатываем уже дизайн-систему.

В рамках концепции разрабатываем еще и логотип, если его нет. Бывает, что старый вариант просто не вписывается в новый дизайн — тогда предлагаем «быстролого», который точно передает характер бизнеса. Пример такого лого можно посмотреть в кейсе Crabbit.

Обновленный лого Crabbit

После дизайна запускаются сразу два этапа — написание бэклога (или создание ТЗ) и верстка. Про это читайте в следующей статье.

Спасибо за оценку!

0 оценок, среднее 0 из 5

Вверх
Используя данный сайт, вы даете согласие на использование файлов cookie. Политика обработки персональных данных.
Я согласен