Проектирование и дизайн
Создаем интерфейсы, которые выполняют задачи бизнеса и удобны для пользователей
Что такое проектирование?
Проектирование — обязательный этап в разработке сложных систем. Он представляет собой процесс генерации решений, их описания и визуализации.
В ходе проектирования происходит преобразование потребностей, задач и идей со стороны заказчика в формат, подходящий для передачи на этап технической реализации.
Понимание задачи
На первом этапе важно понять, что мы собираемся делать и зачем.
Процесс
понимания задачи сопровождается сбором и проработкой информации
Бизнес
Разбираемся, как он работает и как проектируемый веб сервис ему помогает.
Знания
Выясняем, какие профессиональные знания лежат в основе предметной области проекта и изучаем основы.
Пользователи
Определяем, какие есть роли пользователей, что их отличает и какие цели у них на веб сервисе.
Референсы
Изучаем конкурентов и схожие по механике веб сервисы. Ищем удачные и неудачные реализации.
Сценарии
Понимаем процессы взаимодействия пользователей с бизнесом и веб сервисом.
Изучаем целевую аудиторию
Для проектировщика будет важно понять, кто именно будет пользоваться будущим сервисом.
Прорабатываем сценарии поведения пользователей
Проектирование веб сервиса выстраивается вокруг того, как пользователи взаимодействуют с продуктом.
Согласовываем требования к проекту
После проработки информации мы выделяем ряд основных проблем / решений, согласовываем их с заказчиком. На выходе получаем документ, определяющий дальнейшие требования к проектированию.
- Информация о проекте
- Гипотезы и решения
- Конкретные функции
- Важности, которые нужно учесть
Разработка структуры
Формируем структурный прототип на уровне частей, разделов, страниц, элементов.
При помощи структурного прототипа мы отвечаем на вопросы
Что?
Какие сущности и функции у нас есть в веб сервисе
Как?
Из каких частей, разделов, страниц состоит веб сервис, как осуществляется навигция, в каком формате выводится информация
Высокодетальный прототип
Делаем прототипы, приближеные по своему внешнему виду к итоговой веб-версии. Таким образом, заказчик сразу понимает как будет выглядеть будущий интерфейс.
Посмотрите подробное видео о том, как мы создаем прототипы:
Дизайн система
Макеты — это не просто картинки. За счет грамотно проработаной архитектуры макетов в них легко разобраться, просто редактировать, есть возможность гибкого масштабирования проектов. Все элементы макетов типизированы и стандартизированы.
Атомы
Набор мельчайших деталей веб сервиса. Задаются вначале, далее все собирается из них, как из конструктора
- Кнопки
- Поля ввода
- Прочие мелкие элементы
Элементы
Изменили один раз — изменился везде. Типовые части веб сервиса, которые повторяются много раз
- Карточки
- Таблицы
- Секции
Типографика
Значения текстовых блоков приведены к единому стандарту, чтобы текст хорошо читался, а пользователю было удобно воспринимать информацию на страницах.
- Наборный текст
- Заголовки
- Ссылки, тексты на кнопках
Состояния
Различные состояния объектов, которые продуманы и визуализированы в макете.
- Активные и отключеные состояни
- Состояния ошибок
- Пустые состояния
Фреймворк
Продуманый и надежный визуальный каркас веб сервиса, является надежным «скелетом» всей системы.
- Интерфейс
- Навигационные принципы
- Реализация действий и функций
Визуальное оформление
Приводим в финальный вид цвета, шрифты, иконки, иллюстрации, продумываем стили элементов — степень закругления углов, тени, обводки.
Проектная документация
Сопровождаем макеты документацией с описанием логики работы функций. Она позволит любым исполнителям понять, как работает та или иная часть проекта, а также быстро и удобно ознакомиться со всем проектом.
Результаты этапа проектирования
Все, что было разработано позволяет сделать оценку технической реализации проекта в плане стоимости и сроков, составить план работ и передать проект техническим разработчикам. По результатам этого этапа у заказчика возникает понимание того, как будет выглядеть и работать будущий веб сервис.
Что мы имеем в итоге:
Интерфейс,
спроектированный с учетом бизнес целей заказчика и сценариев поведения пользователей
Макеты
визуального прототипа, отражающие визуальную часть и необходимые чтобы реализовать фронтенд
Презентация
всех реализованых решений в удобном формате
Документация
с описанием логики работы веб сервиса и отдельных его частей — для корректной реализации функционала
Поделимся опытом
Мы запускали разные проекты, поэтому можем подсказать, о чем нужно подумать с самого начала, еще до разработки.