웹사이트를 인터랙티브하게 만들기 위해 키네틱 타이포그래피를 사용하는 방법은 무엇입니까?

키네틱 타이포그래피는 애니메이션의 한 형태를 말합니다. 여기에서 우리는 단어를 생생하게 만듭니다.

나는 단어를 말하지만 한 글자에서 전체 단락에 이르기까지 무엇이든 될 수 있습니다. 그 동작을 통해 달성하고자 하는 바에 따라 다릅니다. 이를 염두에 두고 움직이는 유형은 사려 깊고 의도적이어야 합니다. 당신은 당신의 말을 순전히 그것에 대해 점프하고 붐 일으키게 할 수 없습니다.

글쎄요, 당신은 할 수 있습니다 – 그러나 이 피상적인 사용은 동일한 영향을 미치지 않을 것입니다.

웹 디자인에서 모션 언어를 사용하면 로고 디자인 애니메이션을 만들거나 키네틱 타이포그래피를 통해 디자인을 사용자에게 개방하게 만들기 때문입니다.

다시 말해, 사용자가 화면을 탭하고 있다는 사실을 잊고 대신 웹사이트를 응답할 수 있는 살아있는 것으로 표시하도록 돕고 있습니다. 웃을 수 있고, 다음에 할 일을 알려주고, 오른쪽 버튼을 클릭하면 춤을 추고, 성공하면 별을 터뜨릴 수 있습니다.

사용자가 디자인과 상호 작용할 수 있게 되면 디자인에 더 많은 시간을 할애하고 기쁨을 느끼고 더 완벽하게 이해하고 궁극적으로 친밀감을 느끼기로 결정할 수 있습니다.

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

인터랙티브 요소가 웹사이트 경험을 향상시키는 5가지 방법

미학을 높이다

사이트의 첫인상을 결정짓는 요소는 미학입니다. 귀하의 사이트가 칙칙하고 제대로 구성되지 않은 것처럼 보이면 그 인상이 귀하의 브랜드에도 전달되어 수익이 악화됩니다.

반면에 사이트가 아름답게 보이고 이전에 대부분의 사이트에서 볼 수 없었던 기능(예: 키네틱 유형)을 제공하는 경우 큰 승리입니다.

키네틱 타입도 미학을 살려주기 때문에 임팩트가 높아집니다. 이제 사람들이 만지고, 대화하고, 응답하고, 피드백을 받을 수 있는 아름다운 웹사이트가 생겼습니다.

이것은 오래된 정적 웹사이트가 할 수 없는 일입니다.

당신이 돋보일 수 있도록

디지털 세계에 지울 수 없는 흔적을 남기려면 남들이 가지지 못한 것을 가져야 합니다.

이해할 수 없는 이유가 무엇이든, 주요 브랜드는 키네틱 유형이 할 수 있는 이점을 얻지 못합니다. 큰 브랜드는 잊어버리세요. 신생 기업도 이 아름다운 경이의 경이로움을 보지 못합니다.

여기서 스트라이크 아웃을 할 수 있습니다.

귀하의 웹사이트에 미묘하고 매력적이며 브랜드에 맞는 키네틱 유형 효과를 포함하여 귀하만의 경험을 주장하십시오. 사람들에게 당신이 무엇을 할 수 있는지 보여주세요.

사람들은 당신의 혁신을 보고 당신이 그것을 얼마나 완벽하게 처리했는지, 그것이 당신의 비즈니스가 메시지를 전달하는 데 어떻게 도움이 되는지 볼 것이고 그들은 당신을 신뢰하기 시작할 것입니다. 그들은 당신을 그들이하는 일을 아는 사람으로 볼 것입니다. 그 신뢰가 형성되면 금전적 거래가 곧 뒤따릅니다.

사용자 참여 유지

인터넷과 소셜 미디어의 전체 전제는 참여를 기반으로 합니다. 콘텐츠는 사람들이 콘텐츠, 제작자 및 플랫폼에 계속 참여할 수 있는 무언가를 제공해야 합니다.

웹사이트에서 키네틱 타이포그래피 기능을 활용하면 꿈만 꾸는 참여도를 얻을 수 있습니다.

