Для кого эта статья:
Данная статья актуальна для заказчиков дизайна и начинающих
дизайнеров.
О чем эта статья:
В статье кратко описываются шаги работы от идеи до релиза.
Дизайн интерфейсов начинается с определения целей и задач будущего веб/мобильного приложения.
Чтобы интерфейс эффективно помогал пользователям добиваться своих целей, он должен обладать следующими характеристиками:
— Его назначение должно быть очевидным для пользователя;
— Пользователи должны понимать, как им взаимодействовать с интерфейсом;
— Процесс взаимодействия с интерфейсом должен быть предсказуемым.
Работы над дизайном интерфейса можно разделить на несколько этапов:
Чтобы интерфейс эффективно помогал пользователям добиваться своих целей, он должен обладать следующими характеристиками:
— Сбор требований и анализ;
— Разработка схемы приложения (wireframing);
— Визуальный дизайн;
— Прототипирование;
— Анимация интерфейса;
— Style guide (гид по стилю).
Сбор требований и анализ
Данный этап можно разделить на несколько шагов:
— Заполнение брифа;
— Определение основных функций продукта и анализ конкурентов;
— Составление пользовательских сценариев.
Заполнение брифа
Бриф - анкета с основными вопросами по проекту которая позволит собрать:
— Информацию о бизнесе или деятельности заказчика;
— Первичные сведения о конкурентах;
— сведения о целевой аудитории;
— пожелания по визуальному оформлению и функционалу приложения;
— и т.д.
Определение основных функций продукта и анализ конкурентов
Необходимо провести анализ рынка и конкурентов, выявить их слабые и сильные стороны. Это позволит определить оптимальную концепцию работы и конечную функциональность приложения, также это позволит избежать ошибок и правильно спланировать работу на следующем этапе.
Пользовательские сценарии
Когда дизайнер имеет достаточно информации о будущем продукте, необходимо продумать пользовательские сценарии, которые может выполнять пользователь в рамках интерфейса - то как он будет взаимодействовать с интерфейсом. Для этого описываются все шаги которые необходимо предпринять для достижения цели. Например: нажать на кнопку “войти”, авторизоваться, выбрать товар, посмотреть информацию о нём, совершить оформление заказа и т.д. После того как будет составлен список всех шагов для каждой задачи, мы сможем понять насколько быстро и удобно пользователь достигает цели в рамках работы с интерфейсом. После тщательно продуманных пользовательских сценариев можно приступать к работе над вайрфреймами (схематическое отображение страниц).

Разработка схемы приложения (wireframing)
Данный этап позволяет выявить скрытые, на первых этапах, особенности работы приложения и недостатки, что в дальнейшем сэкономит время работы над ним, а соответственно и стоимость. Хорошо продуманный продукт начинается со схемы его структуры, на основе которой создается макет сайта. На данном этапе также продумывается пользовательский интерфейс и функционал сайта.
Существуют два типа вайрфреймов:
— low-fidelity wireframes;
— High-fidelity wireframes;
Low-fidelity wireframe
Это могут быть наброски на бумаге или на маркерной доске на которых отображаются основные страницы с демонстрацией основных блоков будущего веб сайта или мобильного приложения.

High-fidelity wireframe
Результатом данного этапа является схематическое отображение всех страниц с полной детализацией всех блоков с учетом всех отступов и размеров.

Визуальный дизайн
После сбора требований и анализа начинается работа над визуальным дизайном. Обычно презентуются 2-3 концепта. Часто итоговый результат является комбинацией нескольких представленных концепций. На данном этапе объединяются все предыдущие стадии. Прототипы оборачиваются в уникальный визуальный стиль и подход к коммуникации, наполняются контентом и продукт обретает свой финальный вид. Хорошей практикой является командная работа дизайнера и разработчиков, это позволяет получить оптимальный результат для дальнейшей разработки. Работы над визуальным дизайном начинаются с главной страницы. Когда главная страница готова и утверждена найденное визуальное решение тиражируется на остальные страницы и начинается проработка деталей: отрисовка иконок, заказ фото и видеосъемки (в случае необходимости), подготовка контента.

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

Анимация интерфейса
Основная задача анимации — сделать интерфейс более удобным и понятным.
Тщательный анализ целевой аудитории, тестирование идей и концептов микровзаимодействий позволяют повысить юзабилити (удобство использования). Правильно используемая в интерфейсах анимация может стать одним из способов существенно ускорить взаимодействие, сделать его более естественным, приятным в использовании и более стильным в дизайне.

Style guide
Style Guide - это набор правил который регламентирует использование элементов интерфейса для будущего изменения/расширения проекта. Style Guide важный заключительный этап разработки дизайна интерфейса нового продукта. Гайд должен описывать использование: элементов управления (кнопки, радиобаттоны, чекбоксы…), форм, типографики, отступов между элементами и др.

А так же читайте:

ПОЧЕМУ RUBY? АРГУМЕНТЫ В ЦИФРАХ!
Не давно у нас появился потенциальный проект и вопрос о выборе технологий стал ребром. При разработке программного обеспечения мы отдаем предпочтение языку Ruby, фрейморку Ruby on Rails (RoR), но у заказчика сложилось впечатление, что специалистов работающих с Ruby очень мало и в случае необходимости, их будет очень сложно найти, поэтому заказчик предпочел бы PHP...