Как использовать кинетическую типографику, чтобы сделать ваш сайт интерактивным?

Опубликовано: 2022-07-18

Кинетическая типографика относится к форме анимации. Здесь мы делаем слова живыми.

Я говорю слова, но это может быть что угодно — от одной буквы до целого абзаца. Зависит от того, чего вы хотите достичь с помощью этого движения. Имея это в виду, ваш тип движения должен быть вдумчивым и преднамеренным. Вы не можете просто так заставить свои слова прыгать и гудеть просто из-за этого.

Что ж, вы можете, но это поверхностное использование не будет иметь такого же эффекта.

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

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

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

https://dribbble.com/shots/14187210-Behance

5 способов, которыми интерактивные элементы улучшают работу веб-сайта

Поднимите эстетику

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

С другой стороны, если сайт выглядит красиво и предлагает функции, которые мало кто видел раньше на большинстве сайтов — например, кинетический тип — это огромная победа.

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

Это то, что старый добрый статический веб-сайт просто не может сделать.

Позвольте вам выделиться

Чтобы оставить свой неизгладимый след в цифровом мире, вам нужно иметь то, чего нет у других.

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

Здесь вы можете вычеркнуть.

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

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

Держите пользователя вовлеченным

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

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

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

Улучшить визуальную иерархию

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

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

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

Обучайте пользователей

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

Согласно исследованию контент-маркетинга, 93% маркетологов считают, что интерактивный контент «очень эффективен для обучения потенциальных клиентов».

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

Вот как кинетический шрифт может сделать ваш сайт интерактивным

1. Сделайте время ожидания загрузки вашей страницы более увлекательным

https://dribbble.com/shots/6189182-Counter-01

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

Но здесь может помочь активность шрифтов.

Представьте себе страницу, на которой изменение размера текста информирует вас о том, сколько времени осталось ждать.

Когда тип перемещается от меньшего размера к большему, он может предупредить пользователей о том, сколько еще им придется ждать. Хотя люди могут не реагировать положительно на время загрузки страницы, когда вы сообщаете им, как скоро может закончиться ожидание, они, вероятно, задержатся дольше.

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

2. Привлеките внимание пользователей и подскажите, что делать дальше

https://dribbble.com/shots/18058873-Internet-Speed-Test-App

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

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

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

https://dribbble.com/shots/17559699-Move-On-Up

3. Скажите людям, на чем следует сосредоточиться

https://dribbble.com/shots/9287077-хоп

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

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

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

Поскольку разные буквы в вашем тексте превращаются в эти новые значки, это не только выглядит невероятно игриво и привлекательно, но также демонстрирует вашу индивидуальность — и в маркетинге это (в основном) всегда плюс.

https://dribbble.com/shots/13945869-Мои-Сервисы

4. Подготовьте пользователей к изменению состояния или переходу

https://dribbble.com/shots/11258557-Creative-Coding-5

Электронная коммерция или просмотр веб-страниц завалены переходами. Вы всегда едете из пункта А в пункт В, затем в С и так далее. Резкие переходы утомляют пользователей. Никому не нравится, когда его бросают из одного места в другое. Плавная, плавная типографика помогает сохранить гладкость.

Он готовит людей к грядущим переменам. Говорит им, чтобы они были готовы к этому. Помогает им настроиться, чтобы подготовиться к следующему этапу покупок, загрузки или просто просмотра.

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

5. Подчеркните ключевые слова, фразы или разделы веб-сайта.

https://dribbble.com/shots/11138509-The-Truth-is-Worth-It

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

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

Как часть моушн-дизайна, кинетический шрифт помогает вам подчеркнуть то, что вы хотите сказать. Удвойте силу ваших слов. Итак, используйте его с намерением и мыслью.

6. Предоставляйте визуальную обратную связь, когда задача выполнена успешно

https://dribbble.com/shots/16174668-KEEP-IT-UP

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

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

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

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

7. Помогите задать тон бренда

https://dribbble.com/shots/17070314-ПРОСТО

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

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

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

Вынос

Есть три:

Будьте целеустремленными . Не делайте это только потому, что это выглядит красиво. Делайте это, потому что это служит цели, а затем сделайте это красиво.
Будьте скромны со своим подвижным типом . Можно много взять. Поэтому добавляйте его только в те области пользовательского интерфейса, где у вас есть место и где он даст наилучшие результаты.
Будьте ясны . Используйте стили шрифта, которые не потеряют разборчивости при добавлении анимации. Кроме того, держитесь подальше от стилей анимации, которые испортят четкие стили шрифта.