web/ui trend report 2013
Post on 25-Jan-2015
3.775 Views
Preview:
DESCRIPTION
TRANSCRIPT
UI Trend Report2013 UI Design Trend
Fasoo ED Team2013.01.30
2013 UI Design Trend Research
Design Trend Keyword Map2013 UI design trend 를 알아봅시다 .
Laser focus
Context sensitive navigation
Collapsed content
Content chunking
Long pages
100% BG image
Responsive Web Design
Fixed-Position Navigation
Circular design elements
jQuery/CSS3/HTML5 Interaction
Ribbons & Banner & Badge
Design Style
Custom Font Faces
Usability
Retro style
Content
Simple landing pages
Grid System
Tile (brick) Layout
Infographics
CSS Transparency
Minimalism Skeuomorphism
UI Design Trend Map
Authentically Digital
Microsoft 가 주도하는 심플하고 디지털 환경에 최적화된 UI 디자인 스타일입니다 . ( 일명 Metro UI) 디지털 환경에 익숙해진 사용자의 멘탈 모델을 고려하여 정보 및 기능을 쉽게 표현하고 그룹핑 할 수 있는 기하학적인 메타포를 적절히 활용하여 쾌적한 사용경험을 제공하는 데 포커스를 맞추고 있습니다 .
Minimalism
www.corporateriskwatch.com
www.designworkplan.com
www.informationarchitects.jp
Design Philosophy
Real Metaphor
Apple Design Philosophy 가 반영된 UI 스타일입니다 . 현실 ( 아날로그 ) 메타포의 시각 요소나 그밖의 요소 (Transition, sound) 등을 UI 구현에 적용하여 현실 요소를 사용하는 듯한 익숙한 경험을 제공하는 것을 중시합니다 .
Skeuomorphism Design Philosophy
For Seamless Experience
HTML 5 와 CSS 3 를 기반으로 구현되는 최근 Web page 구현의 핵심 Trend. 모든 종류의 브라우저 , 플랫폼에서 사이즈와 사용환경을 막론하고 동일한 컨텐츠 경험을 제공하기 위한 웹기술 기반 디자인입니다 . 2013 년 현재 가장 중요한 Web UI trend 라고 볼 수 있습니다 .
Responsive Web Design
http://mediaqueri.es/
http://sk.co.kr/mainpage.aspx#
http://www.cj.co.kr/
Design Style & Content & Usability
기본 중의 기본
편집 디자인 시절부터 컨텐츠 레이아웃의 핵심 원칙이었던 그리드 시스템은 Responsive web 이 UI 구현의 핵심 트렌드가 되면서 그 중요도가 훨씬 더 중요해 졌습니다 . 이제 그리드 원칙을 준수하지 않는 컨텐츠 레이아웃은 사용자에게 기괴함과 더불어 불쾌감을 안겨주는 시대가 왔습니다 .
Grid System
http://goldengridsystem.com/
http://bohemianalps.com/tools/grid/
Design Style & Content & Usability
Dynamic grid layout
유형화 할 수 있는 대량의 정보가 실시간으로 갱신되는 웹사이트가 많아지면서 (SNS, 뉴스사이트 등의 CP 및 Live 한 느낌을 주기 위한 인덱스 페이지 등 ) 해당 정보 단위 자체를 Tile 이나 블록처럼 여러 개가 모여 전체를 구성하는 템플릿 형태로 디자인 하는 사례가 많아지고 있습니다 . 정보 단위를 하나의 시각 단위로 디자인 하게 되면 정보 갱신 및 열람 , 정렬 , 검색 등이 용이하며 특히 제스쳐 기반으로 작동하는 모바일에서 유용합니다 .
Tile (brick) Layout
http://pinterest.com/
http://wedpics.com/
Design Style & Content & Usability
랜딩 페이지의 변화
기존에는 랜딩페이지만 방문했다가 서비스를 벗어나거나 페이지 이동 자체를 불편해하는 사용자를 위해 화면 리소스가 허락하는 한계치까지 컨텐츠와 기능을 랜딩 페이지 ( 시작 페이지 ) 에 쑤셔 넣는것이 정석이었다면 철저한 사용자 분석을 통해 실제 사용하는 최소한의 기능과 최소한의 컨텐츠 만 배치한 랜딩 페이지를 디자인 하여 자연스럽게 사용자를 다음 단계의 W/F 로 유도하는 것이 트렌드가 되었습니다 .
Simple landing pages
http://www.hongkiat.com/blog/beautiful-landing-pages/
Design Style & Content & Usability
Instant behavior
사용자가 수행해야 할 Task 를 혼동하지 않도록 직관적으로 인식시키는 UI 컨트롤 구현 합니다 . HTML 5 를 비롯한 RIA 기술의 발전으로 손쉽게 구현 가능해졌습니다 .
Laser focusUsability
Context Cognition
사용자의 사용 맥락을 기반으로 활성화 / 비활성화가 자동으로 설정되면서 사용자가 해당 맥락에서 필요로 하는 기능을 적절하게 표시하는 맥락 기반 User Interface 입니다 .
Context sensitive navigationUsability
Responsive disclosure
단계별로 정보의 구조를 노출하면서 사용자가 자연스럽게 정보 구조를 인지하고 현재 수행할 수 있는 업무를 파악할 수 있게 하는 UI 컨트롤 입니다 .
Collapsed content
http://webcloud.se/jQuery-Collapse/
Usability
고정영역 네비게이션
손쉬운 Navigation 을 위해 Navigation 관련 구성요소를 페이지 이동이나 Scroll 여부와 관계 없이 고정적으로 표시 하는 UI 컨트롤 유형입니다 . Floating 방식 Navigation 이나 Remote UI 등을 예로 들 수 있습니다 .
Fixed-Position Navigation Usability
Flex 나 ActiveX 와 같은 설치형 애드온이 웹표준의 대세와 함께 사라지고 HTML 5 상에서 자바스크립트와 CSS 5 만으로 기존의 RIA 기반의 in-teraction 효과를 모두 구현할 수 있게 되면서 해당 기술을 적극 활용한 Interaction UI 및 컨텐츠 구현이 중요한 트렌드가 되었습니다 .
jQuery/CSS3/HTML5 Interaction
http://jsfiddle.net/addyosmani/P2HB9/show/
http://jsfiddle.net/addyosmani/XKrcX/show/
http://hobolobo.net/ http://beta.theexpressiveweb.com/
Usability
대량의 정보를 사용자 위주로 결합하여 제공한다 .
컨텐츠를 사용자가 쉽게 인지할 수 있는 단위로 묶어서 (Chunking) 대량의 정보를 보다 쉽게 전달하기 위한 기법 .(Apple, Samsung 등의 제품 페이지 참조 )
Content chunkingContent
스크롤이 훨씬 편하고 유용할 때가 있습니다 . 아주 많이 ..
과거처럼 무조건 적으로 긴 페이지를 쪼개서 페이지 단위로 컨텐츠를 배치하는 것 보다 잘 분류된 컨텐츠를 한 페이지에 길게 배치하여 스크롤 기반으로 브라우징 할 수 있게 컨텐츠를 배치하는 것이 사용자에게 훨씬 긍정적인 경험을 제공할 경우가 많습니다 . 특히 모바일 .
Long pagesContent
Unique Object Metaphor
대량의 정보를 섬네일로 처리할 때 자주 사용하는 사각형의 비주얼 메타포에서 벗어나 원형의 메타포를 활용하는 디자인 스타일 . 일상적인 디자인이 아니라 보다 유니크 한 느낌을 주고 싶을 때 적절히 활용 가능합니다 .
Circular design elements Design Style
최근 Modern Web 이라고 통칭하는 디자인 트렌드에서 자주 사용하는 비주얼 메타포 유형 .디자인의 범위가 아니라고 생각할 수 있는 정보 전달 혹은 기능 수행을 위해 배치 되는 UI 요소의 비주얼 퀄리티 역시 중요하게 생각하는 ( 디테일을 중시하는 ) 최근 디자인 트렌드를 알 수 있습니다 .
Ribbons & Banner & BadgeDesign Style
Unique Object Metaphor
Large photo backgrounds
비주얼을 중시하는 브랜드나 서비스의 경우 브라우저를 가득 채우는 High Quality 의 이미지를 활용하는 경우가 많습니다 .
100% BG image Design Style
Simple 하고 Futuristic 한 스타일에 지쳤을 때
애플의 스큐어몰피즘과는 다르게 레트로 한 이미지 자체를 유니크 한 감성을 표현하기 위한 디자인 요소로 활용하는 스타일을 말합니다 . 물론 모든 웹사이트나 UI 에 적용할 수는 없지만 특정 브랜드 컨셉을 강조하거나 고객에게 각인 시키거나 시각적 쾌감을 주기 원할 경우 활용할 수 있습니다 .
Retro style
www.sensisoft.com
www.custom-design.ch www.level2d.com
www.targetscope.com
Design Style
폰트로 표현하는 Identity
Adobe typekit 이나 구글 웹 폰트 등 유니크한 웹폰트 수급이 원활해 짐에 따라 폰트로 기업 및 서비스 아이덴티티를 적극적으로 표현하거나 폰트 자체를 비주얼 메타포로 활용하는 사례가 많아지고 있습니다 . (국문 사이트의 경우 한글과 영문의 차이로 범용적으로 적용하긴 힘듭니다 .)
Custom Font FacesDesign Style & Content
데이터를 아름답게 표현하는 방법
기존에는 수치를 기반으로 한 대량의 정보를 한 화면에 표시해서 일정한 해독 능력을 갖춘 사용자들에게 ‘전달’만 했다면 Infographic 이라는 개념은 대량의 정보 /컨텐츠를 효과적으로 표현하는 방법을 디자인적으로 해결하기 위한 트렌드라고 할 수 있습니다 . 똑같이 이해하기 쉽다면 아름답게 표현된 정보가 훨씬 인지하기 쉽고 정보제공자에 대한 호감도까지 상승 시킵니다 .
InfographicsDesign Style & Content
세련된 컨텐츠 표현 기법
레이어의 Transparency 를 조절하는 기술은 이제 과거처럼 Flash 같은 번거로운 애드온을 깔지 않고도 손쉽게 CSS 3 로 구현할 수 있게 되었습니다 . 약간의 퍼블리싱 기술만으로 굉장히 세련되면서 레이어 개념으로 배치되는 컨텐츠 디자인의 자유도를 높일 수 있습니다 .
CSS Transparency
http://tympanus.net/codrops/2012/11/26/using-transparency-in-web-design-dos-and-donts/
Design Style & Content
Good Design Website
top related