. Web Style Guide 작성자 : 이 희 정.

Slides:



Advertisements
Similar presentations
2D 게임 프로그래밍 프로젝트 학과 : 게임 공학과 학번 : 이름 : 최우진.
Advertisements

2. 미디어 쿼리 : 다양한 뷰포트의 지원 김은옥 1 학습목표 : 여기서는 미디어 쿼리 작성방법, 뷰포트 지정 방법 등 을 살펴본다.
영화 예매 시스템 - 많이 봤다이가 ? CSE Corp. PM 송진희 김성욱 김보람 천창영.
1 넷스팟 MAC ID 설정 방법 ( 서울캠퍼스 기준 ) 각종 스마트폰의 WiFi 를 이용시 각종 스마트폰의 WiFi 를 이용시 MAC ID 설정을 하는 방법 입니다. 아이폰의 경우는 별도의 설정없이 바로 사용이 가능하오니, 사용이 어려울 경우, 고객센터로 문의하시면 됩니다.
社 內 限社 內 限 LGE ISG 검수요청서 정보전략팀. Great Company Great People 검수 결과 LG 전자 인트라넷 시스템의 Visual 요소를 각 영역별로 다각적인 측면에서 측정한 후, 객관적인 방법으로 결과를 도출하여 그 결과를 바탕으로 모든 B2E(
ICGIST 1. 기존 사이트 분석 A. 메인 페이지 분석 / 1 SK 케미칼의 웹아이덴티티가 효과적으로 표현되지 못하였으며 메인 비주얼이 SK 케미칼의 기업이념을 표현하는데 미흡. - 슬로건 ( 인간과 자연의 행복한 조화 ) 에 맞는 기업 이미지의 강조 필요.
OZ 의 이미지 구축을 위한 광고 커뮤니케이션 12 기 프로공감 류지현. CONTENTS 문제 찾기 -OZ 분석 - 목표설정 - 타겟설정 해결 방안 ( 전략 ) -OZ 만의 컨셉을 찾자 ! -OZ 의 Brand Concept 더욱 구체적인 해결방안 ( 전술 )
VIT AMI N D D e s i g n S t y l e g u i d e DE SIg N S T YLE G UI D E.
홈페이지를 위한 메뉴바 만들기 메뉴바 제작 순서 LAYER STYLE 대화상자 Shape툴로 기본모양 제작
관광 스마트 북 발행 제안 OSMD( One Source Multi Device ).
30강_웹문서 제작 팁 웹문서 제작 팁 Lecturer Kim Myoung-Ho Nickname 블스
Index SendMemo 기능 Q & A 팀 소개 배경 및 목적 구현
에스에스 밀크 품목추가 깨질 경우 처리 방법입니다.
Insert Footer or Copyright Information Here
피티라인 파워포인트 템플릿.
통합단말 UI Framework 컨설팅 - 디자인 시안 설명회
Web Renewal Project 김명원
MS-Access의 개요 1강 MOS Access 2003 CORE 학습내용 액세스 응용 프로그램은 유용한 데이터를
웹디자인 표준 정의서 통합정보시스템 구축 (1단계) KCDC-PRO-012 Version 1.0.
Visual Basic .NET 처음 사용하기.
Internet Explorer 8,9,10,11 브라우저를 통한 VPN 접속가이드
iframe 사용하기 Chapter 3 Part 2
DIGITAL CAMPAIGN PROPOSAL
INTERIER DESIGN PROPOSAL May, 이 문서는 나눔글꼴로 작성되었습니다. 설치하기.
3강_HTML 기본-II 리스트 태그 - ul,li,ol 표를 나타내는 태그 - table 이미지를 출력하는 태그 – img
웹 사이트 분석과 설계 (주제 : 화면설계) 학번 : 성명 : 한형진.
우리집닷컴 Style Guide 우리집닷컴 Web Style Guide Web Planner 김 영실.
이미지 포렌식 작성자: liberte97.
학과 : E-BIZ 경영학과 학번 : 이름 : 홍 지 애
KNOW WHERE 시각적 보조자료 3 폰트 아이콘 템플릿.
제3절 인터넷 비즈니스 창업성공전략과 고려사항
반응형 웹 프로젝트
파피루스 사이트 웹기획서.
(주)크리틱 웹사이트 구축 기획안.
2018년 11월 05일 박성진 Web & Internet [08] 레이아웃 P1 2018년 11월 05일 박성진
3. 웹사이트 디자인 분석 Design concepts분석 Concept – Classic + Luxury
인문학 동영상 강의 사용자 매뉴얼 (PC & Mobile).
(개정판) 뇌를 자극하는 Red Hat Fedora 리눅스 서버 & 네트워크
웹 사이트 분석과 설계 학과 : e-biz(2-1) 성명 : 송예슬.
2강_첫번째 안드로이드 프로젝트 에뮬레이터(AVD) 만들기 처음 만들어 보는 프로젝트 전체적인 구성 살펴보기
※ 편리한 사이버 연수원 사용을 위한 인터넷 최적화 안내 ※
웹사이트 분석과 설계 (화면 설계) 학번: 성명: 박준석.
PMIS 서버 설정 환경설정 작성자 : 배경환.
호서대학교 조교 사용자 설명(종합정보) 2014년 05월 15일.
S-Work 2.0 DRM 신규 버전 설치 가이드 SOFTCAMP
( Windows Service Application Debugging )
학습목표 처음 만드는 비주얼 베이직 프로그램 프로그램 실행과 실행 파일 생성. 학습목표 처음 만드는 비주얼 베이직 프로그램 프로그램 실행과 실행 파일 생성.
ITQ 정보기술자격 국가공인 Excel 2007 Ⅱ 함수- 15회차 강사 : 박영민.
창의 설계 가이드 (모터 프로그래밍 및 테스트)
RENEWAL PROJECT 기획자 : 정은 미.
제목 나눔고딕 EB, 41pt 이 문서는 나눔글꼴로 작성되었습니다. 다운받기 design. 나눔고딕 EB, 36pt.
Suit Accessory IT 팀 한주훈.
01. 분산 파일 시스템의 개요 네트워크에 분산된 파일을 사용자가 쉽게 접근하고 관리할 수 있게 해준다.
12 그리드 시스템.
2018년 11월 12일 박성진 Web & Internet [09] 레이아웃 P2 2018년 11월 12일 박성진
웹 사이트 분석과 설계 [디자인 리서치] 학번: 이름 : 홍지애.
웹과 모바일 홈페이지의 이해와 제작 폰트_레이아웃
Bizforms PowerPoint IT 회사제품소개서 (기업홍보및영업) 원본 PPT 바로가기 >
Bizforms PowerPoint IT, 솔루션, 온라인서비스5 파워포인트 디자인
멀티미디어 활용 -플래시 CS3 류 정 남.
웹사이트 분석과 설계 (화면 설계) 학과:e-비즈니스 학번: 이름 :조인환.
In-house Consultant Training
개인/기업 고객 Business Gate마련
웹과 모바일 홈페이지의 이해와 제작 웹기획 & 제작
Homework #3 - 페이지 모듈화 및 로그인처리 -
피티라인 파워포인트 템플릿.
전기냉방기, 전기냉난방기 효율산정 시뮬레이션 Tool 사용자 매뉴얼.
Chapter 11. 문서 인쇄 및 파일 형식.
실전 프로젝트: 홈페이지 구축 시트콤 프렌즈 팬 사이트 구축하기.
웹 사이트 분석과 설계 학과 : e-biz 경영학과 2-2 학번 : 이름 : 이재섭.
Presentation transcript:

. 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

. 감사합니다