{"id":8721,"title":"\u0427\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437 \u0440\u044b\u0431\u044c\u0435\u0439 \u0447\u0435\u0448\u0443\u0438","url":"\/redirect?component=advertising&id=8721&url=https:\/\/vc.ru\/promo\/316632-odezhda-kotoraya-rastet-vmeste-s-rebenkom-biotoplivo-i-krossovki-iz-chaynogo-griba&placeBit=1&hash=3f7bfd5e764a97a666a0f91fc9e9278a2147bac49abdacebb6449b781d4d5ca0","isPaidAndBannersEnabled":false}
Дизайн
Roman Kamushken

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.

0
7 комментариев
Популярные
По порядку
Написать комментарий...

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

4

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

0

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

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

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

0

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

1

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

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

0

А как тебе написать для заказа дизайна?

0
Читать все 7 комментариев
С уважением, команда интернет-магазина «Билайн»

Очень разочаровался, официальным интернет магазином Билайн. Обычный интернет магазин с радиорынка утер нос именитому коллеге!

Взломан аккаунт VK и вместо помощи поддержки, получаешь от них блокировку

У меня нет аккаунта в VK, а у моей жены есть, точнее был. Обычный такой аккаунт , мамашки, где она админ 2 групп родкома в школе детей ( причем единственный админ и сейчас в эти группы никого не добавить и себя с нового аккаунта) и доступ в группы совместных закупок, аккаунт старый, причем аккаунт открыт только для друзей.

Как столярная мастерская из Рязани начала продавать товары по всему миру

И прошла путь от мебели ручной работы к деревянным игрушкам.

TikTok-блогер Yan Dilan снимет клип на песню «Детство»

Блогер, рэпер, продюсер, актер, сценарист, участник Высшей лиги КВН и сторителлер Артур Диланян, ставший популярным в социальных сетях под псевдонимом Yan Dilan, привлекает инвестиции на съемки видеоклипа на новую песню «Детство» с помощью инструмента краудлендинга.

Pinterest купила белорусский сервис для редактирования видео Vochi Статьи редакции

Покупка поможет Pinterest развивать видеонаправление.

9 декабря банк «Открытие» и Яндекс.Бизнес проводят очередное бизнес-шоу «Цифровая эволюция бизнеса»

Тема шоу — как компаниям малого и среднего бизнеса продвигать продажи и завоевывать новую аудиторию покупателей через онлайн-каналы

«СберПрайм» ввёл лимит на бесплатную доставку продуктов из «СберМаркета» — её называли выгодой для подписчиков Статьи редакции

Сервис сделал платным то, что обещал сохранить бесплатным: на сайте было указано, что подписка для пользователей «всегда бесплатная».

«У одного человека — половина спутников в мире»: Европейское космическое агенство обвинило SpaceX в монополии в космосе Статьи редакции

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

Точка добавила вебхуки в API

Клиенты смогут получать моментальные уведомления о своём бизнесе.

vc.ru превратился в книгу жалоб

Вам не кажется, что vc.ru превращается в сайт для жалоб на разные сервисы и компании?

«Циан» запретил сдавать квартиры «только славянам»: теперь на сайте нельзя указывать расовые предпочтения Статьи редакции

Отредактировать объявления необходимо до 1 февраля 2022 года.

null