Наш опыт показывает, что одной из самых распространенных причин такой проблемы – это несоблюдение последовательности и механики всех необходимых этапов создания сайта.
В этой статье мы рассмотрим один из фундаментальных этапов - прототипирования.
Что такое прототип? “Хороший дизайн, но как-то мрачноват”, – именно так охарактеризовал прототип один из наших заказчиков :)
По определению, это интерактивный макет с активными навигационными и структурными элементами (рабочие кнопки, выпадающие меню, внутренние скроллы и т.д.), формирующий перелинкованный архетип веб-сайта, по которому можно проводить анализ структуры и первичный анализ пользовательского пути.
Простыми словами - это первичный макет веб-сайта в ч/б, который открывается в браузере и его можно покликать и походить по нему. Архив статичных PDF или JPG/PNG файлов еще не прототип.
Прототип формируют на этапе UX (user experience) дизайна на основе проведенного анализа рынка и целевой аудитории.
Прототипирование - это must have шаг в построении веб-дизайна, так называемый, скелет, который мы стилизуем на этапе UI (user interface) дизайна.
Прототип – это не дополнительный этап, это фундаментальное решение для действительно грамотного и успешного проекта.
Зачем нам нужен этот “мрачноватый дизайн”?
1. Создать скелет будущего сайта, визуализировать его структуру.
2. Протестировать путь и логику пользователя.
Nota Bene: если на прототипе пользователь не может выполнить целевые действия (не понимает, где форма обратной связи, не может добавить товары в сравнение) - такой прототип не может может быть утвержден.
3. Чтобы получить feedback от команды проекта. Разработка сайта - командная работа, поэтому важно на этапе прототипирования получать обратную связь от коллег, занимающихся и back-end, и front-end.
4. Чтобы минимизировать риски и предотвратить изменения в дальнейшем.
Важно: чем дальше зашел процесс создания проекта - тем дороже обойдутся внесения корректировок.
Какие инструменты использовать для прототипирования?
Инструментов масса, выбирать Вам. Наши фавориты - это Figma, Adobe XD и Sketch. Кто-то спросит, а где Axure? Axure - отличный инструмент, но в нем нет функционала UI дизайна, только UX, поэтому он отошел на задний план.
Несколько лайфхаков напоследок:
- Прототип должен быть простым и обобщающим, на этом этапе не нужно тратить время на стилизацию элементов;
- Работайте с реальным контентом - на этом этапе важно построить сетку веб-сайта, для этого стоит запросить максимум контента или согласовать с заказчиком требования к нему (соотношения сторон, количество символов в текстовых блоках и т.д.);
- Работайте постепенно - перед тем, как формировать структуру нужно провести маркетинговое исследование и анализ ниши.
