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.

Presentation on theme: "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."— Presentation transcript:

1 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

2 Design Style guide C o m p o s i t o n 색상(Color)
C o m p o s i t i o n 01_ 웹 스타일 가이드의 목적은 웹사이트의 통일되고 일관된 사용자 경험(UserExperience)을 구현하고, 사이트의 추가개발 및 유지보수의 편리성을 높이는데 있다. 체계적이고 일관된 사용자 경험(User Experience)은 결과적으로 사용자들에게 사이트의 일관되고 통일된 아이덴티티(Identity)와 브랜드(Brand) 이미지를 형성한다. com의 모든 디자인부분은 스타일가이드에 의해서 개발됩니다. 이러한 목적으로 만들어지는 웹 스타일 가이드는 더욱 체계적인 사이트개발을 위해 사용된다. 02_ 03_ C o m p o s i t o n 색상(Color) 각 카테고리별 특성 강화와 컬러 바리에이션 정의 컨텐츠 엘리먼트와 폰트(Font) 컨텐츠 엘리먼트 정의 국문 영문 폰트 정의 및 타이틀과 컨텐츠 폰트 사용 규정 레이아웃(Layout) 메인페이지와 서브페이지 그리드 시스템 정의 그래픽 사용의 정의 (Graphic Elements) 이미지 포맷 이미지 가이드 정의

3 Design Style guide D e s i g n S t y l e g u i d e _ 02
C o l o r p l a n 시각적 디자인 측면 웹 스타일 가이드에서 가장 중요한 내용을 이루고 있는 부분이 시각적 디자인에 관한 내용들이다. 시각적 디자인에 관련한 사항들은 시각적 컨셉(Visual Concept), 색상(Color), 폰트(Font), 레이아웃(Layout), 자주 사용되는 그래픽 요소들(Graphic Elements) 등이다. 시각적 컨셉 (Visual Concept) 프로젝트의 디자인 컨셉과 컬러 컨셉에 대한 정의를 기술하십시오. 구 분 컬 러 계 열 M A I N C O L O R orange 럭 셔 리 몰 brown 공 동 구 매 blue 회 사 소 개 green 킬 러 컨 텐 츠 red 스 페 셜 몰 violet E C T gray

4 Design Style guide D e s i g n S t y l e g u i d e _ 03
C o l o r p l a n 컬러 계획 _ 각 섹션별 컬러를 독립된 색상군으로 표현하여 전개한다. 독립된 섹션별 컬러는주변색을 이용하여 아이덴티티를 유지한다. 오렌지 계열을 사용하여 더욱 가지고 싶은 욕망을 불러일으킴 M A I N C O L O R orange #F07600 #FCA61F #F6E2C3 럭 셔 리 몰 luxury한 느낌을 강조한 브라운계열의 컬러를 사용하여 차분하고 고급스러움을 지양 brown #997A43 #B7A17B #E6DED1 공 동 구 매 시원한 블루계열을 사용하여 공동구매 매장의 특징을 부가시킨다. blue #0D6FD3 #5CA4ED #BDD8F4 회 사 소 개 평온한 그린계열을 이용하여 회사의 정신 및 이미지를 표현 green #219D1E #2BC842 #9CE7A7

5 Design Style guide D e s i g n S t y l e g u i d e _ 04
C o l o r p l a n 킬 러 컨 텐 츠 가장 핵심이 되는 킬러컨텐츠를 강렬한 레드 계열의 컬로로 표현 red #EB0C5B #EC6D9A #F5CBDA 스 페 셜 몰 바이올렛계열의 고귀하고 신비로운 느낌을 사용 violet #931BB1 #BA65CF #E6BBF0 E C T 차분한 느낌의 일반 컨텐츠 전개 gray #0D6FD3 #5CA4ED #BDD8F4

6 Design Style guide D e s i g n S t y l e g u i d e _ 04 - 1
C o l o r p l a n_ s a m p l e C O O L 시원한 느낌 #6699FF #99CCFF #FFFFFF E L E G A N T 여성스럽고 엘레강스한 느낌 연출 #CC3366 #FF6699 #FFCCCC F U N N Y 채고가 높고 발랄한 색상을 사용 #66CC00 #FFFF33 #BDD8F4 N O B L E N E S S 짙은 컬러로 무거운 느낌과 엄숙함을 연출 green #663333 #996600 #CCCC99

7 Design Style guide D e s i g n S t y l e g u i d e _ 04 - 2
C o l o r p l a n_ s a m p l e B I Z 비지니스느낌 연출 #666666 #000066 #DDDDDD C U T E 깜찍하고 귀여운 컬러연출 #FF9999 #FFCC66 #FFFF99 A U T U M N 가을 분위기 연출 #666633 #CC9900 #FFFFCC W I N T E R 겨울의 분위기 연출 green #333399 #CCCCCC #FFFFFF

