멋진기획서만들기 Visual planning_wording strategy_김택환

주|시도우 서울시 마포구 서교동 352-28 고두하우스빌딩 5층 http://www.cidow.com T.325-1009 F.6280-2234

15 June 2009

‘Visual Planning’

Wording Strategy

2009 CiDOW Co., Ltd. All Right Reserved.

True friend who shows the right way to e-Business

15 June 20092

Table of Contents.I. What is Visual Planning?

II. For a wonderful Visual Planning2-1. Planning ? 2-2. Planning Documentation Skill

III.Elements Approach3-1. Surface(Layout, Grid&Typo, Golden Section)3-2. Choice of Color3-3. Choice of Font 3-4. Diagram3-5. Pictogram3-6. Publishing Skill & Tools

IV.Elements Blending

V. Visual Planning Example.



15 June 20093

I. What is Visual Planning?

Visualization + Planning = Fact!

비주얼플래닝(Visual Planning)이란 기획서를 포함한 모든 문서의내용을 시신경에 최적화 시켜 주고, 제작자의 의도가 고급스럽고 명료하게전달되게 하여 매력적인 문서로 보여지게 위한 최고의 워딩(Wording) 전략이다.



15 June 20094

II. For a wonderful Visual Planning.

II-I. Planning Comprehension

기획(Plan) :

어떤 목표를 정해서 그 목표에 도달하기 위해 행하는 ‘구상’, ‘제안’, ‘실천’의 모든 업무

기획서(Document & Paper) :

‘구상’, ‘제안’, ‘실천’(목표)를 실현하기 위한 시나리오를 말하며 기획의 내용을 전달하기 위한 도구로 커뮤니케이션 Tool의 역할

Idea Draft Prototype Document



15 June 20095

II. For a wonderful Visual Planning.

II-II. Planning Documentation Skill

그럴싸한 문서를 만들기 위해 꼭 기억해야 할 두 가지 ‘글꼴’ 과 ‘단’

일반적인 편집형태 단과 제목구분 형태 좌측을 단으로 이동 후이미지 첨부 형태

우측 맞춤으로 해서문서의 주목성을 향상



15 June 20096

III. Elements Approach.

Layout

III-I. Surface(Layout, Grid&typo, Golden Section)

: 타이포그래피, 사진 및 일러스트레이션, 여백, 색상 등의 구성요소들을제한된 지면 안에 배열하는 작업구성요소들이 조화롭고 균형 있게 논리적으로 배열 되었을 때 내용이 쉽고 정확하게 전달되는데 이때 기준은 아래와같다

주목성: 독자의 시선을 집중시켜 기사에 주목하도록한다.

가독성: 읽기 쉽고 이해하기 쉬우며, 중요한 것과 중요하지 않은 것을 한눈에 알 수 있도록 한다.

조형성: 레이아웃 구성요소들의 변화를 통해 보기좋고, 시각적으로 안정되고 흥미롭도록 한다

창조성: 기존의 레이아웃과 차별화되고, 단조롭지 않도록 새로운 시도를 통해 개성을 부여한다.

기억성: 독자의 기억에 오래 남도록 한다.

레이아웃에서 위조건을을 충족하기 위해 도입된하나의 방법이 그리드시스템 이다.



15 June 20097

다른 크기의 글꼴을 사용한다 (헤드라인은 부제목보다 더 크다)

중요한 정보에는 색을

정보를 그룹으로 분리하는 규칙을 사용한다.

활자의 굵기를 달리한다.(세미볼드체는 두드러져 보이지만 볼드체야말로 더 도드라져 보인다)

정보 주변에 여백을 둔다.

최고의 장소를 선택한다.(일반적으로 왼쪽 위를 먼저 읽는다)

중요한 문구 옆에 그림을 놓는다 ( 그것은 시선을 끌고 메시지를 보강한다)

상자 안에 활자를 넣거나 혹은 흥미로운 모양을 준다.

세부 항목 바로 앞에 점들을 찍어 끌어낸다.

활자의 스타일을 바꿔라.

분리하고 강조하기 위해 다른 색깔을 칠하거나 흰색이나 검은색과 같은 대조된 활자를 사용한다.


Good Layout




15 June 20098



15 June 20099


Grid System & Typography?

페이지 공간에 들어가는 텍스트와 이미지, 디자인 요소들에 관한시각적 규칙을 세우고 적용시키는 과정

페이지 공간에서 문자정보인 텍스트의 사용규칙을 만드는 것이 그리드 시스템 안에서의 타이포그래피 계획이다. 즉, 이것은 사용되는 서체를 정하고, 공간에서의 위치, 크기, 컬러 등 구체적인 서체의 일관된 적용계획을 수립하는 것으로서체활용을 잘 계획하면 정보를 종류별로 명확하게 구분할 수 있고, 읽는 사람이 정보를 쉽게 읽을 수 있도록 순서를 정하고, 중요한 정보를 다른 요소들보다 돋보이게 하는 등 사람들에게 시각적 통로와 흐름을 만들어 줄 수 있다.

1. 정보의 분류, 그룹핑

: 디자인에 포함될 정보를분류하고 정리한다. 들어갈 정보의 우선순위를 정하고, 정보의 구분을 위해한 줄씩 띄워서 구분을 하였다.

2. 굵기의 변화

: 중요한 요소에 굵기에 달리했다. 굵기를 차별화는보다 쉽게 정보의 구조를드러냄으로써 한눈에 전체적 내용을 이해할 수 있다.

3. 크기의 변화

: 굵기의 변화와 더불어내용을 손쉽게 강조할 수있는 방법 중의 하나가 크기의 변화다. 가장 중요한요소를 가장 크게 키워본다.




15 June 200910

