CF.Digital: «Хороший дизайн, но как-то мрачноват!»

По статистике, 92% веб-сайтов, с которыми предприниматели выходят на онлайн-рынок, не продают. Соответственно они обращаются к новым разработчикам с надеждой на хороший результат. И все начинается с самого начала.

Комментарии 950
Фото: shutterstock
Фото: shutterstock

Наш опыт показывает, что одной из самых распространенных причин такой проблемы – это несоблюдение последовательности и механики всех необходимых этапов создания сайта.

В этой статье мы рассмотрим один из фундаментальных этапов - прототипирования.

Что такое прототип?Хороший дизайн, но как-то мрачноват”, – именно так охарактеризовал прототип один из наших заказчиков :)

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

Простыми словами - это первичный макет веб-сайта в ч/б, который открывается в браузере и его можно покликать и походить по нему. Архив статичных PDF или JPG/PNG файлов еще не прототип.

Прототип формируют на этапе UX (user experience) дизайна на основе проведенного анализа рынка и целевой аудитории.

Прототипирование - это must have шаг в построении веб-дизайна, так называемый, скелет, который мы стилизуем на этапе UI (user interface) дизайна. 

Прототип – это не дополнительный этап, это фундаментальное решение для действительно грамотного и успешного проекта.

Фото: shutterstock
Фото: shutterstock

Зачем нам нужен этот “мрачноватый дизайн”?

1. Создать скелет будущего сайта, визуализировать его структуру.

2. Протестировать путь и логику пользователя.

Nota Bene: если на прототипе пользователь не может выполнить целевые действия (не понимает, где форма обратной связи, не может добавить товары в сравнение) - такой прототип не может может быть утвержден.

3. Чтобы получить feedback от команды проекта. Разработка сайта - командная работа, поэтому важно на этапе прототипирования получать обратную связь от коллег, занимающихся и back-end, и front-end.

4. Чтобы минимизировать риски и предотвратить изменения в дальнейшем.

Важно: чем дальше зашел процесс создания проекта - тем дороже обойдутся внесения корректировок.

Фото: shutterstock
Фото: shutterstock

Какие инструменты использовать для прототипирования?

Инструментов масса, выбирать Вам. Наши фавориты - это Figma, Adobe XD и Sketch. Кто-то спросит, а где Axure? Axure - отличный инструмент, но в нем нет функционала UI дизайна, только UX, поэтому он отошел на задний план.

Несколько лайфхаков напоследок:

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

Автор: Диана Бессараб, Project manager CF.Digital

Обсудить с другими читателями:
Погода