웹디자이너 이미숙님이 작성한 디자인 이론 편, 레이아웃의 형태[일반/특색/실험] 입니다.
2012년에 작성하신 글인데 이런 글까지 올려주시고 감사합니다.
웹사이트의 가장 기본적인 레이아웃은 크게 3가지의 형태로 이루고 있다.
1. 일반적인 형태 - 사용자들의 사용성이 중시
2. 특색있는 형태 - 디자인의 느낌과 필을 중시
3. 실험적인 형태
구축목적과 전략에 따라 여러 형태 중 선택하여 레이아웃디자인을 해야한다
1. 일반적인 형태 [상단 내비게이션]
가장 일반적으로 볼 수 있는 일반적인 형태!!
특별하게 튀는 디자인보다는 사용성이 높은 사용자환경에 충실한
레이아웃 유형들로 누구나 쉽고 편하게 이용할 수 있는 구조를 말한다.
초기 웹환경에 적응하는 사용자들에게 내비게이션의 인식이 매우 중요하다
= 학습능력 때문에 상단내비게이션의 레이아웃이 사용자들에게 인식하기 쉽다
UX[사용자의 경혐]도 중요하지만, 사용자에게 보여주기 위한 정보가 많을 때에도
일반적인[상단내비게이션]을 많이 사용한다.
일박적인 평범한 사용자환경일지라도 세부적인 디자인과 비주얼 효과로서 충분히
외관상 차별화 디자인 전략은 크게 달라질 수 있다.
일반적인 형태에서 독창적인 아이디어 보다는 기본의 사용자 중심디자인에 맞추면서도
약간의 포인트 요소와작은 요소의 완성드롤 높여 차별화를 주는 디자인이 된다.
ex> 타이포의 장평, 자간 / 유틸리티 메뉴 / 풋터등의 작은요소!
일반적인 형태에도 3가지의 스타일을 사용할 수 있다.
1. 바형태의 내비 [선/면/형태를 이루고 있다]
- 메인디자인
상단에 위치한 내비게이션은 조금 특색있는 바 형태의 디자인으로 주목성을 주었다.
배경의 연한 질감이 되어 있기 때문에 내비게이션을 구분해 주기 위해 내비게이션을 구분해
줄 수 있도록 진한 색상의 바를 디자인 하였다.
기존의 그냥 사각형태의 디자인이 아닌 전체 디자인에 맞춰 작은 요소의 디자인 변화를 주었다.
아래의 컨텐츠가 많아 상단내비게이션을 선택하여 컨텐츠 양의 제한이 없다.
- 서브디자인
기존의 글로벌 내비게이션은 메인의 위치인 상단 내비게이션 그대로 위치하고, 색상만 정보에 따라
색상이 변경! 해당 클릭 한 컨텐츠는 색상을 조금 더 진하게 하여 지금 현재위치를 보여주고 있다
로컬내비게이션은 좌측에 위치하였다
이미지는 로컬내비게이션에 작은 사이즈로 디자인 되었으며 해당 컨텐츠 클릭시 색상대비로
현재 위치를 보여주고 있다. 로컬 내비게이션은 배경의 조화롭게 표현하되, 구분할 수 있도록
약간의 톤대비를 주고 있다.
2. 색상브레임 내비 [색상으로 강조] - 눈에 가장 잘 띄기 때문에 제일 많이사용!
3. 심플타입 내비 [텍스트로만 간단하게 보여줌]
= 상단 내비게이션을 굳이 강조하지 않아도 사용자는 이미 학습경험으로 내비게이션이라 인식함
- 메인디자인
상단에 위치한 글로벌 내비게이션은 텍스트로 심플하게 표현되었으며 컨텐츠 구분할 수
있도록 선으로 분류해 주었다. 작지 않은 스케일로 컨텐츠 정보를 크게 보여줌
컨텐츠가 많으므로 상단 내비게이션을 사용함
- 서브디자인
기존의 글로벌 내비게이션은 메인의 위치인 상단 내비게이션 그대로 위치하고, 텍스트의 색상만
정보에 따라 빨간색으로 색상이 변경되었다
로컬내비게이션은 상단 부분에 메인의 있던 이미지가 들어가서 통일성을 유지했으며
해당 정보 컨텐츠를 클릭시 빨간 색상으로 변경과 상하부분에 빨간 줄로 포인트를 주었다
2. 특색있는 형태
웹사이트의 레이아웃이 특색있는 특별한 구조 및 형태로 디자인의 룩앤필을 전달하는 사이트
웹디자이너가 웹사이트의 형태를 독특하게 디자인한 의도를 쉽게 확인 할 수 있음
대채로 CI / BI / 메타포로 상질물의 형태로부터 기학적인 라인과 형태를 유추해내어 디자인
디자이너의 의도와 표현 전략에 따라 특색 있는 레이아웃 형태는 다양한 시도와 표현이 가능하다
여러가지의 표현기법 및 형태로 인해 특색있는 사이트를 디자인 할 수 있다.
예를 들어
1. 기하학적 형태
2. 다이나믹한 형태
- 메인디자인
내비게이션은 좌측 상단의 사선으로 역동감을 주면서 특색있는 형태를 주고 있다.
운동관련브랜드 사이트이므로 역동적인 느낌을 주기위해 사선과 빨간색상을 많이 사용!
사용자들의 시각은 좌측 상단부터 먼저 보게되므로 내비게이션을 쉽게 파악할 수 있다.
컨텐츠또한 사선으로 표현기법을 통일하였다
- 서브디자인
내비게이션은 메인과 그대로 같은 위치에 있고 컨텐츠에 따라 내비게이션의 색상이 달라짐
정보 컨텐츠 클릭시 내비게이션에 빨간색으로 구분해주어 현재 위치를 알려주고 있다.
서브디자인의 정보내용 부분도 사선을 사용하여 메인과 같은 통일감을 주었다.
3. 일러스트 형태
- 메인디자인
내비게이션은 상단으로 위치하고, 바로 아래에 특색있도록 중심으로 모이는
특색있는 디자인을 하였다. 또한 표현기법은 일러스트와 실제이미지를 사용하였다.
내비게이션을 굳이 선택하지 않아도 메인의 좌,우로 컨텐츠가 나눠져 있어
해당 정보 부분에 바로 들어갈 수 있도록 디자인 되었다
- 서브디자인
상단의 특색있는 디자인은 서브페이지까지 그대로 유지되었으며 일러스트의 표현기법또한
통일성있게 유지되었다. 로컬내비게이션은 특색 있도록 탭으로 표현하였다
클릭한 해당 부분에 색으로 표현하여 현재 위치를 보여주고 있다.
메인과 서브의 통일감을 주는 디자인이 돋보였다.
3. 실험적인 형태
정형하된 틀이 없어 과감한 레이아웃 구조를 실험적인 형태로 자유롭게 표현
웹사이트들은 목적을 위한 기능 만족보다는 개념/창조적인 디자인에 치중하기 때문에
그 모습이나 사용자 반응을 유도하는 인터랙티브 방식들이 매우 독특하거나 전혀 새로운 형식이다
자유분방한 레이아웃 구성과 형태 그래픽 표현과의 과감한 시도를 하면서도 조화가 잘 이루여져야 한다.
주로 아티스트, 디자이너, 디자인 회사, 웹진등이 실험적인 형태를 사용한다.
- 메인디자인
실험적인 디자인으로써, 내비게이션은 우측의 상단에 위치하였다.
덩어리감있도록 내비게이션은 4단으로 구성되었으며 홈은 색상을 달리하여 정보컨텐츠와
분류해주었다. 하단의 비주얼 이미지를 보여주고 있으며 색다른 레이아웃인 실험적 디자인이다.
레이아웃 형태의 일반적인 형태와 특색 및 실험적인 형태에 대해 공부를 하였다.
그 전의 내가 알고 있던 지식과는 조금 다른면이 있어, 배우는 부분에 있어 색다로웠다. 일반적인 내비게이션이었을때는
상단에 위치한 내비게이션을 말할 수 있는데 지루하고 진부한 디자인이라는 인식이 강했다
하지만 그 부분에서도 작은 요소의 디자인과 완성도 있는 디자인으로 다른 사이트와 차별화될 수 있다는 것이다.
비록 사용자들이 많이 봤던 디자인이지만 디자이너의 세심한 배려와 창의력이 디자인의 힘을 줄 수 있다는 것이다.
나 또한 회사에 입사하여 프로젝트를 맡는다면, 다른 사이트와 똑같은 진부한 디자인보다는 그 속에서 나만의 느낌으로
포인트를 주거나 타이포 하나하나 신경쓰는 완성도 있는 디자인을 할 것이다.
- 서브디자인
특색있고 실험적인 내비게이션은 서브페이지와 동일하게 위치시켜 통일감을 주었고,
서브페이지 또한 비주얼을 강조하였다. 서브페이지또한 실험적인 디자인을 하였다.
