Основные этапы UI/UX и Веб дизайна

🤓
🍀
Print
  • Описание проекта / Объем работ
  • Вайрфрейм
  • Прототип
  • 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))
  • Добавление сторонних графических ресурсов (при необходимости) и их редактирование (например в иллюстрациях: можно изменить цвета в соответствии с цветовой схемой, удалить лишние графические элементы)