WEB/UI Trend Report 2013

UI Trend Report
2013 UI Design Trend

Fasoo ED Team
2013.01.30

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

Design Philosophy

Minimalism Authentically Digital

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

www.corporateriskwatch.com

www.designworkplan.com

www.informationarchitects.jp

Design Philosophy

Skeuomorphism Real Metaphor

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

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/


Grid System 기본 중의 기본

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

http://bohemianalps.com/tools/grid/

http://goldengridsystem.com/


Tile (brick) Layout Dynamic grid layout

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

http://wedpics.com/

http://pinterest.com/


Simple landing pages 랜딩 페이지의 변화

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

http://www.hongkiat.com/blog/beautiful-landing-pages/

Usability

Laser focus Instant behavior

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

Usability

Context sensitive navigation Context Cognition

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

Usability

Collapsed content Responsive disclosure

단계별로 정보의 구조를 노출하면서 사용자가 자연스럽게 정보 구조를 인지하고 현재 수행할 수 있는 업무를 파악할 수 있게 하는 UI 컨트롤
입니다.

http://webcloud.se/jQuery-Collapse/

Usability

Fixed-Position Navigation 고정영역 네비게이션

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

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/

Content

Content chunking 대량의 정보를 사용자 위주로 결합하여 제공한다.

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

Content

Long pages 스크롤이 훨씬 편하고 유용할 때가 있습니다. 아주 많이..

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

Design Style

Circular design elements Unique Object Metaphor

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

Design Style

Ribbons & Banner & Badge Unique Object Metaphor

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

Design Style

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

Design Style

Retro style Simple하고 Futuristic 한 스타일에 지쳤을 때

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

www.custom-design.ch www.level2d.com

www.sensisoft.com

www.targetscope.com

Design Style & Content

Custom Font Faces 폰트로 표현하는 Identity

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


Infographics 데이터를 아름답게 표현하는 방법

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


CSS Transparency 세련된 컨텐츠 표현 기법

레이어의 Transparency를 조절하는 기술은 이제 과거처럼 Flash 같은 번거로운 애드온을 깔지 않고도 손쉽게 CSS 3로 구현할 수 있게 되었
습니다. 약간의 퍼블리싱 기술만으로 굉장히 세련되면서 레이어 개념으로 배치되는 컨텐츠 디자인의 자유도를 높일 수 있습니다.

http://tympanus.net/codrops/2012/11/26/using-transparency-in-web-design-dos-
and-donts/

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

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

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

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

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

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

BlackBerry
http://us.blackberry.com/

Evernote
http://evernote.com/?noredirect

The
Krege
Foundation
http://kresge.org/

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

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

WEB/UI Trend Report 2013

Recommandé

Recommandé

Contenu connexe

Similaire à WEB/UI Trend Report 2013

Similaire à WEB/UI Trend Report 2013 (20)

WEB/UI Trend Report 2013