2015년 최고의 인터랙티브 웹사이트 24개

모두가 올해 웹 비디오의 인기에 대해 열광했지만 덜 알려진 형태의 시각적 콘텐츠(대화형 웹 사이트)가 훨씬 더 매력적일 수 있습니다. 이러한 사이트는 흥미로운 사진, 비디오, 단어 및 자극적인 개인 경험을 만드는 대화형 요소를 통해 풍부한 이야기 ​​속으로 시청자를 끌어들입니다. 이들은 훌륭한 대화형 웹사이트의 집합체에서 가장 훌륭하고 가장 밝은 별 중 일부입니다(우리는 올해 이맘때 어둠 속에서 많은 시간을 보내고 있습니다. 터무니없는 비유를 사용한 것에 대해 사과드립니다). 어쨌든 다음은 우리가 생각하기에 정말 좋은 인터랙티브 경험이 해야 할 일 중 일부입니다.

• 방대한 양의 데이터를 액세스 가능하고 관련성 있게 만드십시오.
• 알리거나 접대
• 상호 작용을 사용하여 각 뷰어에 대한 고유한 경험 만들기
• 정적인 콘텐츠가 가질 수 없는 감정적 연결 만들기

다음은 Visually 사무실 주변 사람들이 추천한 24가지 즐겨찾기입니다. 여기에는 뉴스 미디어, 브랜드, 지정학적 조직 및 단순히 재미로 작업하는 디자이너의 인터랙티브가 혼합되어 있습니다. 정말 깊이 파고 싶다면 Visually Community에서 직원이 선택한 전체 목록을 확인할 수도 있습니다. 우리는 공정하려고 노력했지만 우리가 꽤 자랑스러워하는 일부 대화형 웹사이트를 제작하기 때문에 일부는 목록에 잠입했습니다. 우리는 아래에서 작업한 것들을 불러왔습니다.

시간: 우주에서의 1년

중요한 이유: 이 대화형 웹사이트는 NASA 우주비행사 Scott Kelly의 국제 우주 정거장 여행과 2015년 우주에서의 시간을 보여줍니다. 에피소드로 제공되어 여행을 쉽게 탐색할 수 있도록 합니다. 이미지는 시각적으로 놀랍고 주제는 우리 모두에게 어린아이와 같은 탐구 정신을 불러일으킵니다. 맨 위에 있는 체리는 네 번째 벽을 허물어 현재 국제 우주 정거장이 있는 곳을 표시한 다음 밖으로 걸어가 하늘에서 발견하는 방법을 설명하는 것입니다.

최고의 인터랙티브 품질: 역동적인 배경은 Kelly의 여행과 작업을 기록하는 비디오 세그먼트로 이어집니다. 페이지 왼쪽에 있는 탐색 패널을 사용하면 섹션에서 섹션으로 쉽게 클릭할 수 있으며 NASA에서 기대할 수 있는 일종의 실시간 원격 측정 기능도 있습니다.

랜드로버: 배니싱 게임

중요한 이유: 이 대화형은 작가 William Boyd가 쓴 이야기를 생생하게 전달합니다. 그것은 스스로를 "디지털 및 소셜 시대의 놀라운 기술을 사용하여 이야기하는 모험"이라고 설명합니다. 번역하면 시청자가 받는 자극을 제어할 수 있는 대화형 비디오라는 뜻입니다. 이미지를 제거하고 스크롤 스크립트를 읽거나 내러티브를 듣거나 무성 영화를 위해 모든 것을 종료하십시오.

최고의 인터랙티브 품질: 제한된 탐색 버튼으로 멋진 비주얼과 스토리라인에 집중할 수 있습니다. 독자가 앞으로 스크롤하면 내용이 변경되어 시청자가 자신의 속도를 설정할 수 있습니다.

TSN: 빈민가 유나이티드

중요한 이유: 브라질의 빈곤한 빈민가에 대한 이 실화는 축구 문화에 의해 형성된 거친 젊은 여성의 프로필입니다. 극적인 전환과 놀라운 시각 효과로 뛰어난 보고 기능을 제공합니다.

최고의 인터랙티브 특성: 스토리는 강력한 인간 내러티브와 심오한 통계를 엮습니다. 이러한 고품질 보고, 사진 및 디자인의 조합은 완전히 매력적입니다.

NPR: 소녀는 꿈을 꿀 수 있다

중요한 이유: NPR은 오디오, 비디오 및 대화형 스토리보드를 결합하여 시청자를 교육 시스템에서 여성이 직면한 문제에 대해 자세히 살펴보기 위해 아프가니스탄의 학교로 여행을 안내합니다.