4. 정보와 공간에 대한 설계_그리드 시스템의 도입: 굵기와 크기를 다르게 하는 것보다 근본적 해결책을 제시해 줄 수 있는 것이 그리드 시스템의 도입이다. 3단 그리드 시스템을 도입했다.




5. 그리드 시스템의 적용: 그리드 시스템을 이용하여 분류한 정보를 배치했다. 공간을 정보의 유닛으로 분할함으로써, 레이아웃의 많은 고민들이 해결되었다.

7. 대비의 강화: 중요한 요소를 한층 강화시켰다.(제목의 크기의변화), 세미나 프로그램은 강연자가 중요하므로, 강연자를 별도로 분리함으로써 프로그램 내용에대한 이해가 용이하도록 처리했다.

6. 그리드 시스템 안에서의 위치변화: 그리드 시스템은 위치의 변화와 이동을 손쉽게 해결해준다. 제목과 날짜의 위치를 이동해 시각적으로 시선이 먼저가도록 유도했다. 위치를 변화시킴으로써 좀더 체계적인공간이 만들어졌다.



15 June 200911

CI Area Navigation Area

Key Visual Area

General Contents Area ImpactContents Area

Official Area

Main Visual Image






15 June 200912






15 June 200913


황금분할(Golden Section)


미술용어로, 혹은 수학용어로 쓰이 말로, 보통 ‘1:1.618’ 정도의 비율을 뜻하는데흔히 ‘5:8 비율

레오나르도 다빈치의 ‘인체비율’입니다. 신체 각 부위가 1:1.618, 즉 약5:8 의 비율로 나뉘어 있다.

사람이 시각적으로 안정감을 느끼는 비율이 바로 이 5:8 이라고 합니다. 아마도 시각적으로 익숙해졌기 때문인 것 같아요. 우리 몸 뿐 아니라 얼굴, 팔등도 모두 이 비율입니다.



15 June 200914

황금분할(Golden Section)



평면형태로 된 카드, A4 용지, 태극기 등도 거의 모두 가로×세로 비율이 5×8

TV드라마 여름향기의 한 장면 왜 하필 이장면 일까요? 화면 자체가 5:8, 즉 황금비율로 분할돼 있습니다. 사람을 바라볼 때 시선이 쏠리는 곳은 눈으로 사진에서도 시선이 맨 먼저 가는 곳, 즉 시각적 무게 중심을 모델의 눈이라고 본다면 화면의 가로 세로 모두 5:8로 나뉘는 지점에 손예진의 눈과 얼굴이 있음을확인할 수 있다.

글 제목과 본문, 이미지 등이 같이 들어가는 문서는 바로 이런공식에 의해 지면이 구성됩니다.



15 June 200915

III-II. Choice of Color


메인컬러와 배색빨강(Red)연상되는 느낌: 강렬, 정열, 온기, 생기, 혁명, 폭팔, 흥분, 더위, 열광 등유사색: 오렌지, 다홍색, 분홍색 등보색: 녹색, 연두색, 청록색 등

노랑색(Yellow)연상되는 느낌: 귀여움, 발랄함, 교통안전, 영광, 미래, 불안, 미숙 등연상되는 물체: 황금, 해바라기, 병아리, 개나리, 레몬, 바나나, 태양, 달, 사막 등유사색: 주황, 연두색 계열보색: 파랑색, 보라색 계열

녹색(Green)연상되는 느낌: 안전, 안정, 평화, 건강, 청결, 생명감 등연상되는 물체: 풀, 잔디, 나무, 숲, 골프장, 초원, 야채, 풋과일 등



15 June 200916

III-II. Choice of Font


맑은고딕체

나눔고딕체(Naver)

다음체(Daum)

나눔명조체(Daum)

궁서체

국문글꼴 English Font

Arial

Impact

Times New Roman

Trebuchet MS

Lucida Handwriting

휴먼편지체 Lucida Console



15 June 200917

III-III. Diagram


사전적 의미 : 도표, 일람표, 열차 운행표.

수학공식이나 컴퓨터사용에서 알기 쉽게 그림으로 표현한 것.

Icon Diagram세계 누구나 알 수 있는 아이콘으로 명령체계나 공식을 표현한 것



15 June 200918

III-III. Diagram


Exposition Diagram

박물관이나 미술관 등의 전시관의 전개도를 다이어그램화 한 것으로 지도에 가깝다.



15 June 200919

III-III. Diagram


Process Diagram컴퓨터나 작업의 과정이나 설계의 단계를 한눈에 쉽게 볼수있게 그려놓은 알고리즘이다.

Etc.Sequence DiagramTimeline Diagram



15 June 200920

III-V. Pictogram


공공시설 등을 상징적으로 나타내 주는 일종의 그림문자이다. 그림(picto)과 메시지(telegram)의 합성어로 국제적인 행사 등에서의 사용을 목적으로 제작된 그림문자로써언어를 초월해서 직감으로 이해할 수 있도록 표현된 그래픽 심벌(symbol)을 말한다.



15 June 200921

III-VI. Publishing Skill & Tools




15 June 200922

IV. Elements Blending.



15 June 200923

eBrand

W.I Building(Site Design Identity)

U.I

Creative

Wow!!


Goal

Idea



15 June 200924




15 June 200925

V.Visual Planning Example.



15 June 200926

Proprietary and Confidential

This material is proprietary to CiDOW Corp. It contains trade secrets and confidential information which is solely the property of CiDOW n Corp. This material is solely for the

Client’s internal use. This material shall not be used, reproduced, copied, disclosed, transmitted, in whole or in part, without the express consent of CiDOW Corp © 2007

CiDOW Corp © All rights reserved

멋진기획서만들기 Visual planning_wording strategy_김택환

Presentations & Public Speaking

Transcript of 멋진기획서만들기 Visual planning_wording strategy_김택환