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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0
31 комментарий
Написать комментарий...
Андрей Верёвкин

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

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

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

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

Ответить
Развернуть ветку
alex

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

Ответить
Развернуть ветку
Sarah James

В основном так и есть.
https://ggstreetview.com

Ответить
Развернуть ветку
S.Z

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

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
LabO

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

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
LabO

Флексы-Мексы, фигмы-сигмы, но работаю только через прототип

Ответить
Развернуть ветку
Кирилл Прохоров
Автор

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

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
LabO

Вы не в той нише, адресом ошиблись.

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
alex

"Показывает клиент пальчиком - мы реализуем."
Все правильно вам выше сказали, не в той вы нише! Думаете в аис, креативе пипл, ред коллар, нотамедиа и прочем топе клиент показывает пальчиком, это они показывают клиентам пальчиком и говорят, что именно это решение лучшее для его продукта/задачи!

Ответить
Развернуть ветку
LabO

Клиент ставит задачу. Агентство ее реализует. А клиент свои пальчики держит при себе

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
ДЫРЯВЫЙ ТАКСИСТ

цена такого дизайн примерно ?

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Sergey Mikhalev

всё ясно

Ответить
Развернуть ветку
ДЫРЯВЫЙ ТАКСИСТ

я не тебя спрашиваю

Ответить
Развернуть ветку
Аккаунт удален

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

Ответить
Развернуть ветку
Арнольд Валерьянович

Я думаю Вы плохо представляете о чем идет речь. Коллеги, как я понимаю, говорят про проекты от 200-300к до 5 млн. Вордпресс и любая другая cms здесь не релевантны впринципе, собственно как и работа без прототипа.

Ответить
Развернуть ветку
Владимир Соловьёв

Фигма для таких задач, как в примерах, не очень нужна, только если пайплайн на неё сложился уже. Интернет-магазины и корпоративные сайты, запросто можно прототипировать в вордпрессе «по живому» используя пейдж билдеры. В них есть всевозможные готовые блоки, конструкторы блоков, все опции по отступам, поведению, анимации, есть все ответы про мобильный вид, резину и т.п. Все эти «велосипеды» давно нарисованы и свёрстаны — сколько можно карточки товара и меню изобретать.
Например:
https://elementor.com/blog/customize-woocommerce-product-page/?ref=3267

Конечно, такой путь не для прототипирования мобильных приложений.

Ответить
Развернуть ветку
Кирилл Вихарев

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

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

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

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

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

Ответить
Развернуть ветку
Алексей Сеовектор

Где вы находите клиентов, которые заказывают прототип? Он же отдельно оплачивается у вас? Или сами инициативу проявляете?

Ответить
Развернуть ветку
Кирилл Прохоров
Автор

Прототип является частью дизайна и он, конечно, оплачивается ) Без прототипа нельзя сделать дизайн )

Ответить
Развернуть ветку
LabO

Естественно и безусловно

Ответить
Развернуть ветку
Sasha Belichenko
Второй этап создания сайта – прототипирование.

oh really?
research->ideate->validate->implement
3й же!

У прототипов разные цели применения. Кто-то на них презентует работу клиенту, кто-то идеи валидирует и проводить пользовательское тестирование (например сценариев), а кто-то проверяет как работаю микро-взаимодействия.

По моему опыту Фигма не очень хороша в прототипах (для средних и больших проектов). Например, для одного файла можно создать только один прототип. Когда в файле 100+ экранов, одним прототипом не отделаться, просто из-за огромного количества сценариев, которые необходимо покрыть (а делать один прототип на все случаи жизни зачастую дорогое решение из сложности реализации и тем более поддержки в актуальном виде, и если кто-то делал, то лапши от связей столько, что в ней потом не разберёшься).
К тому же, в Фигме прототип должен находиться на одной странице, в проекте с 100+ экранов, обходиться одной страницей сложно. Можно сделать отдельную страницу для прототипа, получится дублирование экранов с других страниц (опять же сложности поддержания в актуальном виде).
А ещё прототипа из Фигмы довольно долго грузятся (опять, речь о больших прототипах).
Если же разбивать на прототипы на файлы, то указаных проблем выше нет, но для поддержи в актуальном виде уже нужен командный аккаунт и соответсвенно командная библиотека компонентов. А ещё количество файлов может стать огромным, что не всегда удобно в проектах (в Фигме пока нет папок внутри проекта).

Ответить
Развернуть ветку
Andrei Nikolaev

Мне кажется, что прототипирование, это уже становится некоторым мовитоном. Последний раз это делал лет 12-13 назад. Для простых сайтов есть гора удобных конструкторов, в большинстве из которых есть блоки для самостоятельной вёрстки любого дизайна. Для интернет-магазинов, пабликов, журналов и прочему, также гора инструментов. Зачем сейчас выдумывать велосипед?

Если конечно проект с многомилионным бюджетом и притензиями на лидерство в нише, тогда да, прототип становится логичным, но во всех других случаях это лишнее.

Ответить
Развернуть ветку
Александр Иванов

С т.зр. продажи это создаёт добавленную (пусть и воображаемую) ценность продукту агентства.

Одно дело заплатить сотку за "сайт", другое дело за прототипирование, брендирование, хренирование.

Ответить
Развернуть ветку
Andrei Nikolaev

В основном так и есть.

Ответить
Развернуть ветку

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

Развернуть ветку

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

Развернуть ветку
Василий Дейнес

Q

Ответить
Развернуть ветку
28 комментариев
Раскрывать всегда