최고의 인터랙티브 품질: 스틸 프레임이 함께 ​​혼합되어 스토리를 앞으로 나아가게 하는 애니메이션을 만듭니다. 텍스트는 더 쉽게 읽을 수 있도록 이미지 하단에 겹쳐지는 작은 덩어리로 나뉩니다.

Cohn & Wolfe: 콜레스테롤 수치

중요 이유: 이 설명 내용은 콜레스테롤 관련 문제(평균 콜레스테롤 수치에서 인식 및 교육에 이르기까지)에 대한 통계를 통해 독자를 주별로 안내합니다. 전체 공개 : 이 콘텐츠를 시각적으로 제작했습니다.

최고의 대화형 품질: 클릭 가능한 지도는 이 이야기를 생생하게 전달하고 각 주에 대한 별도의 데이터 시각화는 이야기를 일관되고 매력적으로 만듭니다.

Photo World: Snapchat은 얼마나 큰가요?

중요한 이유: 이 대화형은 정말 재미있습니다. WhatsApp, Facebook 및 Instagram과 관련하여 Snapchat에서 매초 얼마나 더 많은 이미지가 공유되는지 보여줌으로써 각 플랫폼에서 콘텐츠 생성 범위가 빠르게 명확해집니다.

최고의 인터랙티브 품질: 소셜 플랫폼당 공유되는 총 사진 수가 늘어남에 따라 타이머가 초 단위로 작동합니다. 이렇게 하면 페이지에 긴박감이 더해지며 콘텐츠가 즉시 시청자와 관련이 있게 됩니다.

JLL: 더 스퀘어: 테크

중요 이유: 이 선택형 모험 스타일의 인터랙티브는 스타트업이 뉴욕 시에서 사무실 공간을 찾는 데 도움이 되도록 설계되었습니다. 사용자는 자신을 프로파일링한 다음 적절한 HQ를 찾는 방법을 이해하는 데 도움이 되는 엄청난 양의 데이터를 얻습니다. 전체 공개: 이 콘텐츠를 시각적으로 제작했습니다.

최고의 인터랙티브 품질: 콘텐츠를 버킷으로 분할하여 부동산 외부인도 콘텐츠에 접근할 수 있습니다. 데이터 시각화와 체크리스트의 조합은 정보를 실행 가능한 상태로 유지하면서 매끄럽게 보이게 합니다.

제이슨 데이비스: 세계 공항

중요 이유: 항상 인구 중심과 관련하여 전 세계 공항이 운영되는 위치를 알고 싶었습니다. 뭐라고? 알았어 괜찮아. 멋져 보이기 때문에 중요합니다.

최고의 인터랙티브 품질: 전 세계 아무 곳이나 마우스를 가져가면 각 지역에 서비스를 제공하는 공항을 알 수 있습니다. 클릭한 상태로 지구를 회전하고 존재하지 않았던 교통 허브를 발견하십시오.

인구 참조국: 2015년 세계 인구 데이터 시트

중요한 이유: 이 대화형은 전 세계 여성이 직면한 기회와 도전을 강조합니다. 일련의 비디오와 대화형 차트로 깔끔하게 정리된 중요한 데이터의 홍수입니다.

최고의 대화형 품질: 탐색은 클릭 가능한 수많은 버튼이 있는 단일 스크롤 화면에 포함되어 전 세계 인구, 출산율, 교육 등에 대한 2015년과 예상 2050년 통계를 비교하는 데이터를 표시합니다.

New York Times: 임대 또는 구매가 더 나은가요?

중요한 이유: 미국 내 어디에 거주하든 이 데이터 기반 도구 모음은 모기지 대 리스 논쟁을 이해하는 데 도움이 됩니다.

최고의 인터랙티브 품질: 슬라이딩 스케일을 사용하면 사용자가 위치의 연수, 집 가격, 임대료 증가에 대한 미래 예측 등의 호스트 데이터 요소에서 선택하여 임대 또는 구매 결정을 명확하게 할 수 있습니다. 페이지 오른쪽에 계산기가 설치되어 있어 독자가 다양한 입력에 대한 변경이 주택 구입 전망에 어떤 영향을 미칠 수 있는지 확인할 수 있습니다.

재즐: 10주년

중요한 이유: 제조업체와 디자이너가 맞춤형 제품을 출시하고 판매할 수 있는 플랫폼(직접 생산할 필요 없이)인 Zazzle은 타임라인과 데이터 기반 설명이 포함된 풍부한 경험을 통해 자신의 이야기를 전합니다. 전체 공개 : 이 콘텐츠를 시각적으로 제작했습니다.

최고의 인터랙티브 품질: 시청자는 Zazzle에서 제작된 생생한 디자인 스트림과 회사의 영향을 설명하는 통계를 볼 수 있습니다. 실제 고객의 이미지와 이야기는 깊이를 더하고 Zazzle과의 협력 가치를 강조합니다.

