해더 디자인 :: header design

해더 디자인

Illustration by  Eleni Debo

특징

1. 비주얼 디자인은 웹사이트에서 중요한 역할을 하며

   전체적인 사이트의 분위기를 주도한다.

 

2. 시각적으로 자극적인 것들이 많고

    미니멀리즘이 조금씩 밀려나고 있는 상황에

    비주얼디자인의 중요성이 더 커지는 추세라고 볼 수 있다.

 

3. 디자이너가 몇달에 걸쳐 만들 프로젝트들도

    짧게는 17초, 길게봐서 50초 만에 평가가 된다. 

 

 

 

 

해더디자인 = 웹 비주얼 디자인

Tea Manufacturer Website Concept

 

웹사이트 비주얼 디자인을 헤더디자인 으로 명명하기도 한다.
예전에 헤더는 GNB를 의미해 로고, 주요메뉴, SNS등이었지만 최근에는 비주얼을 포함하는 추세이다.

 

주요구성

 - 로고

 - 네비게이션 (메뉴)

 - 텍스트 헤드라인

 - CTA 버튼: 행동을 유도하는 주요버튼

 - 검색 등

 

 

 

비주얼 이미지의 크기 (header size)

Design Freelancing Home Page

 

정확한 픽셀보다는 상식선에서

 - 자신이 표현하고자 하는 콘텐츠의 성격

   혹은 디테일의 정도에 따라 헤더의 크기가 달라지고

 

 - 작은비주얼이 오히려 렌딩페이지에

    더 큰 효과를 거두는 경우도 많다. 

 

 - 만약 비주얼이 크다면 스크롤을 인지할 수 있는

    인터페이스를 함께 제공해 주는것도 좋다. 

    (너무 당연?)

 

 

 

시각적 계층구조 (visual hirarchy)

Webdesigner Site Concept

 

시각 흐름도

 - 화면의 왼쪽 상단에서 시작해 F자를 그리며

   시각적으로 이동한다 (Nielsen Norman Group: 2006)

 

logo

 - 로고가 왼쪽에 배치된 경우 쉽게 기억할 수 있다 (NN/G 연구자료)

 - 둥근모양의 로고가 있는경우는 중앙에 배치해도 되지면 효과는 훨씬 낮다. 

 

navigation

 - 너무 많은 섹셕은 유저를 압도한다. 

 - 가장 중요한 카테고리에 대한 공간을 확보하기위해

    사이트 전체 구조를 개편해야 할 수 있다. 

 - 자신이 어디에 있는지 location 을 활용한다. 

 

call to action

    - 시각적 계층구조의 원칙을 구현하여 자연스럽게 CTA버튼을 강조

 

 

 

 

전달할 메시지 (message conveyed by header)

Tea Manufacturer Website

 

비주얼이 전달할 수 있는 메시지

    - 소비자에게 무언가를 촉구 할 때

    - 신뢰를 구축하거나 브랜딩을 할 때

    - 유저에게 특정서비스를 강조할 때 

    - 재미와 즐거움을 줄 때

적합한 글꼴

    - 한눈에 이해할 수 있는 명확하고 쉬운 타이포

    - 사용자의 관심을 끌 수 있는 타이포

    - 어려운 글꼴은 선택하지 않는다. 

 

이미지 (relevant image)

3D Model Store Concept

 

비지니스 정보를 전달할 이미지

    - 고퀄리티의 사진

    - 일러스트

    - 영상, 비디오 등의 콘텐츠

 

결론
위 내용들은 뻔한 내용인 동시에 
그만큼 기본이 되는 내용들이다. 

헤더 디자인은
웹사이트의 얼굴인 만큼 신경을 쓰자.
첫인상이 모두는 아니지만
꽤 많은것들을 결정하기도 하니까.

 

출처 : uxplanet.org/website-header-design-in-2020-best-practices-and-examples-1992f80ddd69