Дизайн
November 12, 2022

Что такое Wireframe и с чем их едят?

Как выглядят, эти ваши, варфреймы

Варфеймы, это набор, обычно в градиенте серого, блоков. Всякие инпуты, кнопочки, заглушки. Если совсем утрировано – каркас будущего проекта.
Ниже можешь посмотреть парочку примеров из гугла.

Они бываю разные по сложности и проработанности. Могут начинаться с листка бумаги в виде каракуль и заканчивая какими-то сложными, проработанными и интерактивным элементами. Все зависит от того, что ты хочешь получить и какие цели поставлены. В гугле пишут о всяких градация этих варфреймов. На самом деле, даже не забивай голову этим. Везде градации и дефиниции свои. Если из всей команды ты сам себе команда, то вообще не задумывайся об этих дефинициях. Хотя, есть парочку, которую, те кто занимаются ими, поймут: низкоуровневый и высокоточный (опять же, назови проработанный, ничего не изменится) варфрейм. Первый – совсем блоки-блоки. Все поясняешь на пальцах. Чуть ли не эскиз. Последний – уже есть понимание без тебя, что такое кнопочка, дропдаун и даже, может, потыкать можно.

Для чего они нужны

Чтобы ответить на вопрос, нужны ли они в твоей работе, надо понять пайплайн создания продукта, позже распишу все, в отдельных статьях.
Если коротко, варфреймы нужны для того, чтобы заложить логику, опираясь на исследование, которое есть. Грубо говоря, это основа, структура, которую в будущем, ты (или твои коллеги) будешь переносить в фигму (или где ты там рисулькаешь). Варфрейм позволяет сконцентрироваться на удобстве, на взаимодействии. Нет необходимости продумывать UI Kit, стили и держать кучу ненужных, на данной стадии, компонентов в голове. У тебя есть задача – сделать удобно. Ты ее и продумываешь.

Аллегория Вид автомобиля, безусловно, это классно, но в первую очередь продумывают "геометрию" кузова. Прочность. Стабильность на дороге при разных условиях. Только после этого думают о том, что за тип краски будет нанесен на сам кузов.

Удобно разделять работу. Мозгу проще обрабатывать информацию, которая подается порционно. Так проще не только мозгу, но и команде, если ты не одиночка. Особенно, где каждый отвечает за свое направление. Каждый знает свою область работы. Либо ты, далее после варфемов, уже думаешь о компонентах и вопрос с тем, будет удобно "так или так" стоять не будет. Хотя, справедливости ради, UI тоже влияет на удобство (также, как форма руля на управляемость), но это уже притирания. База заложена, нет вечных переделок одного и того же.

А что, кроме взаимодействия?

Да, что-то есть, это быстрые тесты. Тут тоже все зависит от того, какие цели преследуешь. Варфреймы можно запрототипировать и закинуть на A/B тест (тоже будет, не кричи, я слышу), если собрать совсем простой прототип и пойти к коллегам, друзьям, собаке и дать "пощупать", будут какие-то результаты. Но если вдруг, так совпали ВСЕ карты и у меня флэш-рояль, и меня читает какой-то руководитель, который ранее так не делал, то можно собрать фокус группу и тестить на них. Качественные исследования, вероятно, не выйдет получить. Но на количественные – вполне. Опять же, все зависит от целей и самих варфеймов.

Минусы есть? А если найду?

Минусы есть, как и у любого инструмента, любого мастера.
Как в анекдоте: "Молоток, конечно, классный, жаль пальцы отбивает"
Минусы заключаются в том, что для варфреймов нужны хоть какие-то данные. В идеале не "хоть какие-то", а нормальные. Цели, задачи, исследования, сценарии, карта функционала и т.д. Если ты просто на энтузиазме решил такой классный накидать "пару экранов", то ты это сделаешь, но профита от этого не будет.
Время тоже важный фактор. Если тебе "дядя" сказал "надо к понедельнику макеты мне!1!" то крутись аки пчела, варфреймы требуют проработки, на основе данных. Просто "с наскоку" не выйдет. А потом еще и в фигму и там все делать по второму кругу. Времени занимает много.
Цели тоже важный фактор. Не всему нужны варфреймы. Если отталкиваться от своего опыта, то они требовались, в основном, для средних и масштабных проектов. Если у тебя приложение на 5 экранов или лендинг – не вижу(потому что его нет) так запариваться.
Есть еще парочку, но они больше для компании. А мы ж с тобой тут, как на кухне в 5 утра, вдвоем, какая компания?

Про дизайн. Ни меньше, но чуть больше
https://t.me/Design_Dot