2012 UX Design Trend Report

© 2012 SYS4U I&C All rights reserved.

2012.12.28 UI/UX팀

마영희 주임

Part 2

목차

© 2012 SYS4U I&C All rights reserved.

I. 웹 디자인 트랜드 분석

II. 결론

I. 웹 디자인 트랜드 분석

© 2012 SYS4U I&C All rights reserved.

I. 각 사이트의 장단점

alpha.sony.co.kr/NEX-5R/

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 카메라의 컬러에 따라 배경색과 질감을 통일하여 확실하게 유저가 제품을 확실히 구분 할 수 있게 나타냈다. 제품을 사선형 그리드를 사용해 나타낸 것이 돋보인다.

alpha.sony.co.kr/NEX-5R/

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

서브페이지 소니카메라의 이벤트페이지로 카메라의 장점과 기능을 나타낸 페이지이다. 숫자와 화살표를 사용해서 성능적인 면을 더 강조하여 한눈에 알아보기 쉽다. 전체적인 블랙의 백그라운드와 오렌지의 폰트컬러가 전자제품의 세련미를 잘 나타내 주는 듯 하다. 두 가지 제품의 차이점을 확실히 구분 할 수 있다.

beoplay.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 전체적인 옐로우 백그라운드와 그레이톤의 메뉴가 조화가 잘 되었다. 폰트와 배경이 전체적으로 깔끔한 느낌을 전달해 준다.

단점 전체적으로 깔끔해 보이기는 하나 폰트와 배경의 컬러가 유사하여 가독성이 떨어지는 단점이 있다..

beoplay.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

서브페이지 메인 페이지와 같이 깔끔한 구성이 눈에 띈다. 하단의 메뉴도 제품의 각각의 색을 표현한 방식이 심플하면서도 세련되었다. 상단의 폰트배열이 잘 이루어져 가독성이 좋다.

comms.anz.co.nz

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 이 사이트의 가장 큰 장점은 마우스의 움직임에 따라 반응을 보인다는 것이다. 좌우로 움직임이 있을 때마다 상단의 배경이미지가 움직여 마치 그 공간에 있다는 생각이 들게 하여 유저에게 재미를 주었다. 그리고 블루계열의 배너에 흰색폰트를 넣어 가독성도 높다.

단점 움직임이 있는 것은 좋은데 메인 에도 움직임이 많아 컨텐츠 접근성에 어려움이 있다.

en.bulgari.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 명품시계 사이트답게 블랙을 백그라운드로 사용하여 고급스러운 이미지를 잘 살렸다. 메인 폰트도 시계와 같은 계열의 컬러를 써서 통일감을 주었다. 폰트의 배열도 상당히 깔끔하다.

kookboek.ikea.nl

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 재미있는 요소가 상당히 많은 사이트 이다. 주방용품사이트로 전체적으로 깔끔한 주방을 잘 나타냈으며, 컨텐츠 하나하나를 오려서 붙인 것처럼 표현한 모습이 눈에 띈다. 또한 각각의 컨텐츠가 움직임이 있어 유저의 시선을 사로잡는다. 색 배열이 이미지와 조화를 잘 이루었다.

단점 너무 많은 컨텐츠가 나열되어있어 산만하다. 메뉴와 로고가 하단에 위치해 있어 찾기가 어려웠다. 특히 제품의 로고의 위치 때문에 이 제품이 어떤 회사의 제품인지 처음에는 인지하기 어려웠다.

teatimerocks.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 현재 웹트랜드 라고 할 수 있는 스크롤을 이용한 디자인이 사용된 예라고 할 수 있다. 차를 소개하는 사이트로 깔끔한 이미지와 폰트로 차를 소개해 가독성이 좋고 한눈에 잘 들어온다. 또한 스크롤을 밑으로 내릴 때 마다 차 잎이 움직임이 있어서 재미적인 요소가 있고, 제품의 상징성이 더욱 강조 되는듯하다. 또한 심플한 메뉴 바와 전체적인 배경이 잘 어울린다. 단점 차잎의 움직임이 재미적인 요소가 있지만 스크롤을 내릴 때 마다 움직여서 다소 산만하다.

playeevoo.com/en

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 스마트폰 게임사이트로 각각의 특징을 실제화면으로 나타내어 보여줌으로써 유저에게 좀더 명확한 설명을 해주었다.