정적인 카피를 읽도록 강요하는 대신 사용자 여정을 더 이해하기 쉽고 재미있게 만들기 위해 변형, 변경, 적응 및 수행하는 실사 단어를 제공합니다.

시각적 계층 구조 개선

시각적 계층은 사용자에게 사물이 표시되는 조직적 순서를 나타냅니다. 가장 큰 글꼴이 있는 텍스트가 가장 중요하고 그 다음으로 작은 글꼴이 있는 식입니다. 마찬가지로 밝은 색상의 글꼴은 예를 들어 회색이나 연한 파란색의 글꼴보다 더 빨리 주의를 끕니다.

이러한 시각적 단서를 사용하여 사람들이 페이지의 다양한 부분에 조직적인 순서로 주의를 집중하도록 돕습니다.

움직이는 유형은 여기에서 엄청난 도움이 될 수 있습니다. 정적 신호 대신 유동적인 타이포그래피를 사용하여 문자와 단어를 사용자의 주의를 유도하는 데 도움이 되는 아이콘과 모양으로 변형할 수 있습니다.

사용자 교육

새로운 웹사이트를 시작하면 사람들이 웹사이트를 이해하기 어려울 수 있습니다. 그러나 대화형 기능이 도움이 될 수 있습니다.

콘텐츠 마케팅 연구에 따르면 마케터의 93%는 양방향 콘텐츠가 '잠재 고객 교육에 매우 효과적'이라고 생각합니다.

이제 이 대화형 콘텐츠는 블로그 게시물, 비디오, 인포그래픽 등 무엇이든 될 수 있지만 이동 유형(네비게이션, 메뉴, 검색 창, 이름 지정)을 통해 웹사이트의 다양한 영역에 움직임을 도입하면 교육이 증가합니다. 새로운 레이아웃에 대한 이해도는 10배입니다.

키네틱 유형으로 웹사이트를 인터랙티브하게 만드는 방법은 다음과 같습니다.

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-hop

이동식 활자가 웹사이트를 개선할 수 있는 또 다른 핵심 영역은 사람들에게 무엇에 집중해야 하는지 알려야 할 때입니다.

내 서비스 페이지를 생각해 보십시오. 기존의 정적 페이지가 제 역할을 할 수 있지만 키네틱 유형을 통해 사람들에게 어떤 서비스가 주요 제품인지, 어떤 서비스가 두 번째 제품인지 등을 알 수 있습니다. 이런 식으로 운동 유형은 틈새 시장을 설정하고 홍보하는 데 도움이 됩니다.

움직임 외에도 유형을 서비스와 관련된 다른 모양으로 변환하여 메시지를 보다 시각적으로 만들 수도 있습니다. 예를 들어 작가인 경우 깃펜 아이콘은 편집자로서의 기술을 나타내는 반면 전구 기호는 창의적인 컨설팅을 나타낼 수 있습니다.

사본의 다른 글자가 이 새로운 아이콘으로 변형되면 엄청나게 재미있고 매력적으로 보일 뿐만 아니라 약간의 개성도 드러납니다. 마케팅에서는 (대부분) 항상 플러스입니다.

https://dribbble.com/shots/13945869-My-Services

4. 상태 변경 또는 전환에 대한 사용자 준비

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

전자 상거래 또는 웹 브라우징 경험은 전환으로 넘쳐납니다. 당신은 항상 A 지점에서 B 지점, C 지점 등으로 이동합니다. 하드 컷 전환은 성가신 사용자 경험을 만듭니다. 한 곳에서 다른 곳으로 덜덜 떨리는 것을 좋아하는 사람은 아무도 없습니다. 부드럽고 액체와 같은 타이포그래피는 모든 것을 매끄럽게 유지하는 데 도움이 됩니다.

곧 다가올 변화에 대비해 사람들을 준비시킵니다. 준비하라고 말합니다. 쇼핑, 다운로드 또는 단순히 탐색의 다음 단계를 준비하는 마음가짐을 갖도록 도와줍니다.

부드러운 전환은 사용자의 관심을 유지하는 데에도 효과적입니다. 대기 신호를 표시하는 정적 페이지 대신 상징적 인 모션이있는 멋진 카피가 모든 사람들에게 큰 호응을 얻고 브랜드 분위기에 도움이 될 것입니다.

