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

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

В закладки

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

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

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

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

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

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

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

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

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

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

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

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Кирилл Прохоров", "author_type": "self", "tags": [], "comments": 31, "likes": 24, "favorites": 236, "is_advertisement": false, "subsite_label": "design", "id": 64379, "is_wide": false, "is_ugc": true, "date": "Fri, 12 Apr 2019 19:24:04 +0300", "is_special": false }
0
{ "id": 64379, "author_id": 230691, "diff_limit": 1000, "urls": {"diff":"\/comments\/64379\/get","add":"\/comments\/64379\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/64379"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
31 комментарий
Популярные
По порядку
Написать комментарий...
8

Прототип для сайта в нынешнее время - это лишнее часто. Если клиент просит - пожалуйста, но сроки сдвигаются.
Но сейчас веб стал слишком простой. Достаточно у клиента спросить три сайта, на которые мы будем ориентироваться - и будущий дизайн понравится 95% клиентам, а половина скажет ВАУ сразу.

Ответить
6

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

Ответить
0

У вас есть проблемы с верстальщиком. :)
Про флексы в курсе? Что там куда уедет?

Ответить
–5

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

Ответить
1

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

Ответить
1

;)
Да вообще без палева - непринятый дизайн уходит следующим клиентам.

Через год-два дизайн-макетов столько, что выставляем на авито и окупаемся. Да че там, окупаемся, получаем новых постоянных клиентов.

А вы в фигме квадратики двигайте и дальше. Инжой :)

Ответить
8

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

Ответить
–3

У нас ниша как раз топ. Всё для клиента. Показывает клиент пальчиком - мы реализуем.

Ответить
4

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

Ответить
1

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

Ответить
0

Как бы не так. Надо стараться быть максимально ориентированным к клиенту. Без этого бизнес не вырастет, и хороших отношений не будет.

Ориентироваться на уже существующие решения - очень удобно для обеих сторон.
А прототипы - это лишнее время, да еще без динамики.

Ответить
1

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

Ответить
6

всё ясно

Ответить
0

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

Ответить
0

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

Ответить
3

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

Ответить
0

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

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

Ответить
8

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

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

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

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

Ответить
5

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

Ответить
0

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

Ответить
1

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

Ответить
9

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

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

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

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

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

Ответить
2

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

Ответить
3

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

Ответить
2

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

Ответить
1

Второй этап создания сайта – прототипирование.

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

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

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

Ответить
1

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

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

Ответить
0

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

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

Ответить
0

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

Ответить

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

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

{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }