Дизайн
Roman Kamushken
1096

8 простых способов добавить динамики в статичные дизайн-макеты

В закладки
Аудио

Материал этой статьи является следствием моих дизайн-экспериментов и выводов за последний год-полтора непрерывного дизайн гринда. Я неустанно собирал ui kit’ы, экспериментировал с контентом в плейсхолдерах, стилями, тенями текстами и состояниями, чтобы понять влияет ли это на конверсию. Иначе говоря, смогу ли я увеличить продажи дизайн-продуктов для Figma, если добавлю немного визуальной динамики в статичные дизайн-макеты, чтобы сделать темплейты интереснее и функциональнее.

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

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

Увы, я пока не нашел способа определить метрики тех или иных визуальных приемов, с которыми я регулярно экспериментирую. Я попытался провести анализ всех своих UI наработок и систематизировать из подсознательного в удобный и понятный список простых трюков, чтобы сделать дизайн чуточку веселее. Возможно это просто прикольно и цепяет глаз, возможно от этого растут подписчики, возможно это что-то из ближайшего будущего, а возможно не имеет никакого смысла. Как я сказал выше, я не могу быть уверен, что показатели посещаемости и просмотра страниц моего сайта растут именно благодаря этим приемам добавления “визуальной динамики” в статичные макеты. Но мне нравится думать, что UI эффекты, которые я опишу ниже прямо или косвенно повлияли на мой общий прогресс.

Итак, я расскажу о том как добавление состояний в статичный прототип добавляет ему немного динамики, показывая некоторое событие. Поехали!

Немного приподнят

Если на вашем артборде используется множество карточек, блоков и других однотипных элементов, то один из выборки можно “приподнять” тенью. Этот прием уместен как для крупных элементов, например карточек, так и для мелких UI-компонентов, например, разделов меню в боковой навигаци. Создается ощущение, что мы навели на карточку курсор и можно кликнуть:

В этом примере возможно клик на отзыв не имеет никакого смысла, но приём с приподнятием карточки тут применим

Кто знает, если вы работаете на клиента и демонстрируете ему этот блок, он возможно скажет “Вау, это классный эффект с тенью, давай размножим его ВЕЗДЕ и я принимаю эту работу”. Вы дали клиенту выбор. Это профит!

Наведен или активен

Например, при прототипировании дашбордов часто используется навигация в несколько уровней глубины. Для придания динамики я сделал первый уровень Getting Started активированным, а на одном из развернувшихся элементов подменю я добавил стиль onHover. Вдобавок, это поможет разработчикам получить все нужные состояния меню и наблюдать как это смотрится целостно и в контексте навигации:

Я специально оставил справа “пустой” вариант, чтобы вы сравнили и решили какой из них наиболее привлекательный
Простую таблицу можно сделать динамичнее, если на одной из ячеек симитировать состояние наведенного курсора, а другую, например, подкрасить светло-желтым, показав в ней что-то условно важное. Глаз зацепился - цель достигнута

Полезный мусор

Летающие фоном кружки, квадратики, крестики, blobs и прочий другой визуальный мусор, неотъемлимая часть дизайн-ремесла, особенно если вы хотите продвигать свой профиль на Dribbble. Циклично меняется лишь геометрия и очертания этой мишуры. Я начал думать как придать этому больше смысла и использовать во благо пользовательского опыта:

Похоже ли, что blob под синей кнопкой делает её визуально больше и привлекательнее в прямом смысле этого слова?

А иногда запустить фоном какой-то бесполезный элемент становится полезным, если он помогает разграничивать объекты:

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

Выбран или отмечен

Имитация возможности сделать выборку или выделить какой-то элемент активным - отличный способ внести разнообразие в прототип. Даже, если в конечном итоге никакой логики в этом выборе нет, то такой прием как минимум покажет вас компетентным в понимании состояний UI элементов после вымышленного взаимодействия с ними:

В экране слева ничего не происходит, тогда как в правом и центральном экранах якобы совершен выбор и элемент сменил состояние

Сила Emoji

Время от времени emoji встречается в приложениях как способ усиления сообщения пользователю или как часть дизайн-языка. При прототипировании можно быстро собрать логотип, взяв любую иконку за основу или усилить послание Empty state экрана. Кстати, иногда воткнуть emoji-символ оказывается быстрее, чем подбирать отдельно иконку из библиотеки. Фигма их отлично рендерит, но если переборщить с высотой текста, то появляются пиксели. В любом случае, emoji помогут добавить вашему макету некоторой персонализированности и позитива, или даже смысла:

Акцент важности

Мы каждый день сталкиваемся с ситуациями, когда дизайн подталкивает нас сделать выбор, выгодный для бизнеса. В основном это делается за счёт выделения цветом или наделения приоритетом нужной области, блока, кнопки, или любой другой детали. По таким принципам можно как-то особенно подсветить, либо контрастно выделить один из повторяющихся объектов в группе. Колонку в таблице, или спичбабл с отзывом о продукте, специально привлекая к нему внимание:

Активный инпут

Когда вы проектируете прототип, на котором используется множество текстовых полей, отлично смотрится, если один из инпутов выделен активным. Это может быть фокус, ошибка или состояние валидации, когда уже что-то ввели. Используйте своё воображение, воспроизводя реальные ситуации, которые возможны при заполнении инпутов, и это поможет имитировать максимально реалистичную картину:

Игра Теней

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

Пришлось немного "дриблизовать" самый обыкновенный прототип git-дашборда, чтобы собрать немного лайков и подписчиков

Всё просто: чем “выше” объект от нулевой плоскости (фон), тем большая прозрачность, размытие и смещение у тени. Кстати, в Figma зачастую удобнее создавать реалистичные тени обычным Rectangle, которому в этом примере я скруглил углы и применил размытие >200. Далее простым Resize я привёл его в максимально реалистичный вид, создавая эффект “парения” навигации над дашбордом. К счастью, в продакшне такой ерунды не встретишь. К подобным трюкам приходится прибегать, чтобы понять на какие Dribbble посты лучше реагирует аудитория. Но это уже отдельная тема продвижения дизайн-продукта, об этом как-нибудь в другой раз.

Заключение

Сегодняшний дизайн чертовски интересен. За последний год постоянных UI экспериментов мне стало казаться, что дизайн - это как продукт с открытым исходным кодом: каждый в сообществе может привнести что-то своё, и если эти идеи окажутся перспективными, вашу волну подхватят остальные и разнесут по далёким берегам. Вот почему важно рассказывать миру о том, что вы делаете.

Сейчас, оглядываясь назад, я могу честно перед собой признаться: весь мой предыдущий многолетний дизайн-опыт не стоил и ломаного гроша. Переключившись на собственные продукты и создавая один ui kit за другим, мне удалось совершить колоссальный скачок в практие, параллельно шлифуя опыт организации и улучшая архитектуру дизайн-систем в Figma. Зато теперь в моей голове появился гигантский репозиторий компонентов и их возможных состояний. И если вы разбудите меня ночью, и спросите, например о Табах, я мгновенно выпалю вам о них буквально всё

Если вы раздумываете, стоит ли собрать свой ui kit и попробовать продажи, то я отвечу, что непременно стоит. Придумывать самому себе дизайн-задачи оказалось гораздо интереснее, чем погрязнуть во множестве бестолковых правок от очередного клиента. В самом плохом случае, вы обретете больше опыта. При удачном стечении обстоятельств, вы получите первые продажи, что наверняка еще больше вас подстегнёт и мотивирует.

Дерзайте! Веселого вам прототипирования 🤙

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

Кстати, если вы понимаете западные дизайн-тренды, внимательны к сетке, типографике, горизонтальному ритму и вообще к каждому пикселю, то у вас есть отличная возможность присоединиться к небольшой команде Setproduct, чтобы совместно наполнить digital-рынок качественными дизайн темплейтами, которые экономят другим командам целые месяцы разработки. Напишите мне в Twitter или Telegram.

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

Написать
{ "author_name": "Roman Kamushken", "author_type": "self", "tags": [], "comments": 7, "likes": 27, "favorites": 74, "is_advertisement": false, "subsite_label": "design", "id": 75231, "is_wide": false, "is_ugc": true, "date": "Sun, 14 Jul 2019 13:01:20 +0300", "is_special": false }
0
{ "id": 75231, "author_id": 158696, "diff_limit": 1000, "urls": {"diff":"\/comments\/75231\/get","add":"\/comments\/75231\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/75231"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
7 комментариев
Популярные
По порядку
Написать комментарий...
4

очень познавательно для меня
пиши еще ))

Ответить
0

Спасибо. Материала много. Постепенно что-то буду вытаскивать из мозгового репозитория и упорядочивать в виде простых и понятных текстов

Ответить
0

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

Если люди не покупали продукты, то они вновь и вновь появлялись, чтобы поглазеть на что-то. Но на что?

Откройте для себя бесплатный вебвизор.

Ответить
1

Если у вас много свободного времени, то сёрфить никто не запрещает, скорее всего и выводы будут кардинально противоположными. А некоторым удобно просто получить подборку, оформленную в едином стиле, чтобы не ходить далеко. Да, Яндекс.метрикой пользуюсь. Вебвизор это лишь часть паззла, который надо сложить умеючи, чтобы получить какую-то перспективу.

Ответить
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" } } } ] { "page_type": "default" }