단점 메뉴가 하단으로 스크롤을 내려야만 나오기 때문에 서브메뉴에 대한 접근성이 떨어진다.

www.beanpole.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 의류사이트로 대 메뉴에 옷의 섬유로 디자인을 한 것이 상당히 눈에 띈다. 배경뿐 아니라 폰트에도 패턴을 사용해 폰트가 한 층 더 강조되어 보인다. 전체적으로 무채색을 사용하여 세련미가 강조되었다.

단점 전체적으로 무채색만을 사용하다 보니 특별히 강조되는 면이 없고 다소 밋밋한 느낌이 강하다.

www.leessangcompany.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 가수의 홈페이지로 전체적인 분위기에 가수의 음악적인 모습도 베어있는 듯 하다. 삼각형 안에 배치한 폰트도 가독성이 좋다. 또한 스크롤을 내릴 때마다 전체적으로 움직임이 있어서 생동감이 있다.

단점 컨텐츠가 사방에 분산되어 있어 한곳에 집중하기 힘들다.

www.mediosyproyectos.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 상당히 독특한 사이트이다. 홈페이지의 일부분만 보여주고 마우스를 움직이면서 전체의 모습을 볼 수 있다. 또한 컨텐츠가 사선으로 누워있어서 유저의 궁금증을 더욱 유발시킨다.

단점 처음 접한 사람들에게 다소 생소하고 하위 컨텐츠에 대한 접근성이 많이 떨어지는 점이 있다.또한 컨텐츠가 사선으로 누워있어서 눈에 잘 보이지 않는다.

www.mediosyproyectos.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

서브페이지 컨텐츠를 클릭하면 이와 같이 여러 개의 컨텐츠가 펴진다. 재미는 있지만 클릭하는데 다소 어려움이 있다.

www.nike.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 전체적으로 단순한 구성이지만 제품이미지가 눈에 잘 들어온다. 메뉴는 차분한 색으로 구성하여 제품을 더욱 강조 되게 했다. 스포츠제품 사이트답게 제품을 돋보이게 하는 효과들이 많이 사용되었다.

www.nike.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

서브페이지 임팩트 있는 하나의 이미지와 간결한 폰트 사용으로 깔끔함을 더했다. 여백이 많지만 비어있는 느낌보다는 깔끔함이 더 나타난다.

www.razri.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 스마트폰을 여러 대 나열해서 하나의 화면으로 구성한 것이 눈에 띈다. 더욱이 마우스를 좌우로 스크롤 할 때 마다 이미지에 움직임이 있어서 유저로 하여금 재미를 불러 일으킨다. 단순한 바둑판 그리드를 새로운 방식으로 표현하였다.

단점 마우스를 드래그해서 페이지를 이동해야 하는 방식이라서 처음 접한 유저들에게는 어려움이 따른다.

www.rei1440project.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 바둑판 그리드를 사용한 이미지 갤러리 사이트다. 메뉴 바를 최소화 하고 이미지에만 집중하게 해주었다. 백그라운드의 이미지는 현장감을 더욱 살려주었다.

www.rei1440project.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

서브페이지 이 사이트의 독특한 점은 이미지를 서칭 하는 방식이다. 각각의 이미지마다 촬영한 시각이 나타나 있어서 시간을 맞추면 시간에 맞는 이미지가 나타난다.

www.reserved.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 의류 사이트답게 메인 이미지가 눈에 띤다. 폰트보다는 이미지를 많이 사용하여 잡지화보 같은 느낌을 많이 주었다. 하나의 이미지를 선택 할 때마다 확대해서 볼 수 있어서 시원한 느낌을 준다.

www.reserved.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

서브페이지 이미지가 주를 이루는 사이트여서 정확히 어떤 상품을 나타내는 것이지는 잘 보여지지 않아 유저들에게 혼동을 줄 수 있다.

www.reserved.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

서브페이지 여백을 많이 주고 사진과 간단한 폰트만으로 구성하여 패션잡지 같은 느낌이 강하다. 편하게 잡지를 넘겨보는 듯해서 부담 없이 상품을 볼 수 있다.

www.samsungcard.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 기존 카드사 홈페이지 와는 다르게 아기자기한 일러스트 이미지를 많이 사용하였다.각각의 이미지 마다 고유의 컬러를 부여하여 조화롭게 구성하였다. 좌측에 블루 배너 쪽에 시선이 집중되어 이 사이트에 아이덴티티를 잘 나타냈다.

