ko ko ko en en en en en en ko en ko en ko ko ko zh ko ko ko ko en ko ko ko en ko ko ko ko en en en ko en en de ru en ko ko ko ko ko ko de ko de ko de ko de ko de ko de ko de ko de ko en ko ko ko ko en ko ko en
slowalk 2013. 4. 6. 07:30
마우스 제스처나 휠 스크롤에 따라 반응하는 재밌는 웹사이트를 보신 적 있나요? 인포그래픽에 인터랙션을 더해 재밌게 만들어 놓은 웹사이트를 소개합니다.
아래 웹사이트는 최근 오픈한 스티브잡스 추모 웹사이트 입니다. 하나의 페이지로 스티브잡스의 일대기에 대해 보여주고 있는데요. 상단의 고정된 메뉴를 클릭하면 웹사이트 자동으로 스크롤 되어 해당 콘텐츠로 이동하게 하는 대표적인 원 페이지 스타일 사례입니다.
2. 패럴랙스 스크롤(parallax scroll)
두 번째 유형은 원 페이지 스타일에서 조금 진화한  패럴랙스 스크롤(parallax scroll) 유형입니다. 패럴랙스란 단어는 우리 말로 '시차'로 번역할 수 있는데요. 웹사이트를 스크롤 할 때, 배경이 시차를 두고 이동한다는 의미입니다. 아래 예시 웹사이트를 먼저 봐주세요.
Vasona networks를 보면 화면의 오브젝트와 배경이 스크롤 되는 속도가 약간 다르다는 걸 볼 수 있습니다. 이렇게 배경과 오브젝트가 시차(parallax)를 두고 움직인다고 해서 이러한 유형을 패럴랙스 스크롤이라고 부른답니다. 화면의 요소들이 시차를 두고 움직이면 더욱 입체감있고 생동감 넘치는 사용자 경험을 전해줄 수 있습니다.
마지막으로 원 페이지와 패럴랙스 스크롤에 조금 더 세세한 인터랙션을 가미한 유형들을 볼 수 있습니다. The State of Financial & Economic Education(http://surveyofthestates.com/)이라는 웹사이트를 살펴보겠습니다.
The State of Financial & Economic Education(http://surveyofthestates.com/)
The State of Financial & Economic Education는 교육자금이라는 다소 딱딱할 수 있는 주제를 재밌는 인터렉션을 넣어 재밌게 보여주고 있습니다. 화면을 스크롤하면 상단에 숫자들이 올라가거나 내려가고 말풍선이나 현재 상태를 보여주는 재밌는 애니메이션들이 나타납니다. 내용에 따라 고정되는 오브젝트도 있고 스크롤에 따라 흘러가는 오브젝트들도 있습니다. 필요에 따라 오브젝트들이 애니메이션(이동, 크기 변화)를 보여줍니다. 또한 스크롤 뿐 아니라 요소들을 클릭했을 때, 자세한 정보를 보여주거나 소셜미디어로 공유할 수 있습니다.
인포그래픽 내용을 웹으로 옮겨 화면 이동과 스크롤에 반응하는 웹사이트 사례를 살펴봤습니다. 이렇게 인터랙션이 더해진 웹 인포그래픽은 정적인 화면으로 보여주는 것보다 사용자들의 참여를 유도하고 집중하게 만들어 양질의 정보를 제공할 수 있습니다.
이런 웹 인포그래픽, 인터랙션이 들어간 웹사이트는 마이크로 사이트로 기업의 애뉴얼리포트나 연혁, 캠페인을 소개하기에 적합합니다.
Code for America 의 annual report (http://annual.codeforamerica.org/)
Startups , this is how design works(http://startupsthisishowdesignworks.com/)
Head 2 heart (http://www.head2heart.us/)
더 많은 웹 인포그래픽를 보고 싶으시면 아래 링크를 방문해 주세요.
'Brand&Design' 카테고리의 다른 글
세계 최초! 접을 수 있는 바퀴  (0)
엄마를 위한 암 캠페인 Betype’s Against Cancer  (0)
미래를 위한 깃발디자인 프로젝트-북극의 깃발  (0)
씨앗을 빌려드립니다! Share Seeds 캠페인  (0)
[인포그래픽] 괴로운 스트레스, 해결하자!  (0)
지구의 날이 있는 4월에는 달력대신 이것을!  (2)
포스터로 조명을 켤 수 있다?  (0)
뉴스 그림으로 보자, 아이콘 타임즈  (0)
슬로워크, 시차스크롤, 원페이지, 웹, 웹디자인, 웹인포그래픽, 인터렉션, 인포그래픽, 패럴랙스
미래를 위한 깃발디자인 프로젝트-북극의 깃발
씨앗을 빌려드립니다! Share Seeds 캠페인
[인포그래픽] 괴로운 스트레스, 해결하자!
지구의 날이 있는 4월에는 달력대신 이것을!
이전 1 ··· 1006 1007 1008 1009 1010 1011 1012 1013 1014 ··· 2424 다음
© 2019 Slowalk, some rights reserved.