5 шагов создания
интерфейса

01

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

Поэтому первым шагом я составляю список конкурентов, чтобы потом выявить паттерн, который прослеживается у похожих сервисов и применить его к работе:

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

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

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

02

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

На этом этапе исправляются общие моменты, удаляются ненужные шаги и решается, что пойдет в первую версию продукта.

03

После того как удачные приемы конкурентов отобраны и архитектура системы понятна, можно переходить к прототипированию страниц, экранов и других элементов. На этом этапе я не всегда фокусируюсь на деталях, здесь главное собрать необходимую информацию, понять расположение блоков и увидеть взаимодействие страниц друг с другом — в этом случае поможет динамический прототип в Axure (например) или Invision (раз, два):

Каждый эскиз отдается и утверждается последовательно, если определены приоритетные страницы, то дизайн делается этапами, параллельно включается верстка, тестирование (QA) и логика со стороны (back end), затем подключается и front end.

Следующий этап — чистовой дизайн, подготовка графики, описание спецификаций и подготовка всех материалов для разработки.