web/ui trend report 2013
DESCRIPTION
UI trend report by Fasoo ED team 2013.01.28TRANSCRIPT
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
