| |
| (3) 구도(layout) 정하기 |
구도란 각각의 요소를 배열하여 전체를 구성하는 방식입니다. 웹페이지의 구도를 정할 때 중요한 것은 사용자의 시선의 흐름을 고려하는 것입니다. 고객이 원하는 콘텐츠를 효과적으로 배치하는 것은 매우 중요합니다. 웹사이트를 방문했을 때 고객이 원하는 정보를 단시간 내에 찾을 수 없다면 잘못된 구도라고 할 수 있습니다. 대개 사람의 시선은 왼쪽 위에서 오른쪽 아래 방향으로 움직입니다. 따라서 웹페이지의 왼쪽 윗부분에 사이트 로고, 주요 메뉴, 메인 이미지 등 중요한 요소를 배치하고, 오른쪽 아랫부분에 자세한 설명과 내용을 배치합니다. 시선을 사로잡는 강한 이미지를 왼쪽에 배치하고 그 오른쪽 옆에 텍스트로 된 설명을 배치합니다. 비슷한 내용과 이미지는 하나로 묶어 함께 배치하고, 다른 영역과 뒤섞이지 않도록 각각의 영역별로 독립적으로 구성하며, 전체적으로 조화롭게 배치합니다. 비즈니스, 쇼핑 등 대개의 웹페이지는 방문자에게 신뢰감과 안정감을 줘야 하기 때문에 직선구도를 사용하지만, 일부 개인 홈페이지나 아동용 사이트는 부드러움이나 자유분방함을 표현하기 위해 곡선구도나 사선구도 등 파격적 구도를 사용할 수 있습니다. 내비게이션 영역은 페이지에서 가장 잘 보여야 하며, 각 메뉴에 걸린 링크들은 어떤 페이지에 연결되었는지 잘 표현해야 합니다. 웹사이트의 내비게이션은 찾기도, 사용하기도 쉬워야 합니다. 내비게이션이 가로형이든 세로형이던 내비게이션은 가능한 한 레이아웃의 상단과 가까이 있어야 합니다. |
< TYPE 1>
- 가장 일반적인 가로 분할 구조
- 안정적인 느낌을 주는 구도
- 일반적이지만 선호도 높음 |
|
< TYPE 2>
- 가장 일반적인 세로 분할 구조
- 비주얼이 강조될 수 있는 구도
- 다양성 측면에서 선호도 높음
- 전체적인 영역의 구분이 확실치 않을 경우 산만하고 불안정해 보일 수 있음
|
|
< TYPE 3>
로고 및 메뉴1 |
로그인 또는 메뉴2 |
메인 이미지 |
내용 |
내용 |
내용 |
카피라이트 |
- 내용이 많을 경우 사용되는 구도
- 정보 전달의 효과 높음
- 영역 구분이 확실하지 않을 경우 산만해 보임 |
|
< TYPE 4>
- 비주얼을 강조할 수 있는 구도
- 면 분할이 적절하지 않을 경우 조화와 균형을 이루지 못함.
|
|
|
비즈니스 홈페이지 기획서
