웹사이트 레이아웃 고려사항
페이지 디자인의 궁극적인 목적
이용자에게 정보를 쉽고 명료하고 효과적으로 전달하도록 돕는다
이용자에게 핵심적인 메시지 전달을 위해서는 균형감 있는 레이아웃(Balanced Layout)이 요구된다
디자이너가 자신의 감성에 따라서 완성한 레이아웃은 보기에는 좋을 수 있으나 균형을 갖추지 못한 경우가 있다
바람직한 페이지 다자인은 보기에도 좋아야 하지만 핵심적인 메시지를 이용자에게 분명하게 전달할 수 있어야 한다
사용자와 웹사이트에 대한 인식
- 이용자는 읽지 않고 스캔한다
- 이용자는 직관적으로 반응한다
- 이용자는 인내력이 없다
- 이용자를 생각하게 해서는 안된다
- 이용자는 브라우저를 완전히 통제하려고 하므로 별도의 브라우저를 여는 링크는 바람직하지 않다
- 이용자에게 참을성을 기대해서는 안된다
- 이용자의 주의력을 관리한다
- 핵심내용은 한눈에 드러나도록 이미지나 큰 텍스트를 이용한다
- 단순하게 구성한다
- 공백영역을 활용한다
- 관례에 따르는 디자인은 사이트를 쉽게 이해하도록 하는 한가지 방법이다
균형감 있는 레이아웃 기법
http://www.creativebloq.com/netmag/create-balanced-page-layouts-7-pro-tips-121310009
http://digestwebdesign.com/carp_design_principles.html
질서성
그리드 레이아웃, 2개의 수직선, 2개의 수평선이 이루는 4개의 교차점에 강조를 둔다
구조파악과 접근의 용이성
핵심성
큰 이미지나 큰 헤드라인 등으로 한개의 핵심적인 키워드를 강조한다.
다수개의 이미지를 사용해야 하는 경우에는 여러개를 그룹으로 설정하여 배치한다
33.33% 법칙 (Rule of Thirds)
화면을 2개의 수평선, 2개의 수직선으로 일정한 간격으로 배치하면 4개의 교차점이 생긴다
강조하고자 하는 부분을 4개의 선을 따라 배치하거나 특히 핵심적인 내용은 4개의 교차점(Focal Points) 부근에 크게 배치한다
참고 사이트 : http://www.motocms.com/blog/web-design/rule-of-thirds-use-website-design/
빈 공간의 활용
공백을 배제하는 것이 아니라 공백을 이용하여 구조가 쉽게 파악되게 한다
공백을 활용할 때는 의미의 연결성을 해치지 않도록 주의
디자인 소품들의 반복 적용
유사한 디자인 소품들을 반복적으로 배치하면 의미상 연결된 영역이라는 의미를 전달할 수 있다
서로 다른 디자인 소품들을 활용하면 의미상 다른 영역이라는 의미를 전달할 수 있다
한페이지에서 동일한 구조를 여러번 사용하면 통일성을 부여할 수 있고 구조에 대한 이해가 쉬워진다
계층구조를 갖는 문단 구성
여려개의 부분적 글들이 한개의 주제 아래에 포함되는 경우에는 시각적으로도 구조가 쉽게 파악될 수 있도록 가시적인 계층구조를 이용하는 것이 좋다
Scale & Contrast
강조, 핵심, 주제, 계층구조상의 주제 등을 시각적으로 크게하거나 대조를 통해 부각시킨다
CARP Design Principles http://digestwebdesign.com/carp_design_principles.html
Contrast Alignment Repetition Proximity
Common Methods of Creating Contrast:
Alignment: Positioning elements to left, right or center will define the look of your design. Every element on the page should have a visual connection with other elements in order to have a clean, fresh and yet sophisticated layout.
Repetition: Repeating visual elements such as, font type, background colors, shapes and texture helps to develop a good organization and a strong unity.
Proximity: Items relating to each other should be grouped close together. This will reduce clutter. That’s why we create a navigation bar rather than putting links all over the pages.
8 Effective Web Design Principles
http://conversionxl.com/8-universal-web-design-principles-you-should-to-know/
4 key principles of web design
http://99designs.com/designer-blog/2014/11/07/web-design-basics-guide/
9 Essential Principles for Good Web Design
http://design.tutsplus.com/tutorials/9-essential-principles-for-good-web-design--psd-56