ЯБРУ — Дизайн

Погружение в проект

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

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

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

Если мы создаем проект для омниканальной среды, мы строим карту клиентского опыта (CJM), чтобы понять, как наши пользователи будут взаимодействовать с нашим продуктом через разные каналы.

Подготовка концепции

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

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

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

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

С помощью прототипа мы можем легко проверить, как наш продукт будет использоваться в реальной жизни. Если наш проект должен работать на мобильных устройствах, мы сначала создаем прототип мобильной версии (в соответствии с принципом mobile first).

Разработка дизайн-макетов

На этом этапе мы создаем окончательный дизайн наших страниц или экранов. Мы сочетаем структуру страниц из прототипа с стилем оформления из дизайн-концепции. Наши UI-дизайнеры решают несколько важных вопросов:

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

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

Готовят компонентную базу стандартных элементов интерфейса, собирают UI-кит или даже первую версию будущей дизайн-системы.

Работают над дизайном всех возможных состояний страницы, экрана, модулей и блоков интерфейса.

Подготавливают макет для верстки и передачи в разработку веб-технологами.

Готовят необходимый пакет служебной графики, продумывают анимацию интерфейсных элементов.

Финишная подготовка

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

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

Давайте вместе создадим нечто великое