Прототипирование в Figma

Второй этап создания сайта — прототипирование. Во время создания прототипов закладывается функциональность, создаются ссылки, наглядно оценивается удобство сценариев, продуманных в карте сайта.

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

Обложка статьи Прохоров Кирилл
Обложка статьи Прохоров Кирилл

Прототипы всегда разрабатываю в Figma. Это отличный инструмент, потому что позволяет делать следующие вещи:

1. Возможность продолжить создание дизайна на основе прототипа. Создание адаптивной сетки. Можно даже заморочиться и сделать прототип на мобильном устройстве.

Адаптивность дизайна в Figma

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

Списки, попап-окна и другие фишки

3. Конечно же, наличие компонентов, которые помогают автоматизировать процесс создания гиперссылок.

Компоненты и гиперссылки

4. Возможность клиенту оставлять комментарии прямо в прототипе.

Комментарии в прототипе

Это далеко не все фишки программы. В общем и целом Figma позволяет создавать отличные интерактивные прототипы, не прибегая к помощи сторонних приложений. Прототип можно «пощупать» и посмотреть здесь.

Если есть вопросы – пишите!

2020
31 комментарий

Figma как инструмент для прототипирования это ужас. Как графический инструмент он супер.

Axure и ProtoPie имеют в разы выше функционал :

Анимация по кривой безье
Куча стандартных команд (Wait,Fire events,On move,on swipe и т.д.)
Встраивание js
встраивание видео плееров и модулей (Карты,навигация и т.д.)

И да говорить что прототип ниочём при создании сайтов за 80к....Я на вас бы посмотрел работай вы с проектами 100+ архитектурных единиц...

9
Ответить

Там лендосы про пластиковые окна пилят, какое прототипирование, о чем вы! :)

6
Ответить

Зачем сравнивать граф. редактор и специализированный софт для прототипирования? Ясно дело второе будет лучше

1
Ответить

Комментарий недоступен

9
Ответить

Неееееее, визуальное ТЗ это часть ТЗ, без него никак. Попросит передвинуть - все рухнет. Только через прототип.

6
Ответить

Веб, безусловно, стал проще. Но в любом случае, каким бы простым не был проект, делать дизайн без прототипа опасно. Иначе процесс с 95% вероятностью превратится в утопию.

1
Ответить

Прототип обезателен для разработки любого веб-сервиса.

Прототип нужен больше клиенту, так как именно на этапе прототипирования у клиента в голове начинают появляться правильные вопросы типа:
1. А откуда будет браться эта информация, из 1с, а у на с есть там такая информация?

2. А как это будет выглядеть на мобильном виде? Как всего один элемент списка в ряд? Нам надо как у АлиЭкспресс два товара в ряд.

3. А при нажатии на эту кнопку какие поля нам нужны? Нам точно надо знать с какой страницы была отправлена форма!

Прототип это не про дизайн.
Прототип это про ТЗ

9
Ответить