UI trend report by Fasoo ED team 2013.01.28

1. UI Trend Report
2013 UI Design Trend
Fasoo ED Team
2013.01.30

2. 2013 UI Design
Trend Research

3. Design Trend Keyword Map
2013 UI design trend를 알아봅시다.
Design Style
Retro style
Minimalism Ribbons & Banner & Badge Skeuomorphism
100% BG image
Circular design elements
Custom Font Faces
CSS Transparency Grid System
Infographics Simple landing pages
Responsive Web Design
Laser focus
Tile (brick) Layout
Content chunking
Context sensitive navigation
jQuery/CSS3/HTML5 Interaction
Long pages
Collapsed content
Content Usability
Fixed-Position Navigation
UI Design Trend Map

4. Design Philosophy
Minimalism Authentically Digital
Microsoft 가 주도하는 심플하고 디지털 환경에 최적화된 UI 디자인 스타일입니다. (일명 Metro UI) 디지털 환경에 익숙해진 사용자의 멘탈 모
델을 고려하여 정보 및 기능을 쉽게 표현하고 그룹핑 할 수 있는 기하학적인 메타포를 적절히 활용하여 쾌적한 사용경험을 제공하는 데 포커
스를 맞추고 있습니다.
www.corporateriskwatch.com
www.designworkplan.com
www.informationarchitects.jp

5. Design Philosophy
Skeuomorphism Real Metaphor
Apple Design Philosophy 가 반영된 UI 스타일입니다. 현실(아날로그) 메타포의 시각 요소나 그밖의 요소 (Transition, sound)등을 UI 구현에
적용하여 현실 요소를 사용하는 듯한 익숙한 경험을 제공하는 것을 중시합니다.

6. Design Style & Content & Usability
Responsive Web Design For Seamless Experience
HTML 5와 CSS 3를 기반으로 구현되는 최근 Web page 구현의 핵심 Trend. 모든 종류의 브라우저, 플랫폼에서 사이즈와 사용환경을 막론하고 동일한 컨
텐츠 경험을 제공하기 위한 웹기술 기반 디자인입니다. 2013년 현재 가장 중요한 Web UI trend라고 볼 수 있습니다.
http://mediaqueri.es/
http://sk.co.kr/mainpage.aspx#
http://www.cj.co.kr/

7. Design Style & Content & Usability
Grid System 기본 중의 기본
편집 디자인 시절부터 컨텐츠 레이아웃의 핵심 원칙이었던 그리드 시스템은 Responsive web이 UI 구현의 핵심 트렌드가 되면서 그 중요도가 훨씬 더 중요
해 졌습니다. 이제 그리드 원칙을 준수하지 않는 컨텐츠 레이아웃은 사용자에게 기괴함과 더불어 불쾌감을 안겨주는 시대가 왔습니다.
http://bohemianalps.com/tools/grid/
http://goldengridsystem.com/

8. Design Style & Content & Usability
Tile (brick) Layout Dynamic grid layout
유형화 할 수 있는 대량의 정보가 실시간으로 갱신되는 웹사이트가 많아지면서 (SNS, 뉴스사이트 등의 CP 및 Live한 느낌을 주기 위한 인덱스 페이지 등) 해
당 정보 단위 자체를 Tile이나 블록처럼 여러 개가 모여 전체를 구성하는 템플릿 형태로 디자인 하는 사례가 많아지고 있습니다. 정보 단위를 하나의 시각 단
위로 디자인 하게 되면 정보 갱신 및 열람, 정렬, 검색 등이 용이하며 특히 제스쳐 기반으로 작동하는 모바일에서 유용합니다.
http://wedpics.com/
http://pinterest.com/