23과 나: 23쌍의 염색체. 하나의 놀라운 당신.

중요한 이유: 유전학 섹션에서 과학 시간에 주의를 기울이지 않았다면 여기에서 실제로 무언가를 배울 수 있습니다. 전체 공개 : 이 콘텐츠를 시각적으로 제작함

최고의 상호 작용 특성: 다채로운 염색체 쌍을 클릭할 수 있으며 각각과 관련된 가계 및 유전 질환에 대한 정보를 표시합니다. 반응에 대한 보너스 포인트.

Saxum: 미국 에너지

중요한 이유: 이 대화형을 통해 미국의 에너지 생산 및 소비에 대해 많은 것을 쉽게 배울 수 있습니다. 넓은 영역에 대한 광범위한 추세를 확인한 다음 드릴다운하여 각 주에 대한 자세한 정보를 확인합니다.

최고의 대화형 품질: 클릭 가능한 지도는 가장 관련성이 높은 정보를 찾은 다음 컨텍스트를 제공할 수 있도록 비교 도구와 쌍을 이룹니다.

목표한 승리: 50개의 웨이스트 오브 웨이스트

중요한 이유: 당신이 정치인이나 정치 조직가라면, 이것이 당신을 당황하게 만들 것입니다. 이 인터랙티브는 정치 TV 광고의 영향력이 실제로 얼마나 작은지를 보여줍니다. 전체 공개: 이 콘텐츠를 시각적으로 제작했습니다.

최고의 인터랙티브 품질: 미국 지도에 겹쳐진 데이터 시각화는 모든 방송 1달러 중 75센트가 잘못된 유권자에게 낭비되었다는 통계를 보여줍니다. 그렇군요.

Martin Ollivere: 누가 세계의 부를 호가하는가?

중요 이유: 우리는 소득 불평등에 대해 자주 듣지만 이 시각화는 시각적 돼지 은유로 세분화하여 주제를 더 풍부하게 만듭니다.

최고의 인터랙티브 품질: 단순함은 이 인터랙티브를 가능하게 합니다. 이동하는 사각형 격자는 더듬거리기 쉽고 숫자의 신중한 사용은 격차의 이야기를 명확하게 알려줍니다.

린 피셔 & 닉 크론: 공항 코드

중요 이유: 이제 탑승권에 있는 이상한 약어를 모두 해석할 수 있습니다. 결론적으로 이것은 언젠가 Jeopardy에서 승리하는 데 도움이 될 멋진 디자인입니다.

최고의 인터랙티브 품질: 우리는 전 세계의 공항이 포함된 이 인터랙티브의 포괄적인 특성을 좋아합니다. 타일을 클릭하면 흥미로운 사실을 알 수 있습니다. Leslie Nielsen과 Airplane의 승무원이 등장하는 엄선된 GIF를 보려면 "정보" 탭을 클릭 하세요!

BBC 미래: 지구의 중심으로의 여행

중요한 이유: 어렸을 때 뒷마당에서 지구 반대편으로 구덩이를 파는 꿈을 꾸었을 것입니다. 이 대화형을 사용하면 실제로 그렇게 할 수 있습니다. 당신은 지구의 핵심으로 여행하고 그 길을 따라 발견하게 될 것에 대해 엄청나게 많은 사실을 배우게 될 것입니다.

최고의 인터랙티브 품질: 스팀펑크 장비를 착용하고 지하로 내려가 서양 문화의 표준 무덤 깊이, 펭귄이 뛰어내릴 수 있는 거리 등에 대해 알아보세요. 우리는 삽화가 들어간 다이빙 차량, 코어로 가는 경로를 따라 흩어져 있는 데이터 포인트, 아래로 스크롤할 때 풍경이 변하는 방식을 좋아합니다. 이것은 순수한 재미와 정말 흥미 롭습니다.

PartyPoker: 포커에 대한 두뇌

중요 이유: 당신의 괴짜 과학은 포커 기술 수준(초보자, 아마추어 또는 전문가)에 따라 뇌가 어떻게 기능하는지를 묘사한 이 삽화를 좋아할 것입니다.

최고의 인터랙티브 품질: 작동 중인 두뇌의 이미지를 볼 수 있을 뿐만 아니라 카드를 뒤집고 설명 동영상을 보고 테이블에서 경쟁자를 화나게 하는 방법에 대한 팁을 읽을 수 있습니다.

유네스코 통계 연구소: 낙오자

중요한 이유: 이미 언급했듯이 올해 최고의 인터랙티브 중 다수는 전 세계 여성이 직면한 주요 문제에 초점을 맞췄습니다. 이 대화형은 동등한 부분의 교육 및 옹호입니다. 함께하면 전 세계적으로 교육을 홍보할 수 있습니다.

