웹 제작자로서 영감을 주는 애니메이션이 있는 웹사이트 9곳

웹 제작자는 제품 또는 서비스의 진정한 가치를 나타내는 최신 유행 디자인 효과로 웹 사이트를 업데이트하기 위해 끝없는 탐구를 하고 있습니다. 그러나 색상 팔레트, 타이포그래피, 응답성, 콘텐츠 전략 등 고급 디자인 기술에 대한 생각은 다소 위협적일 수 있습니다. 디자인 가치가 있는 웹사이트를 만드는 가장 좋은 방법 중 하나는 동료에게 영감을 주는 것입니다. 그들의 디자인에 대해 무엇을 좋아하는지, 그것이 당신의 디자인과 어떻게 관련될 수 있는지, 필요에 따라 어떻게 수정하고 싶은지 스스로에게 묻는 것은 실제로 매우 간단할 수 있습니다.

창의적인 웹사이트 애니메이션의 아홉 가지 예를 확인하고 전문가로부터 배우기 시작합시다.

Handwrytten이 홈페이지의 영웅 섹션에서 사용하는 애니메이션 기술은 펜과 잉크를 결합한 제품 자체의 신랄한 표현입니다. 이 디자인의 핵심 가치 중 하나는 웹 사이트 방문자가 제품이 제공하는 이점과 제품을 사용하여 얻을 수 있는 이점을 즉시 이해한다는 것입니다.

만화 삽화와 나란히 놓인 손으로 쓴 카드의 사진이 모든 것을 말해줍니다. 페이지의 다른 디자인 요소는 선셋 오렌지가 가미된 ​​깔끔한 화이트와 블랙 색상이 세련미와 예술적 감각의 균형을 이룹니다. 이 웹사이트를 탐색한 후에 우리는 더 둘러보고 Handwrytten의 제품에 대해 더 많이 배우고 싶은 동기가 생겼습니다.

Crisp는 벡터 일러스트레이션에 작은 애니메이션 효과를 추가하여 일러스트레이션의 작은 크기에도 불구하고 공명하는 브랜드 메시지를 전달합니다. 각 벡터 일러스트레이션의 절제된 애니메이션은 실제로 Crisp의 브랜드 페르소나에 인간적인 터치를 더합니다. 우리는 특히 고객 지원에 대해 설명하는 섹션에서 애니메이션 모닥불을 좋아합니다. 홈페이지 전체에서 우아하게 사용되는 미니멀하고 평평한 디자인에 생명을 더합니다. 이것은 흥미진진한 사용자 경험에 필요한 삶의 기쁨을 추가하면서 이러한 트렌디한 평면 디자인 기술을 사용하는 완벽한 방법입니다.

Corebook은 사이트를 아래로 스크롤할 때 미묘하고 매끄러운 애니메이션과 함께 완전한 다크 모드에서 웹사이트 방문자를 환영합니다. Corebook은 고유한 방식으로 검은색 바탕에 짙은 회색 사이의 대비가 부족함에도 불구하고 쉽고 명확하게 볼 수 있는 영웅 애니메이션을 디자인하는 방법을 찾습니다.

애니메이션 콘텐츠의 선택은 미니멀하면서도 유익합니다. 이것은 몇 가지 정사각형 모양과 색상으로 가능하며, 애니메이션은 고객이 Corebook에 합류한 후 손에 쥐게 될 완제품(브랜드 책)의 유형을 보여줍니다. 트렌디하고 세련된.

Best Day Ever는 반복되는 애니메이션 기법을 사용하여 동물 일러스트레이션이 트리거에 의존하여 계속 움직이지 않도록 합니다. 웹사이트 방문자에게 어떤 삽화가 보이든 화면에서 볼 수 있는 한 계속해서 움직입니다.

단어와 문장이 필요 이상으로 짧고 길지 않기 때문에 페이지 전체에 내용 우선 접근 방식이 있습니다. 최소한의 텍스트와 경쾌하고 다채로운 디자인의 조합으로 친숙한 애니메이션과 매우 잘 어울리는 것은 바로 이러한 유형의 접근 방식입니다. 동물의 움직임은 텍스트에 생명을 불어넣을 뿐만 아니라 모든 사용자에게 대화 경험을 제공합니다.

Best Day Ever의 웹사이트는 하나의 아이디어와 디자인 원칙(이 경우 활기찬 신선함과 미묘함을 결합하는 테마)을 어떻게 색 구성표, 콘텐츠 전략 및 고급 디자인 효과를 통해 일관되게 표현할 수 있는지 보여주는 대표적인 예입니다.

누가 클래식 볼 구덩이를 좋아하지 않습니까? Google은 흰색 배경에 고전적인 브랜드 색상을 사용하여 금을 다시 한번 강타했습니다.

단 하나의 마우스 추적 효과로 Google은 웹사이트 방문자가 실제로 볼 구덩이 안에 있는 것처럼 느끼게 하는 사용자 경험을 이끌어냅니다! 그리고 페이지를 아래로 스크롤하면 공이 더 커집니다. 공 아래에는 내용물이 없으며 실제와 동일합니다.

Google은 이 제품의 용도에 대한 즉각적이고 감각적인 이해를 제공하며 간단한 영웅 텍스트 제목 설명과 CTA 버튼으로 이를 수행합니다.

