. Web Style Guide 작성자 : 이 희 정

I. WEB STYLE GUIDE의 정의 1. Web Style Guide 의 의미와 목적 II. WEB STYLE GUIDE_citibank 1-1. DESIGN CONCEPT 2-1. BASIC SYSTEM_KOREA 2-1-1. Layout & Grid System 2-1-2. Header & Footer 2-1-3. GNB 2-1-4. Color System 2-1-5. Font System

I. Web Style Guide의 정의 1. Web Style Guide의 의미 와 목적 2. Web Style Guide의 관리 3. Web Style Guide의 구성 과 활용 웹 스타일 가이드 의미 케익드라마 웹 스타일 가이드(Web Style Guide, 약칭 WSG)는 일관된 케익드라마 의 Identity를 전달하기 위한 최소한의 스타일 통합 항목을 규정하는 디자인 관리 지침서이다. 웹 스타일 가이드 목적 케익드라마 웹 스타일 가이드는 케익드라마 사이트의 유지, 운영에 관한 디자인 개발 지침서로 배포하며 개발자들에게는 업무효율 향상과 사이트를 이용하는 고객들에게는 케익드라마 의 새롭고 일관된 Web Identity와 사용자 경험을 제공하여 대내외적인 브랜드 가치향상을 궁극적인 목적으로 한다.

I. Web Style Guide의 정의 1. Web Style Guide의 의미 와 목적 2. Web Style Guide의 관리 3. Web Style Guide의 구성 과 활용 웹 스타일 가이드 정책 케익드라마 웹 스타일 가이드는 Identity를 위한 최소한의 스타일 통합 항목 정의를 원칙으로 하므로 개발자는 웹 스타일 가이드 규정을 최대한 준수하여 개발하고, 준수하기 어려운 상황일 경우 스타일 가이드 담당자에게 문의하여 적용하여야 한다. 규정에 안내하지 않는 내용일 경우 기본 원칙에 위배하지 않는 범위에서 응용 적용한다. 케익드라마 웹 스타일 가이드는 케익드라마 고유의 Identity를 위한 관리 지침서로 외부에 무단으로 유출하거나 복제할 수 없다.

I. Web Style Guide의 정의 1. Web Style Guide의 의미 와 목적 2. Web Style Guide의 관리 3. Web Style Guide의 구성 과 활용 케익드라마 웹 스타일 가이드 구성 1. 웹사이트에 기본적으로, 필수적으로 반영되어야 할 WEB CORPORATE IDENTITY를 정의한다. -Symbol Mark(심볼), Logo Type(로고타입),Corporate Color(기업전용컬러) 등을 정의한다. 2. 웹사이트의 WEB STYLE GUIDE 기본시스템과 응용시스템을 정의한다. -웹사이트의 디자인컨셉 : 케익드라마 사이트의 구축 및 관리는 충분한 디자인 컨셉에 이해가 있어야 한다. -웹사이트 스타일 가이드_기본시스템 : 네비게이션, 레이아웃 및 그리드 등의 기본적인 큰 틀에 관한 가이드이다. -웹사이트 스타일 가이드_응용시스템 : 팝업,배너,이미지 영역 등의 세부적인 디자인 요소에 관한 디자인 가이드이다. 케익드라마 웹 스타일 가이드 제작 환경 1. 케익드라마 Web Style Guide의 모든 Size는 Pixel 단위를 기본으로 제작되었으며,단 Font System 의 경우 Point를 기본으 로 하여 Pixel 단위를 혼용하는 것으로 한다. 2. 케익드라마 Web Style Guide의 사용자 Browser 환경을 Internet explorer 6.0 이상으로, 사용자 인터넷 환경128K(최소56K 권장사양 512K )이상으로 가정하였다. 웹 스타일 가이드 활용 1. 먼저 WSG 내용의 전체적인 흐름을 파악한다. 2. 케익드라마 의 Web CI 및 케익드라마 사이트의 베이직시스템을 숙지하여 레이아웃, 그리드 및 네비게이션에 관해 이해한다. 3. 버튼,불릿, 테이블 등의 세부 디자인 요소 가이드를 참고하여 세부 디자인에 반영한다. 4. 메인 이미지 교체,플래쉬 파일의 수정 및 팝업 등은 웹스타일 가이드의 응용디자인가이드를 참고한다.

