Проектирование и дизайн

Создаем интерфейсы, которые выполняют задачи бизнеса и удобны для пользователей

Что такое проектирование?

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

В ходе проектирования происходит преобразование потребностей, задач и идей со стороны заказчика в формат, подходящий для передачи на этап технической реализации.

Понимание задачи

На первом этапе важно понять, что мы собираемся делать и зачем.

Процесс
понимания задачи сопровождается сбором и проработкой информации

Бизнес

Разбираемся, как он работает и как проектируемый веб сервис ему помогает.

Знания

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

Пользователи

Определяем, какие есть роли пользователей, что их отличает и какие цели у них на веб сервисе.

Референсы

Изучаем конкурентов и схожие по механике веб сервисы. Ищем удачные и неудачные реализации.

Сценарии

Понимаем процессы взаимодействия пользователей с бизнесом и веб сервисом.

Изучаем целевую аудиторию

Для проектировщика будет важно понять, кто именно будет пользоваться будущим сервисом.

Пример проработанного портрета пользователя из проекта сервиса по аренде серверов

Прорабатываем сценарии поведения пользователей

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

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

Согласовываем требования к проекту

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

  • Информация о проекте
  • Гипотезы и решения
  • Конкретные функции
  • Важности, которые нужно учесть

Разработка структуры

Формируем структурный прототип на уровне частей, разделов, страниц, элементов.

При помощи структурного прототипа мы отвечаем на вопросы

Что?

Какие сущности и функции у нас есть в веб сервисе

Как?

Из каких частей, разделов, страниц состоит веб сервис, как осуществляется навигция, в каком формате выводится информация

Пример структурного прототипа по одному из наших проектов

Высокодетальный прототип

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

Посмотрите подробное видео о том, как мы создаем прототипы:

Дизайн система

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

Атомы

Набор мельчайших деталей веб сервиса. Задаются вначале, далее все собирается из них, как из конструктора

  • Кнопки
  • Поля ввода
  • Прочие мелкие элементы

Элементы

Изменили один раз — изменился везде. Типовые части веб сервиса, которые повторяются много раз

  • Карточки
  • Таблицы
  • Секции

Типографика

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

  • Наборный текст
  • Заголовки
  • Ссылки, тексты на кнопках

Состояния

Различные состояния объектов, которые продуманы и визуализированы в макете.

  • Активные и отключеные состояни
  • Состояния ошибок
  • Пустые состояния

Фреймворк

Продуманый и надежный визуальный каркас веб сервиса, является надежным «скелетом» всей системы.

  • Интерфейс
  • Навигационные принципы
  • Реализация действий и функций

Визуальное оформление

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

Сравните прототип до визуального оформления и после

Проектная документация

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

Пример проектной документации по одному из проектов

Результаты этапа проектирования

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

Что мы имеем в итоге:

Интерфейс,

спроектированный с учетом бизнес целей заказчика и сценариев поведения пользователей

Макеты

визуального прототипа, отражающие визуальную часть и необходимые чтобы реализовать фронтенд

Презентация

всех реализованых решений в удобном формате

Документация

с описанием логики работы веб сервиса и отдельных его частей — для корректной реализации функционала

Поделимся опытом

Мы запускали разные проекты, поэтому можем подсказать, о чем нужно подумать с самого начала, еще до разработки.

1
Расскажите о своем проекте
Позвоните или напишите нам любым удобным способом
2
Мы разберемся в задаче
У нас это занимает до 2х недель, все это время мы общаемся с вами о проекте и это бесплатно
3
Составим план разработки, стоимость и сроки
Расскажем про разные варианты реализации, поможем выбрать лучший