14 Ноября 2018 в 16:33 800

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

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

Фото: 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

Присоединяйтесь к нашему каналу в Telegram.
 

«CAT F.A.T.» – это новый совместный проект CF.Digital с порталом Sostav.ua – амбициозный в плане количества информации и миссии, которую CF.Digital планирует реализовать: показать, вдохновить, изменить! Три раза в месяц в течении целого года специалисты агентства CF.Digital будут готовить специально для «CAT F.A.T.» авторские материалы, кейсы и мировые тренды, пропущенные через призму собственной реализации, факапы, которые позволили стать сильнее, и лайфхаки, которые помогут стать эффективнее.

,