• Описание проекта / Объем работ
• Вайрфрейм
• Прототип
• UI макет

Описание проекта

Прорабатывается чаще всего: клиентом.
Может также упасть на плечи: отделу продаж, бизнес-аналитику, стратегу, маркетологу, менеджеру и конечно же, UX дизайнеру 🥲

В большинстве случаев начала работы с новым проектом, у дизайнера есть описание (бриф или техническое задание) и ему необходимо написать и утвердить объем работ.

Шаблон-пример (описания)

Описание проекта, 150-300 символов.

• Что это (сайт, приложение, магазин)
• Какая цель (узнаваемость, продажи, помощь)
• Пожелания (Чтобы можно было редактировать сайт)

Преимущества:

• Что делает проект особенным
• Чем он лучше конкурентов
• Уникальность
• …

Решения проблем (нужно решить текущую боль) / Функционал:

• Проблема [ … ] > решение [ … ]
• [Отсутствует каталог, есть только группа в вайбере, нельзя посмотреть есть ли товар в наличии] > [отображение каталога актуальных товаров на сайте]
• [отсутствие «бренда»] > [анализ и создание бренд-стратегии]
• [нужно в индивидуальном порядке оформлять заказ, связавшись с менеджером в рабочее время] > [дать возможность посетителю самостоятельно оформить заказ]
• …

Сопутствующие материалы/ссылки: ссылка на гугл диск с логотипом и фотографиями, инстаграм/соц-сети, гайдлайны, …

Объем работ

Исходя из описания (в первую очередь – типа/категории проекта) и остальных деталей, формируется список “deliverables”, в идеале он должен формироваться индивидуально.

Можно выделить небольшой чек-лист, актуальный в большинстве случаев, при составлении документа с описанием объема работ :

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

P.S. Подобный документ помогает составить четкий план работ, оберегает от бесконечных правок и является одним из лучших способов убедиться, что вы с клиентом понимаете друг-друга.

Вайрфрейм

Схематическое представление структуры сайта/приложения. В зависимости от качества детализации (низкой, средней или высокой) может использоваться для

• Составления информационной архитектуры
• Создания упрощенного представления о наполнении сайта, а также порядку

В большинстве случаев предоставляется клиентом либо создается вместе с клиентом. Иногда для того, чтобы выиграть проект – фрилансеры предлагают сделать вайрфрейм, в качестве тестового/доказательства своей вовлеченности.

Прототип

*Я чаще называю “кликабельный прототип“, так как ключевым является именно взаимодействие (клик) с дизайном и дает более понятное представление о том, что такое прототип.

Как правило, это перечень экранов (Wireframe либо Финальный UI), организованных и связанных между собой таким образом, что при взаимодействии с прототипом создается частичная или полная имитация работы готового продукта.

В данный момент, большинство современных графических редакторов (Figma, Sketch, Invision Studio, Origami …) имеют встроенный функционал создания прототипов.

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

Если время позволяет: создавай прототип даже в случаях когда он не оплачивается (вне объема работ) — это возможность проверить свою работу и сделать “бонус” для клиента, формируя крепкие взаимоотношения с клиентом.

Немного истории: дизайнеры экспортировали изображения в отдельные программы, разработанные исключительно для построения прототипов. Среди выживших и пользующихся спросом по сей день Invision https://www.invisionapp.com/ , marvelapp https://marvelapp.com/, zeplin (продукт трансформировался в инструмент экспорта ресурсов для разработчиков) https://zeplin.io/
К чему я это: освоив инструменты прототипирования в Figma, вам не составит труда освоить тот же invision (в нескольких часов) и тем самым стать более востребованным за минимальные усилия.

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

UI-Макет

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

При работе над UI можно выделить:

• Поиск и подбор цветовой схемы
• Поиск и подбор типографики
• Если в проекте уже есть brand guidelines, то большинство визуальных составляющих не нужно будет искать, лишь повторить (как правило любые бренд-гайдлайны включают в себя: цвета, типографику, логотип(-ы), правила и рекомендации использования)
• Визуал. Визуал. Визуал! (к моменту начала работы над UI – вайрфреймы должны быть наполнены контентом (настоящим или прото), или как минимум – текстом рыбой (lorem ipsum dolor))
• Добавление сторонних графических ресурсов (при необходимости) и их редактирование (например в иллюстрациях: можно изменить цвета в соответствии с цветовой схемой, удалить лишние графические элементы)