5. 웹사이트의 키워드, 구문 또는 영역 강조

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

웹사이트의 많은 부분이 텍스트로 구성되어 있습니다. 웹 카피, 설명 및 CTA가 몇 가지 예입니다. 키네틱 유형을 사용하기로 결정하면 이러한 텍스트 요소가 애니메이션되도록 할 수 있습니다. 핵심 메시지를 강조하는 것이 더 쉬워집니다.

온라인 주문을 완료할 때 장바구니 아이콘으로 변하는 CTA에 대해 생각해 보십시오. 또는 슬픈 표정으로 스스로를 실망시키는 오류 메시지. 또는 제목 위로 마우스를 가져가면 각 제목이 커지는 팟캐스트 에피소드 목록입니다.

모션 디자인의 일부로 키네틱 유형은 말하고 싶은 것을 강조하는 데 도움이 됩니다. 당신의 말의 힘을 두 배로하십시오. 따라서 의도와 생각을 가지고 사용하십시오.

6. 작업이 성공적으로 완료되면 시각적 피드백 제공

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

사용자가 UI를 사용할 때 제대로 하고 있다는 것을 알게 되면 도움이 됩니다. 오류 메시지, 확인 및 기타 형태의 시각적 피드백은 사용자가 수행해야 할 작업을 이해하는 데 도움이 됩니다. 사용자 행동을 강화하면 참여를 유지하고 수행해야 할 작업을 수행할 가능성이 높아집니다.

애니메이션 타이포그래피는 시각적 피드백의 효과적인 형태입니다. 빠르고, 경험의 흥분을 그대로 유지하고, 사용자가 추가 조치를 취하도록 권장합니다.

특히 오류 메시지에 사용할 때 중요한 역할을 합니다. 사람들이 다시 시도하고 좌절하지 않고 무엇이 잘못되었는지 정확히 말해주기를 바랍니다. 예를 들어, 사용자가 비밀번호를 두 번 잘못 입력하고 세 번째로 앱이 잠기면 사용자가 더 조심할 수 있도록 사실을 경고하는 애니메이션 오류 메시지를 포함할 수 있습니다.

보시다시피, 움직이는 유형으로 웹 사이트를 범람할 필요가 없습니다. 모든 것이 솔직히, 기괴하고, 너무 압도적으로 보일 것입니다. 계속 말하지만 어떤 종류의 애니메이션으로든 작업할 때 더 미묘하고 사려깊습니다. 경험을 향상시킬 때 수행하고 그 후에도 효과를 가볍고 부드럽게 유지하십시오.

7. 브랜드 톤 설정에 도움

https://dribbble.com/shots/17070314-SIMPLE

애니메이션 텍스트는 모든 산업에 도움이 될 수 있지만 일부 산업에서는 다른 산업보다 더 효율적입니다. 예를 들어 은행이나 보험을 들 수 있습니다. 거기에서 타이포그래피에 애니메이션을 적용할 수 있지만 매우 절제해야 합니다. 조금 더 오버하면 브랜드 캐릭터가 타격을 받을 수 있기 때문이다.

하지만 패션, 라이프스타일, 소매, 부동산, 아동복/의류/장난감 등을 생각하고 UI를 더 흥미롭게 만들기 위해 건전한 키네틱 유형을 사용하는 것이 훨씬 더 합리적으로 보입니다.

단독으로는 전체 브랜딩을 구축할 수 없지만 다른 도구와 함께 훌륭한 자산으로 작용할 수 있습니다.

테이크아웃

세 가지가 있습니다.

1. 목적을 가지십시오 . 그냥 예쁘니까 하지 마세요. 목적에 부합하기 때문에 그렇게 한 다음 아름답게 만드십시오.
2. 당신의 움직이는 유형에 검소하십시오 . 많이 걸릴 수 있습니다. 따라서 공간이 있고 가장 많은 결과를 얻을 수 있는 UI 영역에만 추가하십시오.
3. 분명히 하십시오 . 애니메이션을 추가할 때 가독성을 잃지 않는 글꼴 스타일을 사용하십시오. 또한 완벽하게 읽을 수 있는 유형 스타일을 엉망으로 만드는 애니메이션 스타일을 멀리하십시오.