• Save
UX Layout Design_SYS4U
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

UX Layout Design_SYS4U

on

  • 894 views

 

Statistics

Views

Total Views
894
Views on SlideShare
821
Embed Views
73

Actions

Likes
4
Downloads
0
Comments
0

1 Embed 73

http://eclian.sys4u.co.kr 73

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

UX Layout Design_SYS4U Presentation Transcript

  • 1. 개발자들이 알아야 할UX Layout Design김 현 정(주) 시스포유 아이앤씨 UX팀디자인팀/책임
  • 2. UX/UI의 화면 레이아웃도사용자들의 입맛과 변화에 실시간으로발전해야 하는 시대
  • 3. 효과적으로 정보 전달을 하려면[어떻게] 보여줘야 할까?
  • 4. 정보를 조직화하여 전달 할 수 있는[효과적인 LAYOUT] 선택
  • 5. 효과적인 LAYOUT 핵심 20KEYs01. 기본 구조를 익혀라02. 가장 중요한 것을 먼저 배치하라03. 순서를 정하라04. 모든 요소를 동시에 고려하라05. 페이스를 조절하라06. 성격에 맞는 서체를 사용하라07. 비례를 생각하라08. 괘선을 사용하라09. 변화에 일관성을 부여하라10. 타이포그래피로 단을 구분하라11. 과밀하지 않게 주의하라12. 획일적인 디자인을 탈피하라13. 매체의 특성을 고려하라14. 내용을 분해하라15. 숨 쉴 여지를 남겨라16. 격자를 탈출하라17. 시각적 장치를 이용하라18. 타이포 그래피와 컬러를 조화 시켜라19. 정보에 색을 입혀라20. 색상 분류 체계를 활용하라
  • 6. 01.기본 구조를 익혀라.효과적인 LAYOUT 핵심 20KEYs1단 그리드설명글, 보고서, 단행본 처럼 연속적인글에 적용한다.텍스트 블록이 페이지의 주요 요소다.2단 그리드텍스트 양이 많거나 정보의 성격이다양할 때 단을 나누어 배치한다. 두단의 너비가 같을 수도 있고 다를 수도 있다.다단 그리드다양한 너비의 단을 조합한 다단 그리드는1단,2단 그리드 보다 활용도가 훨씬 높다.잡지, 웹사이트용.모듈 그리드UI/X, 신문 달력, 그래프, 목록 처럼 복잡한정보를 담아내기에 가장 좋은 그리드이다.판면을 수직과 수평으로 구획하여 작은덩어리들로 쪼갠다.계층 그리드한 면을 몇 개의 구역으로 나누는 그리드다.보통 여러 개의 가로단으로 구성된다.
  • 7. 효과적인 LAYOUT 핵심 20KEYs02.가장 중요한 것을 먼저 배치하라내용의 텍스트를 파악하여 작업을 조직화 분석한다.텍스트의 짜임새는 타이포 그래피의 크기, 장평 및 자간, 행간에 따라 결정된다.다음 >
  • 8. 효과적인 LAYOUT 핵심 20KEYs*중요도가 높은 이미지라면 과감히 크게 배치한다.
  • 9. 효과적인 LAYOUT 핵심 20KEYs03. 순서를 정하라한 작업에서 모든 이미지를 동일한 크기로 사용하는 일은 거의 없다.텍스트가 정보를 전달하듯이 이미지의 크기는 해당 사건이나 주제의 중요성을 말해준다다음 >
  • 10. 효과적인 LAYOUT 핵심 20KEYs* 중요도에 따른 이미지의 배치 순서 예시.
  • 11. 효과적인 LAYOUT 핵심 20KEYs04. 모든 요소를 동시에 고려하라요소의 성격으로 분리한다.이미지와 텍스트를 따로 배치다음 >
  • 12. 효과적인 LAYOUT 핵심 20KEYs- 좌우 배치로 텍스트 강조
  • 13. 효과적인 LAYOUT 핵심 20KEYs05. 페이스를 조절하라많은 정보를 담기 위해서는 이미지나 텍스트를반복적으로 질서 정연하게 배치- 몇 가지 템플릿으로 여러 페이지를 제어 한다.
  • 14. 효과적인 LAYOUT 핵심 20KEYs06. 성격에 맞는 서체를 사용하라서체 배치의 가장 중요한 것은 균형과 비례이다.내용의 성격을 파악 후 서체 선택.
  • 15. 효과적인 LAYOUT 핵심 20KEYs* 취미 또는 음식에 설명과 어우러지는 메인/서브서체 예시이다.
  • 16. 효과적인 LAYOUT 핵심 20KEYs07. 비례를 생각하라황금비율디자이너들은 보통 자신의 눈과 느낌에 따라 가장 균현 잡힌 비율을 찾아낸다. 수치로 나타내면 약 1 : 1.618
  • 17. 효과적인 LAYOUT 핵심 20KEYs07. 비례를 생각하라* 양면에 사용된 이미지와 폰트의 발란스를 맞춘다.
  • 18. 효과적인 LAYOUT 핵심 20KEYs08. 괘선을 사용하라설명서에서는 정보가 매우 자잘한 덩어리로 세분 되어두 단 사이에 적당한 괘선을 사용한다.*하지만 괘선을 너무 지나치게 사용한 판면은 산뜻함이 떨어진다.
  • 19. 효과적인 LAYOUT 핵심 20KEYs09. 변화에 일관성을 부여하라레이아웃은 일관성, 질서, 명확성, 견고한 구성을 갖춰야 한다.
  • 20. 효과적인 LAYOUT 핵심 20KEYs10. 타이포그래피로 단을 구분하라효과적인 레이아웃은 언뜻 보기에는 단순해 보이지만 실제로는 매우 유연한 구조타이포그래피로도 각 단의 성격을 규정 할 수 있다. 서체의 두께와 크기를 달리하여 정보에질서를 부여.공간을 명확히 구성하기만 한다면 다양한 서체를 사용하면서 시각적 혼란을 피할 수 있다.
  • 21. 효과적인 LAYOUT 핵심 20KEYs11. 과밀하지 않게 주의하라모든 공간을 완벽하게 채울 필요가 없다.정보가 많아질 수록 괘선을 이용하여 조직화하고 강렬한 시각 효과를 창출 할 수 있다.
  • 22. 효과적인 LAYOUT 핵심 20KEYs12. 획일적인 디자인을 탈피하라
  • 23. 효과적인 LAYOUT 핵심 20KEYs13.매체의 특성을 고려하라대형 웹사이트는 엄청나게 많은 양의 정보를 소화하기 위해 그리드를 사용해서 화면을 구축한다.따라서 명확한 타이포그래피를 사용하는 것이 매우 중요하다.
  • 24. 효과적인 LAYOUT 핵심 20KEYs14. 내용을 분해하라정보가 많아질 수록 괘선을 이용하여 조직화하고 강렬한 시각 효과를 창출 할 수 있다.도표와 단위로 구성된 정보가 있다. 이런 복잡한 정보를 디자인 할 때의 기준은 명확성, 가독성, 여백그리고 변화다.여러가지 성격의 정보가 어지럽게 섞여 있을 때, 이것들 알기 쉬운 덩어리들로 분해하면더 명확한 레이아웃을 구성 할 수 있다.
  • 25. 효과적인 LAYOUT 핵심 20KEYs15. 숨 쉴 여지를 남겨라모듈 그리드라고 해서모든 모듈을 채워야하는 것은 아니다.
  • 26. 효과적인 LAYOUT 핵심 20KEYs16.격자를 탈출하라모듈의 격자를 탈출하는 순간, 모듈 그리드의 또 다른 아름다움이 드러난다.일관된 모듈 그리드 상에서도 형태나 크기, 패턴을 변형하여 얼마든지 질서 정연하면서도경쾌한 판면을 구성 할 수 있다.
  • 27. 17.시각적 장치를 이용하라모듈의 도표나 그래프는 숫자만 사용해 단순하게나타 낼수도 있지만, 시각 요소를 이용하여 훨씬읽기 쉽게 할 수 있다.그래픽을 사용하면 도표를 훨씬 기억하기 쉬워진다.야금 야금 전기를 잡아 먹는 “흡혈귀식 전기 낭비” 를설명하는데 흡혈귀 만큼 어울리는 인물이 또 있을까?효과적인 LAYOUT 핵심 20KEYs
  • 28. 효과적인 LAYOUT 핵심 20KEYs18. 타이포 그래피와 컬러를 조화 시켜라모듈의 컬러를 사용하는 설명서라면되도록 색을 절제하여 독자가 설명하고 있는 내용 외의 요소에 관심을돌리지 않도록 주의 한다.
  • 29. 효과적인 LAYOUT 핵심 20KEYs19.정보에 색을 입혀라달력이라는 주제에 맞게, 계절감이 나타날 수 있는 컬러를 선택해 따뜻한 컬러감과 역동성을 나타내는RED컬러를 사용하였으며, 폰트 컬러는 진한 색감의 보색인 옆은 회색 계열로 폰트를 나열해 어울어지도록부드럽게 표현.
  • 30. 효과적인 LAYOUT 핵심 20KEYs20.색상 분류 체계를 활용하라색으로 정보를 분류하여 원하는 정보를손쉽게 찾을 수 있게하라.색상 분류를 사용한 판면은 아이콘과마찬가지로 글 또는 색만 사용했을 때보다 훨씬 많은 정보를 전달해준다.다음 >
  • 31. 효과적인 LAYOUT 핵심 20KEYs색상만으로도 정보 체계를 파악 할 수 있다.성격에 맞는 색상을 사용하고 대담한 필체로 여백을 만들어, 다음에 이어질 내용에 대한 흥미를 유발 할수도 있다.*각각의 색은 보는 이의 시선을 사로 잡고 볼드체로 된 제목을 돋보이게 한다.
  • 32. 효과적인 LAYOUT 핵심 20KEYsLAYOUT 쉽게 접근하기!1. 주제에 맞는 폰트 고려2. 컬러와 서체의 융화3. 이미지의 크기4. 각 컨텐츠 수가 많아지면 쾌선으로 분리한다.5. 템플릿화하여 컨텐츠를 배열한다.몇가지 사항으로 깔끔한 UX 문서를 작성하는 방법을 알아본다.
  • 33. 효과적인 LAYOUT 핵심 20KEYs결 론Layout 사용에서가장 중요한 것은?
  • 34. 효과적인 LAYOUT 핵심 20KEYs[균형과 비례]이다.- Layout 사용에서 가장 중요한 것은?
  • 35. 효과적인 LAYOUT 핵심 20KEYs감사합니다.개발자들이 알아야 할UX Layout Design김 현 정(주) 시스포유 아이앤씨 UX팀디자인팀/책임본 문서는 일부“레이아웃불변의 법칙100가지”에서 발췌하였습니다.