WEB/UI Trend Report 2013

5,082 views

Published on

UI trend report by Fasoo ED team 2013.01.28

1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
5,082
On SlideShare
0
From Embeds
0
Number of Embeds
474
Actions
Shares
0
Downloads
282
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

WEB/UI Trend Report 2013

  1. 1. UI Trend Report2013 UI Design Trend Fasoo ED Team 2013.01.30
  2. 2. 2013 UI DesignTrend Research
  3. 3. Design Trend Keyword Map2013 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. 4. Design PhilosophyMinimalism Authentically DigitalMicrosoft 가 주도하는 심플하고 디지털 환경에 최적화된 UI 디자인 스타일입니다. (일명 Metro UI) 디지털 환경에 익숙해진 사용자의 멘탈 모델을 고려하여 정보 및 기능을 쉽게 표현하고 그룹핑 할 수 있는 기하학적인 메타포를 적절히 활용하여 쾌적한 사용경험을 제공하는 데 포커스를 맞추고 있습니다. www.corporateriskwatch.com www.designworkplan.com www.informationarchitects.jp
  5. 5. Design PhilosophySkeuomorphism Real MetaphorApple Design Philosophy 가 반영된 UI 스타일입니다. 현실(아날로그) 메타포의 시각 요소나 그밖의 요소 (Transition, sound)등을 UI 구현에적용하여 현실 요소를 사용하는 듯한 익숙한 경험을 제공하는 것을 중시합니다.
  6. 6. Design Style & Content & UsabilityResponsive Web Design For Seamless ExperienceHTML 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. 7. Design Style & Content & Usability Grid System 기본 중의 기본 편집 디자인 시절부터 컨텐츠 레이아웃의 핵심 원칙이었던 그리드 시스템은 Responsive web이 UI 구현의 핵심 트렌드가 되면서 그 중요도가 훨씬 더 중요 해 졌습니다. 이제 그리드 원칙을 준수하지 않는 컨텐츠 레이아웃은 사용자에게 기괴함과 더불어 불쾌감을 안겨주는 시대가 왔습니다.http://bohemianalps.com/tools/grid/ http://goldengridsystem.com/
  8. 8. Design Style & Content & UsabilityTile (brick) Layout Dynamic grid layout 유형화 할 수 있는 대량의 정보가 실시간으로 갱신되는 웹사이트가 많아지면서 (SNS, 뉴스사이트 등의 CP 및 Live한 느낌을 주기 위한 인덱스 페이지 등) 해 당 정보 단위 자체를 Tile이나 블록처럼 여러 개가 모여 전체를 구성하는 템플릿 형태로 디자인 하는 사례가 많아지고 있습니다. 정보 단위를 하나의 시각 단 위로 디자인 하게 되면 정보 갱신 및 열람, 정렬, 검색 등이 용이하며 특히 제스쳐 기반으로 작동하는 모바일에서 유용합니다. http://wedpics.com/http://pinterest.com/
  9. 9. Design Style & Content & UsabilitySimple landing pages 랜딩 페이지의 변화기존에는 랜딩페이지만 방문했다가 서비스를 벗어나거나 페이지 이동 자체를 불편해하는 사용자를 위해 화면 리소스가 허락하는 한계치까지컨텐츠와 기능을 랜딩 페이지(시작 페이지)에 쑤셔 넣는것이 정석이었다면 철저한 사용자 분석을 통해 실제 사용하는 최소한의 기능과 최소한의 컨텐츠 만 배치한 랜딩 페이지를 디자인 하여 자연스럽게 사용자를 다음 단계의 W/F로 유도하는 것이 트렌드가 되었습니다. http://www.hongkiat.com/blog/beautiful-landing-pages/
  10. 10. UsabilityLaser focus Instant behavior사용자가 수행해야 할 Task를 혼동하지 않도록 직관적으로 인식시키는 UI 컨트롤 구현 합니다. HTML 5를 비롯한 RIA 기술의 발전으로 손쉽게 구현 가능해졌습니다.
  11. 11. UsabilityContext sensitive navigation Context Cognition사용자의 사용 맥락을 기반으로 활성화/비활성화가 자동으로 설정되면서 사용자가 해당 맥락에서 필요로 하는 기능을 적절하게 표시하는 맥락 기반 User Interface 입니다.
  12. 12. UsabilityCollapsed content Responsive disclosure단계별로 정보의 구조를 노출하면서 사용자가 자연스럽게 정보 구조를 인지하고 현재 수행할 수 있는 업무를 파악할 수 있게 하는 UI 컨트롤입니다. http://webcloud.se/jQuery-Collapse/
  13. 13. UsabilityFixed-Position Navigation 고정영역 네비게이션손쉬운 Navigation을 위해 Navigation 관련 구성요소를 페이지 이동이나 Scroll 여부와 관계 없이 고정적으로 표시 하는 UI 컨트롤 유형입니다.Floating 방식 Navigation이나 Remote UI 등을 예로 들 수 있습니다.
  14. 14. UsabilityjQuery/CSS3/HTML5 InteractionFlex나 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. 15. ContentContent chunking 대량의 정보를 사용자 위주로 결합하여 제공한다.컨텐츠를 사용자가 쉽게 인지할 수 있는 단위로 묶어서 (Chunking) 대량의 정보를 보다 쉽게 전달하기 위한 기법.(Apple, Samsung 등의 제품 페이지 참조)
  16. 16. ContentLong pages 스크롤이 훨씬 편하고 유용할 때가 있습니다. 아주 많이..과거처럼 무조건 적으로 긴 페이지를 쪼개서 페이지 단위로 컨텐츠를 배치하는 것 보다 잘 분류된 컨텐츠를 한 페이지에 길게 배치하여 스크롤 기반으로 브라우징 할 수 있게 컨텐츠를 배치하는 것이 사용자에게 훨씬 긍정적인 경험을 제공할 경우가 많습니다. 특히 모바일.
  17. 17. Design StyleCircular design elements Unique Object Metaphor대량의 정보를 섬네일로 처리할 때 자주 사용하는 사각형의 비주얼 메타포에서 벗어나 원형의 메타포를 활용하는 디자인 스타일. 일상적인 디자인이 아니라 보다 유니크 한 느낌을 주고 싶을 때 적절히 활용 가능합니다.
  18. 18. Design StyleRibbons & Banner & Badge Unique Object Metaphor최근 Modern Web 이라고 통칭하는 디자인 트렌드에서 자주 사용하는 비주얼 메타포 유형.디자인의 범위가 아니라고 생각할 수 있는 정보 전달 혹은 기능 수행을 위해 배치 되는 UI 요소의 비주얼 퀄리티 역시 중요하게 생각하는 (디테일을 중시하는) 최근 디자인 트렌드를 알 수 있습니다.
  19. 19. Design Style100% BG image Large photo backgrounds비주얼을 중시하는 브랜드나 서비스의 경우 브라우저를 가득 채우는 High Quality의 이미지를 활용하는 경우가 많습니다.
  20. 20. Design Style Retro style Simple하고 Futuristic 한 스타일에 지쳤을 때 애플의 스큐어몰피즘과는 다르게 레트로 한 이미지 자체를 유니크 한 감성을 표현하기 위한 디자인 요소로 활용하는 스타일을 말합니다. 물론 모든 웹사이트 나 UI에 적용할 수는 없지만 특정 브랜드 컨셉을 강조하거나 고객에게 각인 시키거나 시각적 쾌감을 주기 원할 경우 활용할 수 있습니다. www.custom-design.ch www.level2d.com www.sensisoft.comwww.targetscope.com
  21. 21. Design Style & ContentCustom Font Faces 폰트로 표현하는 IdentityAdobe typekit이나 구글 웹 폰트 등 유니크한 웹폰트 수급이 원활해 짐에 따라 폰트로 기업 및 서비스 아이덴티티를 적극적으로 표현하거나 폰트 자체를 비주얼 메타포로 활용하는 사례가 많아지고 있습니다. (국문 사이트의 경우 한글과 영문의 차이로 범용적으로 적용하긴 힘듭니다.)
  22. 22. Design Style & ContentInfographics 데이터를 아름답게 표현하는 방법기존에는 수치를 기반으로 한 대량의 정보를 한 화면에 표시해서 일정한 해독 능력을 갖춘 사용자들에게 ‘전달’만 했다면 Infographic이라는 개념은 대량의정보/컨텐츠를 효과적으로 표현하는 방법을 디자인적으로 해결하기 위한 트렌드라고 할 수 있습니다. 똑같이 이해하기 쉽다면 아름답게 표현된 정보가 훨씬인지하기 쉽고 정보제공자에 대한 호감도까지 상승 시킵니다.
  23. 23. Design Style & ContentCSS Transparency 세련된 컨텐츠 표현 기법레이어의 Transparency를 조절하는 기술은 이제 과거처럼 Flash 같은 번거로운 애드온을 깔지 않고도 손쉽게 CSS 3로 구현할 수 있게 되었습니다. 약간의 퍼블리싱 기술만으로 굉장히 세련되면서 레이어 개념으로 배치되는 컨텐츠 디자인의 자유도를 높일 수 있습니다. http://tympanus.net/codrops/2012/11/26/using-transparency-in-web-design-dos- and-donts/
  24. 24. Good DesignWebsite
  25. 25. Applehttp://www.apple.com/
  26. 26. Dellhttp://www.dell.com/
  27. 27. CJhttp://www.cj.co.kr/
  28. 28. SAMSUNGhttp://www.samsung.com/us/#latest-home
  29. 29. MicroSofthttp://www.microsoft.com/en-us/default.aspx
  30. 30. Oraclehttp://www.oracle.com/index.html
  31. 31. HPhttp://www8.hp.com/us/en/home.html
  32. 32. RedbrickHealthhttps://www.redbrickhealth.com/
  33. 33. IGNhttp://corp.ign.com/
  34. 34. Logitechhttp://www.logitech.com/en-us/home
  35. 35. BlackBerryhttp://us.blackberry.com/
  36. 36. EA.comhttp://www.ea.com/
  37. 37. Levishttp://levistrauss.com/
  38. 38. Evernotehttp://evernote.com/?noredirect
  39. 39. TheKregeFoundationhttp://kresge.org/
  40. 40. Nesthttp://www.nest.com/
  41. 41. Minthttps://www.mint.com/
  42. 42. MalcolmReadingConsultanthttp://www.malcolmreading.co.uk/
  43. 43. LGhttp://www.lg.com/us
  44. 44. SKhttp://sk.co.kr/mainpage.aspx#

×