8 Design Style guide D e s i g n S t y l e g u i d e _ 05
T i t l e e l e m e n t T I T L E 컨텐츠 타이틀 아이콘 정의 C O N T E N T S 컨텐츠 기술 (본문 정의) S U B_ T I T L E 컨텐츠 SUBJECT 정의 E C T 부가 요소 및 강조 T i t l e e l e m e n t s a m p l e

9 Design Style guide D e s i g n S t y l e g u i d e _ 06
F o n t p l a n _ 국 문 T I T L E 윤고딕 120 36 PT 자간 100% 장평 100% S U B_ T I T L E SD_Gothic M 18 PT 자간 100% 장평 100% SD_Gothic M 11 PT 자간 100% 장평 100% C O N T E N T S S P E C I A L 돋움 12 PT 자간 100% 장평 100% C O N T E N T S B A S I C

10 Design Style guide D e s i g n S t y l e g u i d e _ 07
F o n t p l a n _ 영 문 H E A D L I N E DIN Schrift_ pt DIN Schrift_ 1451 Mittel 자간 100% 장평 100% DIN Schrift_ pt C O N T E N T S T I T L E DIN Schrift_ 1451 Mittel 16 PT 자간 100% 장평 100% verdana 11 PT 자간 100% 장평 100% C O N T E N T S B A S I C

11 D e s i g n S t y l e g u i d e _ 08 Design Style guide M a i n g r i d s y s t e m 화면모드 1024x768 기준 메인화면 이벤트 화면까지 노출 01_ Header Area Main navigation ( depth1) 100 px Sub navigation ( depth2) 20 px 02_ Left Area 03_ Main Contens Area 04_ right Area 05_ footer Area 160 px 580 px 160 px 900 px 01_ Header Area 상단에 네비게이션 버튼(Main Navigation(Depth 1) Sub Navigation(Depth 2)들이 위치한다. 02_ Left Area 각 섹션별 컨텐츠의 바로가기 이미지와 최근등록글 위치 03_ Main Contens Area 주 컨텐츠의 특성을 살린 메인 이미지와 헤드카피가 위치하며 각 대표 컨텐츠의 notice가 위치 04_ right Area 각 섹션별 컨텐츠의 바로가기 이미지와 최근등록글 위치 05_ footer Area Utility Link와 Brand Link, Legal Information이 포함된다.

12 Design Style guide G r a p h i c E l e m e n t s
I M A G E F O R M A T JPEG는 24비트의 컬러를 지원하기 때문에 사진 이미지에 대한 압축에 효과적이다. 색조변화가 부드럽고 이미지의 경계가 날카롭지 않은 사진이나 일러스트레이션일 경우 JEPG 압축을 적용한다. 01_ JPEG GIF는 파일크기를 최소화하기 위한 압축방식을 사용하기 때문에 8비트 칼라 팔레트로 칼라를제한한다. 단순한 색상의 그래픽 이미지의 경우 GIF 압축을 적용한다. 02_ GIF [플래시 파일을 사용할 경우] 포토샵에서 불러들인 비트맵 이미지가 있을 경우, 플래시 애니메이션을 Export Move시킬때 나타나는 대화상자에 JPEG Quality 옵션이 있다. 수치가 커질수록 파일크기가 커진다는 점을 감안하여 이미지의 손상정도와 파일크기의 균형을 고려하여 50~60 정도로 조절할 것을 권장한다. 03_ SWF I M A G E G U I D E 01_ 칼라와 톤 쇼핑에 관련된 주제로 하며 색감이 풍부한 파스텔톤의 이미지를 주로 사용한다. 02_ 크기 이미지의 크기는 사이트의 그리드에 맞게 규정한다. 03_ 모양 사진 이미지의 경우 외곽은 사각형 처리를 기본으로 하되 경우에 따라 오브젝트 이미지일 경우 외곽라인을 따서 사용할 수 있다. 04_ 일러스트 일러스트의 느낌이 필요한 부분에 대해서는 사진이미지의 사용을 자제하고 일러스트를 사용할수 있다. 05_ 아이콘 전체 사이트에 일관성을 주기 위해 컨텐츠 링크, 뉴스, 이벤트, 맞춤정보, 게시판 본문 제목 단서, 방향제시 등 각 성격에 따라 아이콘을 사용한다.

13 Design Style guide Design Style guide C o n f i r m a t i o n
com 웹사이트 디자인 스타일가이드 정의서는 제작을 위한 양사간의 합의에 준하며, 제작초기에 명시된 디자인 스타일가이드는 제작 중/후에 변경될수 없습니다. Design Style guide com 웹사이트 디자인 스타일가이드 정의서 작성_ 2002년 7월 26일 Vitamind inc 2002년 0월 0일 상호(갑) : 주 소 : 사업자(주민)등록번호 : 대리인 : (인) 대표자 : 상호(을) : vitamind 주 소 : 사업자(주민)등록번호 : 대리인 : (인) 대표자 : “갑”과 “을”은 디자인 스타일 가이드의 합의을 위해 본 계약서를 2부 작성 상호날인 하여 각각 1부씩 보관한다.