1-1. DESIGN CONCEPT 1-1-1. Main 2-1. BASIC SYSTEM_KOREA 웹사이트를 유지 및 관리하기 전, 디자인 컨셉에 대한 충분한 이해와 숙지가 있어야 한다. Catch phrase Keyword Target Approach Strategy Global Financial Network Identity, Global, Trust, comfortable, familiar, Professionalism 01. 케익드라마 Corporate Identity를 Guide화하여 Website에 적용한다. 02. Site Concept은 Global Network이다. 03. 고객에게 좀더 친밀감과 편리함을 주도록 디자인한다. 01. 케익드라마의 CI, 통일성있게 적용한다. 02-1. 'Global Network'라는 concept은 비즈니스, 신뢰감을 줄 수 있는 비주얼을 통해 Global, Professional한 컨셉을 전달한다. 03-1. 메인 비주얼은 food image를 사용한다. 03-2. 고객의 편리를 고려하여 UI(User Interface)를 디자인한다. 01-1. 케익드라마 리뉴얼 사이트에는 반드시 케익드라마 의 CI System에 따라 통일성있게 적용한다. 01-2. 케익드라마 리뉴얼 사이트에는 케익드라마 CI의 Signature Type을 제한적으로 사용한다. 01-3. 케익드라마 리뉴얼 사이트에는 케익드라마 CI color를 GNB Color에 적용시킨다. 02-1. Visual은 ‘cake & food'의 Keyword에 맞춰서 사용한다. 02-2. Visual의 Quality는 선명하고 명확한 것을 사용한다.

1-1. DESIGN CONCEPT 1-1-1. Main 2-1. BASIC SYSTEM_KOREA Main Concept : Global Network Keyword : Global(글로벌한), Trust(신뢰감을 주는), Familiar(친밀한), easy to accessr(접근하기 쉬운) 케익드라마의 Renewal Concept을 효과적으로 전달하는 이미지영역과 확실한 고객군들의 맞춤 서비스로 바로 갈 수 있는 메뉴영역을 둠으로서 원하는 페이지로 쉽게 갈 수 있도록 디자인하였다. 빵 사이트인만큼 식욕을 자극하지만 깔끔한 느낌의 이미지를 메인으로 넣어주었고, 진한 노란색과 남색이 잘 어우러지도록 디자인하였다.

A B C D A B C D Logo GNB Visual Zone Footer 210 1-1. DESIGN CONCEPT 2-1. BASIC SYSTEM_KOREA 2-1-1. Layout & Grid System - Main 2-1-2. Header & Footer 2-1-3. Contents 2-1-4. GNB 2-1-5. Color System 2-1-6. Font System 610 100 A B C 550 D 80 A Logo B GNB C Visual Zone D Footer

Header 1-1. DESIGN CONCEPT 2-1. BASIC SYSTEM_KOREA 2-1-1. Layout & Grid 2-1-2. Header & Footer 2-1-3. Contents 2-1-4. GNB 2-1-5. Color System 2-1-6. Font System 30 290 325 Footer 40 300

A B A B 1-1. DESIGN CONCEPT 1424 2-1. BASIC SYSTEM_KOREA 2-1-1. Layout & Grid System 2-1-2. Header & Footer 2-1-3. GNB -Top 2-1-4. Color System 2-1-5. Font System 1424 A B A 1 Depth Menu B 2 Depth Menu Mouse off Color : #042d57 Mouse on Color : rgb(167, 19, 56)

1-1. DESIGN CONCEPT 2-1. BASIC SYSTEM_KOREA 2-1-1. Layout & Grid 2-1-2. Header & Footer 2-1-3. Contents 2-1-4. GNB 2-1-5. Color System 2-1-6. Font System 주메뉴컬러 #f1c85c #042d57 #edcc74 opacity : 75% 보조컬러 #554234 포인트컬러 #c70551 마우스 오버시 메뉴 컬러 #a71338

color: #042d57 color: #042d57 color: #39536d 1-1. DESIGN CONCEPT 2-1. BASIC SYSTEM_KOREA 2-1-1. Layout & Grid 2-1-2. Header & Footer 2-1-3. Contents 2-1-4. GNB 2-1-5. Color System 2-1-6. Font System 시스템 Font color: #042d57 color: #042d57 color: #39536d

. 감사합니다