최고의 인터랙티브 품질: 스토리를 자세히 살펴보면 페이지의 왼쪽 여백에서 탐색 점을 발견할 수 있습니다. 실제 인물의 사진을 보고 설명 텍스트의 맥락에서 차트를 보고 마지막으로 어떻게 변화를 줄 수 있는지 배우게 됩니다. #leftbehind 해시태그를 사용하면 소셜 미디어에서 지속적인 대화를 유도할 수 있습니다.

ElkanoData: 이동 중인 팬

중요 이유: 스포츠에서 콘서트, 극장에 이르기까지 국제 티켓 판매를 기반으로 하는 세계에서 가장 인기 있는 이벤트의 놀라운 시각화에서 엔터테인먼트는 글로벌 스포츠가 됩니다.

최고의 인터랙티브 품질: 이 인터랙티브를 실행하면 꺼지고 실행된다는 사실이 매우 마음에 듭니다. 예를 들어 Arcs는 슈퍼볼 티켓을 구매한 사람을 보여주고 데이터가 즉시 표시되어 이벤트에 참석하기 위해 얼마나 많은 팬이 고국을 떠났는지, 어떤 위치가 상위 출신 국가를 대표하는지 등을 보여줍니다. 데이터 흐름을 허용하거나 중지하여 자세한 스냅샷을 얻습니다.

큰 그룹: 오스카 드레스

중요한 이유: TV에서 어떤 스타일 트렌드를 놓치고 있는지 확인하기 위해(어떤 경우에는 재미를 위해) 이러한 수상 쇼를 시청한다는 것을 알고 있습니다.

최고의 인터랙티브 품질: 1954년 이후의 드레스를 클릭하면 해당 유명인을 빛나게 한 스타일의 더 큰 버전을 볼 수 있습니다. 우리는 각 팝업 상자의 상단에 있는 대담한 소셜 공유 아이콘과 깔끔한 ​​프레젠테이션을 좋아합니다. 적은 수의 종소리와 휘파람 소리가 더 매력적인 프레젠테이션을 만들 수 있습니다.

워싱턴 포스트: 다수의 환상

중요한 이유: 이 뉴스 기사의 대화형 퀴즈 질문은 우리가 어떤 주제에 대한 영향력과 대중적 의견의 본질에 대해 실제로 아는 것이 거의 없음을 보여줍니다.

최고의 인터랙티브 품질: 이 뉴스 기사의 맨 위에 있는 빠른 인터랙티브를 사용하면 독자가 초기에 독자의 관심을 끌 수 있고 데이터 시각화를 더 많이 읽고 소화할 수 있습니다. 그것은 또한 그것이 묘사하는 사회적 현상을 보여줌으로써 이야기를 개인적으로 만듭니다.

WBEZ, 호기심 많은 도시: 버스 번칭

중요한 이유: 이 유머러스하면서도 교육적인 인터랙티브에 긴 대중 교통 대기 시간에 대한 불만을 표출하십시오.

최고의 인터랙티브 품질: 클릭 가능한 화살표를 통해 독자는 스토리에서 앞뒤로 탐색할 수 있으며 버스 일정이 자연스럽게 엉망이 되는 방법을 단계별로 설명합니다. 계속해서 문제에 대한 솔루션을 제안합니다. 각 솔루션은 여전히 ​​라이더를 화나게 할 수 있음을 분명히 합니다. 우리는 이 인터랙티브가 정교한 개념에 접근할 수 있게 하고 감정적 연결을 만드는 방식을 좋아했습니다.

유네스코 통계 연구소: 학교 밖 아동

중요한 이유: 이 대화형은 자신을 발전시키고 미래의 가족을 지원하며 지역 사회에 환원하는 데 필요한 교육을 받지 못하는 어린이의 문제를 해결합니다.

최고의 인터랙티브 품질: 애니메이션 소개가 시청자를 위한 무대를 설정한 후 오른쪽 레일을 따라 클릭 가능한 버튼을 통해 개별 국가의 교육 격차를 엿볼 수 있습니다. 데이터 포인트는 위치(시골 및 도시), 성별, 상대적 자산에 따른 교육 불평등을 분석합니다. 클릭할 때마다 움직이는 아이들이 페이지를 앞뒤로 뛰어다니며 그들이 실현되지 않는 진정한 꿈을 가진 실제 사람들이라는 점을 강조합니다.

더 많은 영감을 찾고 계십니까? 우리가 가장 좋아하는 대화형 시각화를 더 보거나 Ultimate Video Playbook에서 비디오 마케팅에 대한 팁, 트릭 및 모범 사례를 확인하십시오.