9. Design Style & Content & Usability
Simple landing pages 랜딩 페이지의 변화
기존에는 랜딩페이지만 방문했다가 서비스를 벗어나거나 페이지 이동 자체를 불편해하는 사용자를 위해 화면 리소스가 허락하는 한계치까지
컨텐츠와 기능을 랜딩 페이지(시작 페이지)에 쑤셔 넣는것이 정석이었다면 철저한 사용자 분석을 통해 실제 사용하는 최소한의 기능과 최소
한의 컨텐츠 만 배치한 랜딩 페이지를 디자인 하여 자연스럽게 사용자를 다음 단계의 W/F로 유도하는 것이 트렌드가 되었습니다.
http://www.hongkiat.com/blog/beautiful-landing-pages/

10. Usability
Laser focus Instant behavior
사용자가 수행해야 할 Task를 혼동하지 않도록 직관적으로 인식시키는 UI 컨트롤 구현 합니다. HTML 5를 비롯한 RIA 기술의 발전으로 손쉽
게 구현 가능해졌습니다.

11. Usability
Context sensitive navigation Context Cognition
사용자의 사용 맥락을 기반으로 활성화/비활성화가 자동으로 설정되면서 사용자가 해당 맥락에서 필요로 하는 기능을 적절하게 표시하는 맥
락 기반 User Interface 입니다.

12. Usability
Collapsed content Responsive disclosure
단계별로 정보의 구조를 노출하면서 사용자가 자연스럽게 정보 구조를 인지하고 현재 수행할 수 있는 업무를 파악할 수 있게 하는 UI 컨트롤
입니다.
http://webcloud.se/jQuery-Collapse/

13. Usability
Fixed-Position Navigation 고정영역 네비게이션
손쉬운 Navigation을 위해 Navigation 관련 구성요소를 페이지 이동이나 Scroll 여부와 관계 없이 고정적으로 표시 하는 UI 컨트롤 유형입니다.
Floating 방식 Navigation이나 Remote UI 등을 예로 들 수 있습니다.

14. Usability
jQuery/CSS3/HTML5 Interaction
Flex나 ActiveX와 같은 설치형 애드온이 웹표준의 대세와 함께 사라지고 HTML 5 상에서 자바스크립트와 CSS 5만으로 기존의 RIA 기반의
interaction 효과를 모두 구현할 수 있게 되면서 해당 기술을 적극 활용한 Interaction UI 및 컨텐츠 구현이 중요한 트렌드가 되었습니다.
http://beta.theexpressiveweb.com/
http://hobolobo.net/
http://jsfiddle.net/addyosmani/P2HB9/show/
http://jsfiddle.net/addyosmani/XKrcX/show/

15. Content
Content chunking 대량의 정보를 사용자 위주로 결합하여 제공한다.
컨텐츠를 사용자가 쉽게 인지할 수 있는 단위로 묶어서 (Chunking) 대량의 정보를 보다 쉽게 전달하기 위한 기법.
(Apple, Samsung 등의 제품 페이지 참조)

16. Content
Long pages 스크롤이 훨씬 편하고 유용할 때가 있습니다. 아주 많이..
과거처럼 무조건 적으로 긴 페이지를 쪼개서 페이지 단위로 컨텐츠를 배치하는 것 보다 잘 분류된 컨텐츠를 한 페이지에 길게 배치하여 스크
롤 기반으로 브라우징 할 수 있게 컨텐츠를 배치하는 것이 사용자에게 훨씬 긍정적인 경험을 제공할 경우가 많습니다. 특히 모바일.

17. Design Style
Circular design elements Unique Object Metaphor
대량의 정보를 섬네일로 처리할 때 자주 사용하는 사각형의 비주얼 메타포에서 벗어나 원형의 메타포를 활용하는 디자인 스타일. 일상적인 디
자인이 아니라 보다 유니크 한 느낌을 주고 싶을 때 적절히 활용 가능합니다.

