웹디자인의 기준, 레이아웃 정리를 해보자

기획을 완료하자마자 디자인이 뚝딱 나온다면 참 좋겠지만 두루뭉실한 개념과 이미지를 구체화해야하는 책임을 가진 웹디자이너의 숙명은 그렇게 간단하지 않다.

그래도 웹디자인을 보다 간단하게 시작할 수 있는 방법이 있다. 기획과 디자인 단계 사이의 레이아웃 정리 단계가 있는데,

레이아웃 정리 단계는 스토리보드와 비슷해 보이지만 레이아웃을 잡기 전 기획과 내용을 한층 더 깊이 정리하는 것을 통해 쓸데없이 디자인의 퀄리티를 높혀주고 디자인이 전해주고자 하는 이념을 더욱 확고하게 변화시켜준다는 차이점이 있다. 

이렇게 좋은 점이 많은 레이아웃 정리 단계, 어떻게 하는 것인지 알아보았다.

1. 디자인 내용 정리하기 (크기, 배치, 간격, 형태)

1-1. 크기 : 디자인을 통해 전달하고자 하는 핵심을대 / 중 / 소로 나뉘고 시작한다.

1. 대 -> 정보전달 콘텐츠 내용의 핵심 키워즈를 도출한다.
2. 중 -> 정보전달 콘텐츠 내용을 요약글을 정리한다.
3. 소 -> 정보전달 콘텐츠의 내용 레이아웃을 정리한다

1-2. 배치 : 상하 좌우 밸런스를 균등하게 정리한다. 내용이 정리되었다면 이제는 들어갈 요소들의 강약을 조절해야한다.

중요도에 따라 콘텐츠별 간격을 조절해 가이드 라인을 제시한다. (ex:제목글(32px) 소제목(16px) 본문글(8px) ...)

1-3. 형태 : 고정된 CI/BI의 형태에 잘 녹아드는 UI/UX 컴포넌트 요소(도형, 글꼴, 아이콘 등)를 제작한다.

 

 

2. 메타포[metaphor] 

이미지와 텍스트의 시너지는 중요하다. 텍스트(리딩)에 최적화된 메타포 이미지는 사용자의 시선을 빼앗을 수 있다. 짧은 시간 시선을 빼앗긴 사용자는 사이트의 상품, 나아가 브랜드 가치를 깊게 느끼게 된다.

그만큼 사람들에게 1차적 의미를 내포하는 메타포적인 이미지는 특별하다.

이런 중요한 메타포 요소 퀄리티를 떨어뜨리는 위험한 요소는 대표적으로 두가지다.

• 규격미달 요소 함유 (이미지가 적용되는 콘텐츠 공간의 면적보다 작은 경우)
• 저해상도 이미지 

 

 

3. 풍수지리 (텍스트, 이미지, 멀티미디어)

디자인에 무슨 풍수지리? 싶지만, 디자인이란 클라이언트와 사용자를 만족시켜야 한다. 클라이언트와 사용자의 마음에 들려면? 당연히 이뻐야한다는 사실을 기억하자.

그렇지만 텍스트의 흐름과 시점을 방해하지 않고 텍스트의 메타포를 극대화하는 예쁜 이미지는 찾기까지 오랜 시간이 걸린다. 그렇다고 오직 자료찾기에만 매달릴 수는 없으니 원활한 일정을 위해서라도 풍수지리를 찾는 기준을 잡아야 한다.

1. 정해진 시간(1~2시간) 안에 메타포가 적절한 이미지를 찾아본다.
2.  이미지를 찾을 수 없다면 찾은 이미지를 적절하게 편집해 원하는 이미지를 구현하도록 한다.
3. 그럼에도 의미전달이 미흡하게 느껴진다면 드로잉을 통해 원하는 아트워크를 제작한다.
4. 정말 그럼에도, 원하는 느낌이 아니라면 타이포 디자인을 통해서 원하는 분위기를 만들 수 있도록 한다.