Содержание
Создание концепции
Сделать 1-й шаг можно, если имеется уже сформированная идея. Однако что требуется в самом начале? Прежде всего — изучить нишу, к которой относится будущий продукт, его целевую аудиторию и кейсы. Это поможет в изучении потенциальных клиентов и создании интерфейса, который будет оптимален для каждого пользователя.
Эта стадия может затронуть такие нюансы: положение и величина форм или кнопок, размер и т.д.
Мозговой штурм и эскизы
При уже определённой концепции проекта можно продвигаться к следующей стадии — мозговому штурму. Он потребуется для превращения идеи интерфейса в реальность. Будет достаточно обычной авторучки и бумажного листка — более оперативный вариант, например чем Photoshop.
Диаграмма переходов
Создав эскиз, мы получаем структуру интерфейса. Однако, каким должно быть пользовательское взаимодействие с ним? Здесь на помощь приходит User Flow Diagram. Благодаря ей иллюстрируется логика продукта, подробно показываются все методы взаимодействия пользователя с интерфейсом, дорожные карты таких взаимодействий, а также состояние, в котором находится интерфейс на всех этапах.
Утверждение диаграммы переходов, а также структуры
Когда закончена работа над эскизами интерфейса и диаграммами переходов, требуется их утверждение заказчиком. Переходы и структура лежат в основе последующей работы с интерфейсом. По этой причине мы стоим на месте до получения подтверждения. Если потребуется изменять будущий интерфейс, разумнее всего сделать это именно на данном этапе, а заказчик сэкономит своё время и средства.
Выбор стиля интерфейса
После утверждения эскизов клиентом, предстоит следующий шаг. Он состоит в подборе стиля для интерфейса. Здесь может быть огромное разнообразие видов от минимализма до скевоморфизма. На этой стадии заказчик может прислать ссылки на примеры предпочитаемых стилей. Также нужно поинтересоваться планами заказчика относительно обозримого будущего продукта. Мы изучаем актуальные тренды и называем время, нужное для разработки и внедрения дизайна.
Утверждение стиля
На этой стадии важно донести важность использования того или иного дизайнерского решения. Заказчик может быть не согласен с отдельными моментами, если не получит полную информации об интерфейсе и не узнает о причинах возможных проблем. Конечная цель состоит в завершении обсуждения с определением варианта, удовлетворяющего и нас, и заказчика.
Прототипирование, дизайн и их демонстрация
По завершении всех перечисленных этапов можно начинать разработку и показ клиенту окончательного варианта дизайна. Демонстрация бывает различной. Беря за основу свой опыт, мы даём рекомендации.
Wireframe
Эта форма поможет быстрее всего реализовать ваши идеи. Выглядит как блочный интерфейс серых оттенков, но таким способом можно продемонстрировать структуру и описать пользовательское взаимодействие с создаваемым продуктом.
Макет
Благодаря макетному показу заказчик увидит проект дизайна, приближённого к реальности. Тут статичны все составляющие и весь контент, однако по восприятию эта форма более наглядная, чем предыдущая. Составление презентационной модели — быстрая работа.
Кликабельный прототип
Представляет собой выполненный в деталях прототип окончательного продукта. Создаёт видимость пользовательского взаимодействия с интерфейсом. В частности, позволяет совершать клики по управляющим элементам, применяя формы, с проверкой других моментов, в т. ч. анимации. Но всё равно нужно много времени, чтобы создать данный прототип. Подробнее узнать о прототипировании интерфейсов можно в статье — https://inostudio.com/blog/articles-design/zachem-nuzhno-prototipirovanie-interfeysov/
Анимированные flow
Этот вариант представляет собой видеозапись пользовательского взаимодействия с приложением. Для создания подобной модели потребуется максимум времени, поскольку нужно не только создание прототипа, а и запись на видео его применения. Но это — весьма наглядный вариант.
Утверждение дизайна
Бывают клиенты с чёткими представлениями о дизайне. Но бывают и такие, которые могут только предполагать. Это понятно — каждый обладает своим видением. Данная стадия уже показывает клиенту результат работ, клиент всё видит и указывает значительные моменты, а наше дело — вносить нужные исправления.
Вывод
Пошаговое создание интерфейса — определённо поможет не только сэкономить время в будущем, но и оперативно достичь конечной цели.