18. Design Style
Ribbons & Banner & Badge Unique Object Metaphor
최근 Modern Web 이라고 통칭하는 디자인 트렌드에서 자주 사용하는 비주얼 메타포 유형.
디자인의 범위가 아니라고 생각할 수 있는 정보 전달 혹은 기능 수행을 위해 배치 되는 UI 요소의 비주얼 퀄리티 역시 중요하게 생각하는 (디
테일을 중시하는) 최근 디자인 트렌드를 알 수 있습니다.

19. Design Style
100% BG image Large photo backgrounds
비주얼을 중시하는 브랜드나 서비스의 경우 브라우저를 가득 채우는 High Quality의 이미지를 활용하는 경우가 많습니다.

20. Design Style
Retro style Simple하고 Futuristic 한 스타일에 지쳤을 때
애플의 스큐어몰피즘과는 다르게 레트로 한 이미지 자체를 유니크 한 감성을 표현하기 위한 디자인 요소로 활용하는 스타일을 말합니다. 물론 모든 웹사이트
나 UI에 적용할 수는 없지만 특정 브랜드 컨셉을 강조하거나 고객에게 각인 시키거나 시각적 쾌감을 주기 원할 경우 활용할 수 있습니다.
www.custom-design.ch www.level2d.com
www.sensisoft.com
www.targetscope.com

21. Design Style & Content
Custom Font Faces 폰트로 표현하는 Identity
Adobe typekit이나 구글 웹 폰트 등 유니크한 웹폰트 수급이 원활해 짐에 따라 폰트로 기업 및 서비스 아이덴티티를 적극적으로 표현하거나 폰트 자체를 비
주얼 메타포로 활용하는 사례가 많아지고 있습니다. (국문 사이트의 경우 한글과 영문의 차이로 범용적으로 적용하긴 힘듭니다.)

22. Design Style & Content
Infographics 데이터를 아름답게 표현하는 방법
기존에는 수치를 기반으로 한 대량의 정보를 한 화면에 표시해서 일정한 해독 능력을 갖춘 사용자들에게 ‘전달’만 했다면 Infographic이라는 개념은 대량의
정보/컨텐츠를 효과적으로 표현하는 방법을 디자인적으로 해결하기 위한 트렌드라고 할 수 있습니다. 똑같이 이해하기 쉽다면 아름답게 표현된 정보가 훨씬
인지하기 쉽고 정보제공자에 대한 호감도까지 상승 시킵니다.

23. Design Style & Content
CSS Transparency 세련된 컨텐츠 표현 기법
레이어의 Transparency를 조절하는 기술은 이제 과거처럼 Flash 같은 번거로운 애드온을 깔지 않고도 손쉽게 CSS 3로 구현할 수 있게 되었
습니다. 약간의 퍼블리싱 기술만으로 굉장히 세련되면서 레이어 개념으로 배치되는 컨텐츠 디자인의 자유도를 높일 수 있습니다.
http://tympanus.net/codrops/2012/11/26/using-transparency-in-web-design-dos-
and-donts/

24. Good Design
Website

25. Apple
http://www.apple.com/

26. Dell
http://www.dell.com/

27. CJ
http://www.cj.co.kr/

28. SAMSUNG
http://www.samsung.com/us/#latest-home

29. MicroSoft
http://www.microsoft.com/en-us/default.aspx

30. Oracle
http://www.oracle.com/index.html

31. HP
http://www8.hp.com/us/en/home.html

32. Redbrick
Health
https://www.redbrickhealth.com/

33. IGN
http://corp.ign.com/

34. Logitech
http://www.logitech.com/en-us/home

35. BlackBerry
http://us.blackberry.com/

36. EA.com
http://www.ea.com/

37. Levis
http://levistrauss.com/

38. Evernote
http://evernote.com/?noredirect

39. The
Krege
Foundation
http://kresge.org/

40. Nest
http://www.nest.com/

41. Mint
https://www.mint.com/

42. Malcolm
Reading
Consultant
http://www.malcolmreading.co.uk/

43. LG
http://www.lg.com/us

44. SK
http://sk.co.kr/mainpage.aspx#