웹 디자인 이론 STEP 08.

 

웹디자인 이론 STEP 08. 에서는 웹 프로모션, 웹 프로모션 구성 방법, Visual Editorial Graphic, 센터 디바이스 디자인, 인터랙션 디자인에 대해 정리했습니다. 웹디자인 이론의 마지막 스텝이며 이번 스텝 역시 알고 있다면 실무에서 많이 쓰일 수 있는 내용입니다. 실무나 교육기관에서 배운 내용을 기반으로 작성하는 글로 잘못된 내용이 포함될 수 있습니다.

 

웹 프로모션(Web Promotion)

- 적합한 대상층에게 적절한 메시지를 노출시킴으로써, 자사 웹사이트로 방문자들을 유인하는 홍보 전략, 전술

- 웹에서 표현되는 모든 온라인의 판매 촉진을 시키는 상업(판매, 홍보 할인, 경품, 이벤트)적인 행위, 제품이나 서비스의 판매를 위한 광고 디자인

 

웹 프로모션 구성 방법

- 전체강조(화려함, 긴장감, 텍스트 그래픽... 등 이미지, 텍스트 강조할 수 있는 많은 방법들)

- 주제에 맞는 비주얼 스토리, 브랜드와 어울리는 BI 구성

- 생각하는 작업에서 20% 더 채워서 표현(BG Texture, 꾸밈 요소...)

- 디자인 요소(타이포그래피, 색감, 레이아웃, 아이콘, 버튼, 질감...)와 이미지, 기획 컨텐츠에 따른 구성요소들로 레이아웃을 구성

- Width는 1000px 이상으로 구성

- 상단은 주제를 표현할 수 있는 스토리텔링 + 제품이나 상황 연출 비주얼 + Visual Editorial Graphic(V.E.G)

- 하단은 상단 아이덴티티와 어울리는 중타이틀 + 내용 전달을 위한 레이아웃 구성 + 제목, 포인트 문구 강조할 수 있는 레이아웃 구성

 

Visual Editorial Graphic(V.E.G)

1. Visual Photography

사진만으로 표현된 페이지로서 합성 값이 존재하지 않는다. 모든 부분(모델 표정, 배경)이 디자인이 되고 주체가 되어 레이아웃을 결정짓는다.

 

2. Editorial Photography

누끼작업과 합성 값이 존재하는 페이지. 타이포와 컬러를 이용한 편집의 요소를 사용하여 이미지를 효과적으로 표현하는 것이 주 목적이다.

 

3. Graphic Photography

그래픽 스킬(명암스킬, 면 분할 일러스트, 리터칭)을 이용하여 실제 사진처럼 보여 효과적으로 미적 기능을 극대화 시키는 것이 목적이다.

 

센터 디바이스 디자인

1. 타임보드 배너광고

네이버 초기 화면 상단 영역 --> 740 x 120px

 

2. 롤링보드 배너광고

네이버 초기 우측 롤링 영역 --> 332 x 150px

 

3. 네이버 모바일 띠배너

네이버 모바일의 메인에 노출되는 띠배너 형태 --> 640 x 148px

 

4. 모바일 앱 풀스크린 배너

앱 종료 전 노출되는 풀스크린 광고 --> 720 x 1230px

 

5. 배달의 민족 앱 배너

배달의 민족 앱 배너(띠배너 형태) --> 640 x 200px

 

인터랙션 디자인

기존에 있던 디자인들을 응용하고 조합하면서 재생산하는 것이다. 좋은 디자인을 보고 그 디자인이 잘 된 이유를 이론적으로 분석한다면 그 디자인을 내 디자인에 어떻게 접목시켜야 할지도 알게 될 것이다.

 

1. 기획서의 의도, 내용 파악

 

2. 아이디어

 

3. 비주얼 기획 & 디자인 컨셉

 

4. 벤치마킹 & 자료조사

메인 텍스트 그래픽, 메인 비주얼, 서브 비주얼, 그래픽 등 기획요소에 대입할 디자인 부분별로 조사

 

5. 인터랙션, 구성요소 대입 후 판단

 

6. 컨셉 시안 제작

러프하게 이미지나 텍스트 위치 배치, 보통 최소 시안을 2type, 3type으로 제작한다.

 

7. 디자인 수정

 

8. 작업 완료