우리는 Google이 우리를 실망시키지 않을 다음 모험을 계획하는 데 도움을 줄 것임을 알고 있습니다. 버튼 위로 마우스를 가져가면 색상이 바뀌는 효과를 보았습니까? 호버 효과가 한 색상에서 다른 색상으로 변경되지 않고 4개의 개별 색상으로 변경되는 버튼을 본 것은 이번이 처음입니다.

우리가 전에 본 적이 없는 것과 같습니다. 바로 눈앞에서 우리는 움직이는 추상적인 모양이 동물의 삽화를 형성하는 것을 봅니다. 아름다운 동물에 감탄하고 다른 동물들은 어떤 동물을 사용했는지 궁금해하는 호기심을 불러일으킵니다.

이것이 바로 웹사이트 방문자가 갖고 싶어하는 사고 과정입니다. 당신은 그에게 시각적인 이야기를 하고 있고 그가 그 이야기의 다음 페이지를 넘기기를 원합니다.

생각해 보면 스토리텔링과 멸종 위기에 처한 종의 원인에는 많은 공통점이 있습니다. 두 가지 모두 듣는 사람의 관심을 끌고 당신의 주제가 가장 중요하다고(미묘하게) 설득하는 것입니다.

대마초 산업은 여전히 ​​참신하고 신선하므로 제품으로 판매하는 웹사이트에는 동일한 느낌의 모양과 분위기가 필요합니다.

애니메이션 이미지 모음 뒤에 있는 슬라이드쇼 배경, 3D 효과, 회전하는 단어 등... 그리고 모든 것이 아름답게 보입니다.

누가 이 홈페이지를 보고 더 이상 웹사이트를 탐색하고 싶지 않을 수 있습니까? 이렇게 해야만 아래로 스크롤할 때 입이 떡 벌어지는 애니메이션이 더욱 멋지게 변하는 것을 볼 수 있습니다.

페이지 아래로 내려가면 병이 회전하고 배경이 흰색으로 바뀌면서 컬러 배경의 개체가 페이지 여백으로 미끄러지는 방식이 마음에 듭니다. 너무 창의적입니다. 아래로 내려갈수록 더 아름다운 3D 개체가 위쪽으로 수직 스크롤 효과를 유지하고 있습니다.

이 모든 기술이 결합되어 흥미진진한 시각 자료와 디자이너가 다음에 생각해 낸 것을 보기 위해서라도 계속해서 웹 사이트를 더 많이 읽고 싶은 느낌을 줍니다.

다른 페이지로 이동하면 홈페이지의 영웅 콘텐츠에서 3D 개체가 배경의 영구적인 부분이 되면서 여전히 떠다니고 움직이는 것을 볼 수 있습니다. 이러한 연속성을 선택하면 요점을 집에 더 가깝게 만드는 전체적인 스토리텔링이 가능합니다. 우리는 멋진 제품입니다.

색 구성표, 3D 디자인, 절제된 이미지 움직임 또는 홈페이지를 스크롤할 때 곡예와 같은 움직임으로 내려오는 신용 카드 일러스트입니까?

그것은 모든 것의 약간입니다.

여기의 색 구성표는 먼 길을갑니다. 많은 공백으로 둘러싸인 주황색 음영과 단순하고 둥근 산세리프 글꼴이 모두 전체적으로 함께 작동합니다. 그러나 여기서 정말 중요한 것은 신용 카드 일러스트레이션에 사용된 애니메이션 기술입니다.

RappiPay는 독창성과 놀라운 참여에 대한 투표를 받았습니다. 사이트 콘텐츠는 방문자가 바닥에 닿을 때까지 페이지 아래로 안내합니다. 신용 카드가 페이지 아래로 부드럽게 미끄러지면서 다른 이미지와 삽화가 나타나게 하기 때문입니다. 그리고 신용 카드와 다른 요소 간의 상호 작용(예: 현금 지폐를 표시하거나 구 주위에 점선을 그리는 것) 사이에서 카드는 곡예적인 반전을 보여줍니다.

신용카드가 스토리를 잘 전달하듯이, 액션과 활력이 넘치듯, 역시 하이에서 끝난다. 카드 소유자의 구매를 보여주는 끝 부분의 원형 컷은 이 카드 하나에 얼마나 많은 기능과 기능이 있는지, 그리고 카드 소유자가 실제로 그것을 어디에서나 가져간 방법을 알려줍니다.

미니멀리즘과 최첨단이라는 단어는 여기에서 생각할 수 있는 전부입니다. 한 장의 그림이 천 개의 단어를 말한다면 애니메이션 그림은 5,000개 또는 그 이상을 말할 수 있습니다.

자, 이제 당신 차례입니다. 여기에 나열된 애니메이션 기술은 웹 제작자가 웹 사이트에 애니메이션 기능을 추가할 때 수행할 수 있는 작업의 극히 일부에 불과합니다. 매일 점점 더 많은 영감을 얻을 수 있으며 보고 배울 것이 너무 많습니다. 디자이너로서 우리의 모토는 기본에서 시작하는 것이며, 간단한 애니메이션 연습을 하게 되면 웹사이트는 움직이는 사람과 흔들리는 사람이 된다는 것이 무엇을 의미하는지 세상에 보여줄 수 있습니다.