단점 폰트가 정리는 되어있지만 그레이톤의 폰트는 다른 폰트에 비해 눈에 잘 띄지 않는다.. .

www.samsungcard.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

서브페이지 카드소개책자를 형상화 하여 페이지를 구성하였다. 하나의 카드를 선택할 때마다 카드의 설명이 책에 펼쳐져 알기 쉽게 디자인 하였다. 선택된 컨텐츠는 그림자 효과를 주어 명확하게 표현하였다. 많은 폰트를 사용하기 보다는 여백의 공간을 살려서 깔끔하게 구성하였다.

www.snowbird.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 스키장 리조트 사이트로 오른쪽메뉴에 현재의 날씨와 기온이 알기 쉽게 구성되어있다. 폰트의 가독성도 뛰어나다. 좌우가 대조를 이루는 백그라운드 컬러를 사용하여 정보에 집중하기가 쉽다.

www.snowbird.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

서브페이지 리조트의 상세정보를 그래프로 볼 수 있어서 편하다. 그래프 컬러구성을 로고와 상단 바와 같은 색깔로 구성에 전체적으로 통일된 느낌을 받을 수 있다. 유저가 단시간에 빠르게 정보를 파악 할 수 있다.

www.sony.net

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 소니의 전자제품 사이트로 화면구성이 흥미롭다. 카메라에 사진모습이 그대로 담겨 마치 사진을 찍고 있는 모습을 보여주는 듯 하다. 현장감의 그대로 전해지는 디자인이다. 또한 설명을 나타내는 글을 더해서 깔끔한 모습을 보여준다.

www.sony.net

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

서브페이지 메뉴구성이 찾기 쉽고 아주 간결하다. 최소한의 메뉴로 유저의 접근성을 높혔다. 이로 인해 유저는 단시간에 서브페이지로 접근이 용이하다.

www.trytodestroyacandy.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 전체적으로 움직임이 많은 사이트 이다. 마우스를 이용하여 유저 자신이 컨텐츠에 움직임을 부여할 수 있다. 전체적으로 컨텐츠가 가운데 배치되어서 집중하기 쉽다.

단점 다만 움직임이 너무 많아서 전체적으로 산만하다. 폰트의 가독성이 조금 떨어진다. .

www.weareintheloop.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 에이전시 사이트로 로고에 메뉴가 구성되어있는 점이 특이하다. 하단에도 서브메뉴가 있고 선택한 것에 컬러가 부여되어 선택한 컨텐츠를 확실히 알 수 있다.

단점 전체적으로 그레이톤에 같은 색의 폰트를 써서 약간 허전한 느낌도 있고 폰트의 가독성이 떨어진다.

.

www.weareintheloop.com

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

서브페이지 각각의 컨텐츠를 서류함에 정리하듯이 표현하였다. 간단한 이미지와 폰트로 사용자가 정보를 간편하게 볼 수 있다. 또한 선택한 부분의 컨텐츠 컬러도 배경과 잘 조화를 이룬다.

www.zensorium.com/tinke

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

장점 스크롤을 이용한 디자인이다. 스크롤을 내리면서 상품이 이동을 한다. 페이지마다 상품의 설명을 해주면서 사용법까지 설명해주어 딱딱한 매뉴얼을 재미있고 알기 쉽게 표현하였다.

www.zensorium.com/tinke

© 2012 SYS4U I&C All rights reserved.

1. 각 사이트의 장단점

서브페이지 한눈에 보기에 깔끔하다. 간결한 상품설명과 이미지가 눈에 띈다.

I. 결론

© 2012 SYS4U I&C All rights reserved.

I. 결론

© 2012 SYS4U I&C All rights reserved.

1. 결론

1. 종 스크롤 방식

종 스크롤 방식으로 한 화면에 한 페이지만 보여주는 방식이 많이 사용되고 있다.

2. 마우스로 움직임을 부여

유저가 직접 마우스로 웹에 움직임을 부여하는 방식이 많아졌다.

3. 스크롤을 활용한 디자인

스크롤을 활용한 디자인이 다양해졌다. 유저에게 재미적인 요소를 주고 현장감도 느낄 수 있다.

최근의 트랜드로 보아 편집디자인을 인용한 웹 페이지 디자인이 당분간은 주류를 이룰 것 같습니다. 디자인은 점점 간소화 되고 심플하지만 정보는 더욱 임팩트 있게 전달하는 방법이 선호 될 것 같습니다.