시각적 균형을 이루기 위한 웹디자인 방법 3가지

위시켓

웹사이트를 디자인할 때 사용자의 편의성보다 많은 정보를 담는 것에 치중하다 보면 균형이 깨지기 마련입니다. 따라서 균형을 아는 디자이너들은 정보의 양에 집중하기보다 핵심을 찌르는 방법을 모색하곤 합니다. 너무 적거나 많지 않은 적당한 양의 정보를 난잡하거나 극단적으로 단순하지 않은 인터페이스에 녹여내는 것이 핵심이지요.

전체적인 조화를 이룬 디자인은 사용자가 모든 정보에 접근하기 쉽도록 만들어줍니다. 즉, 균형은 웹 디자인뿐만 아니라 다른 모든 디자인 작업에서 적용되어야 하는 필수요소입니다.

프리랜서 가이드시각적 균형을 이루기 위한 웹사이트 디자인하는 방법 3가지

1. 대칭

Symmetrical Balance

웹사이트의 균형을 위해 사용되는 사장 일반적인 디자인 방법은 바로 대칭입니다. 이미 많은 웹사이트들이 대칭을 사용한 디자인으로 만들어졌지만, 이를 눈치채기란 쉽지 않습니다. 대칭을 이루는 디자인은 자연적으로 원래 당연한 것처럼 보이기 때문이지요. 이렇듯 대칭은 우리의 눈이 가장 편안하게 느끼는 디자인 원리입니다. 심미적으로도 가장 잘 정돈되고 또 조화로워 보이는 것이지요.

대칭 디자인은 웹 페이지의 중심에 가상의 가로축이나 세로축을 두고 양편에 골고루 정보를 입력하는 것이 핵심입니다. 보이지 않는 중심선을 중심으로 양 쪽을 마치 데칼코마니처럼 똑같이 배치하는 것이지요. 비평가들은 이러한 대칭을 ‘너무 단순하고 지루하다’고 평하기도 합니다. 하지만 대칭은 매우 오랜 시간 동안 사용된 고전적인 디자인 원리이며, 아직까지도 그 효과를 증명하고 있습니다.

몇 가지 예시를 통해 살펴보도록 하지요.

1) CISCO

Cisco

-검색 창을 포함한 같은 개수의 탐색 아이콘이 양쪽에 있다 -제목과 소제목이 가운데를 중심으로 똑 같은 길이로 배치되어 있다 -콜투액션 배너가 정확하게 가운데에 위치해 있다 -“Quick Task” 아래로 양쪽으로 같은 수의 정보들이 배열되어 있다

물론 대칭을 이용한 디자인이 눈길을 끌거나 독특한 매력을 어필하지는 못합니다. 하지만 Cisco는 네트워크 도구를 파는 사업체이기 때문에 디자인이 흥미로울 필요는 없습니다. 오히려 유용하고 기능적인 대칭 디자인이 Cisco를 어필하기에 더욱 적합하지요.

2) IWC SCHAFFHAUSEN

(출처 – http://www.iwc.com/en/)

3) BEANSTALK APP

http://beanstalkapp.com/

2. 비대칭

Asymmetrical Balance

대칭과 반대로 비대칭적인 균형도 존재합니다. 모순적으로 들리지만 비대칭이어도 균등하게 나눠질 수 있습니다. 비대칭은 웹 페이지상에 다양한 방법으로 표현할 수 있습니다. 수평이든 수직이든 가상의 선을 그어 반으로 나눠진 한 편에 더 강렬하고 무거운 컨텐츠를 배치하고 다른 한 편에는 상대적으로 가벼운 컨텐츠를 배치하는 것입니다. 이처럼 배치한 컨텐츠의 개수나 흥미로운 정도가 완전히 불균형을 이뤄도 모순되는 요소들이 병렬적으로 이어지기 때문에 오히려 균형이 잡히게 됩니다.

효과가 큰 만큼 훨씬 더 많은 노력이 필요하지요.

여러 가지 비대칭적 디자인의 사례들을 살펴보도록 하겠습니다.

1) HONDA

Honda

2) TYPOGRAPHISME

Typographisme

Duplos

3. 방사형

Radial Balance

우리가 태양을 그릴 때 태양의 갈기는 중심을 기점으로 같은 거리만큼 뻗어나가곤 합니다. 연못에 돌을 던지는 모습을 떠올려봐도, 파장은 중심을 기점으로 같은 거리만큼의 물결을 만들어내곤 합니다. 이러한 모습으로 요소들을 방사형으로 배치하는 디자인이 바로 방사형 디자인입니다.

웹 페이지의 핵심을 계속적으로 강조하기 쉬운 특징

1) VLOG

Vlog

여러분과 함께 디자인의 다양한 균형 원리를 간단히 살펴보았습니다. 오늘 소개해드린 예시 이외에 다른 웹사이트에서도 균형의 원리는 쉽게 찾아볼 수 있습니다. 단지 보통 사용자가 웹사이트의 디자인을 볼 때 가장 먼저 보는 것이 균형이 아니기 때문에 인지하지 못했을 뿐이지요.

하지만 인지를 하지 못했다고 해서 중요하지 않은 것은 절대 아닙니다. 오히려 웹 디자인에서 균형이 갖는 중요도는 매우 큽니다. 이는 단순히 미적으로 아름답거나 편안하기 때문에 중요한 것은 아닙니다. 균형 잡힌 디자인일수록 해당 웹 페이지의 정보가 사용자에게 더 쉽게 전달되고, 이를 통해 사용자는 웹사이트의 탐색을 좀 더 손쉽게 할 수 있기 때문이지요.

오늘 살펴본 세 가지 방법을 참고하며 웹 디자인의 균형에 주의를 기울인다면 분명 더 나은 웹사이트를 제작하는 데 큰 도움이 될 것입니다. 멋지게 균형 잡힌 웹사이트를 통해 여러분의 클라이언트의 사이트 방문객들은 만족을 느끼게 될 것이며, 이는 클라이언트의 만족으로 이어질 것입니다!

위시켓

** 스타트업을 위한 꿀팁들이 궁금하다면? '그린 클라이언트' **

http://blog.wishket.com/category/greenclients/

** 프리랜서들의 업무, 생활 전반을 도와줄 가이드, '프리랜서 가이드' **

http://blog.wishket.com/category/freelancerguide/

믿을 수 있는 IT 아웃소싱 서비스, 위시켓입니다. 공식 사이트:: http://www.wishket.com/
Follow
4.7 Star App Store Review!
Cpl.dev***uke
The Communities are great you rarely see anyone get in to an argument :)
king***ing
Love Love LOVE
Download

Select Collections