웹 사이트의 웹 네비게이션과 디자인의 2원칙.

 

■ 프로그래밍/웹 ■ 2010/11/14 15:42 ■ by wookiiis


세부 카테고리별 포스트를 보시려면 ▼ 아래를 눌러주세요.



WEB
HTML
CSS
JAVA
C++
노트

이번 시간에는 웹사이트에서의 웹 내비게이션과 디자인을 하기 위한 4가지 원칙에 대해 알아보도록 하겠다. 웹 사이트 제작시 어떻게 제작을 하든 구상을 하는것은 사이트를 제작하는 제작자 마음이겠지만, 방문자들 또한 고려하는 웹사이트, 좋은 웹사이트를 만들기 위해서는 지금 포스팅할 디자인의 2가지 원칙에 대해서도 고려해야만 한다. 그렇다면, 그러한 웹사이트 디자인의 2가지 원칙에는 어떠한 것들이 있는지 한번 보자.

■■■   웹사이트의 디자인 2원칙.

01. 웹 사이트를 사용하는 독자를 위한 디자인이어야 한다.

내비게이션 디자인은 다음을 충족해야만 한다.

■ 방문자가 원하는 컨텐츠를 빠르게 찾을 수 있도록 도와줘야 한다.
■ 다른 방문자들을 위해 복수의 네비게이션을 제공하면 좋다.
■ 방문자들이 항상 어느 위치에 있는지 파악할수 있도록 통계적인 부분도 고려하라.
■ 일관성을 유지하고, 피드백이나 지원요소를 제공하라.
■ 방문자들을 놀라게하거나 오도하지 마라.

위와 같은 요소들도, 웹사이트를 디자인할시에 고려해야만 한다. 이것이 디자인의 1원칙이다.

02. 방문자들이 현재의 위치를 파악하고, 또한 알수 있게 해야한다.

방문자들이 자신의 현재 위치를 파악하기 쉽게 디자인해야하고, 또한 자신이 방문했던 곳이나, 방문하고있는 곳등을 알 수 있는 정보를 제공해야한다.

■ 내비게이션은 방문자에게 명확하고 모호하지 않은 방식으로 독자가 현재 웹 사이트의 어느 페이지에 있는지를 알려주어야 한다. 웹 내비게이션은 지도와 교통신호시스템 사이의 어느 지점에 있다.
■ 웹 내비게이션 디자인의 가장 기초적인 원칙은 독자가 웹사이트의 어느곳에 있었는가를 알려주는 것이다. 이것이 그래픽 형식이 아닌 하이퍼텍스트 형식으로 내비게이션을 디자인하는 주요 이유가 된다.
■ 내비게이션의 요소가 회사 로고와 같은 이미지이며, 홈페이지로 링크가 걸려있다면, ALT 태그를 사용하여 "회사 홈페이지" 와같은 문구를 써넣고 한번더 안내받을수 있도록 만들어야한다. 텍스트링크가 충분하지 못하면, "링크타이틀" 텍스트를 제공해야한다.
■ 마우스를 가져다 대면, 링크의 색상이 변하게 하는것이 좋고, 마우스가 특정 링크 위를 지나갈때 드롭다운 메뉴를 사용해주는 것이 더욱 효과적이다. 그 이유는 방문자가 해당 메뉴의 세부 메뉴까지 방문하기가 쉽기 때문이다.

위의 내용 이외에도, 웹사이트의 일관성을 위해, 인터페이스나, 내비게이션을 최대한 고려하여 통일적으로 만들어 주어야, 방문자가 방문시, 머리가 어지럽지 않게 된다.
웹사이트에 있어서 디자인의 시작은 모방이다. 단지 [ CTRL+V ] 를 이용한 태그 붙여넣기 형식의 모방이 아닌 전체적인 구도나, 세별 디자인등은 창조전 모방에서부터 시작된다.
그러므로, 웹사이트 제작시에는 여러 디자인 홈페이지나, 기타 위 원칙을 잘 준수한 홈페이지들을 벤치마킹을 하면서 자신의 창의력을 덧붙여 웹디자인을 가꾸어 나간다면 점점 훌륭해지는 스킬들을 획득할수 있게 될것이다.

 

http://blogit.blogkorea.net/38000188/http://happynori.tistory.com/178

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s