서울커피엑스포 Web Style Guide

2016 서울커피엑스포 | Web Style Guide

01. Web Menual List 1 01. Web Menual List 02. Over View 03. Basic Planing A. Main page B. Sub page A. Layout System C. Menu B. Guide System C. Typo System 04. Image A. Visual guide B. Button Guide

02. Over View 2 A. Main Page B. Sub Page C. Menu1) 사이트 컨텐츠 양과 최근 인터넷 사용 환경을 고려하여 가로 메인 및 서브 1800pixel , 컨텐츠 1200pixel 내 16bit Color 상도를 기준으로 한다.2) 페이지의 세로 길이는 1020pixel을 넘지 않도록 하고, 불가피하게 늘어날 경우 페이지 링크 등을 사용하여 사용자의 신속한 네비게이션을 가능하도록 한다.3) 모든 이미지는 PNG 포맷을 기준으로 하며 선명한 이미지나 사진 이미지의 사용 시 jpg포맷을 사용한다.4) 모든 이미지는 사이트의 속도 향상을 위해 디더링 하는 것을 원칙으로 한다.

03. Basic Planing 3 A. Layout System 1800 300 1200 300 [A] 메인 2016 서울커피엑스포 로고와 함께 일정과 Menu가 들어간다. 그와 같이1020 A 서울커피엑스포의 특성을 잘 나타내주는 비주얼이 들어가게 된다.1020 B [B] 전시회 소개 C 전시회 개요 및 전시 품목 등 2016 서울커피엑스포 전시회에 대한1020 D 전반적인 내용이 들어가게 된다. E [C] 참가안내 2016 서울커피엑스포 전시회 참가 시 필요한 사항에 대하여 안내가 되어 있습니다. [D] 관람안내 2016 서울커피엑스포 전시회 관람 안내, 티켓 구매와 사전 등록할 수 있는 공간 등이 마련되어 있습니다. [E] 이벤트 프로그램 2016 서울커피엑스포 전시회 이벤트 프로그램에 대한 안내가 되어 있습니다..10201020

03. Basic Planing 4 B. Guide System > Main-Page Guide60 190 1200500 A B C [A] 전시회 타이틀 2016 서울커피엑스포 전시회 타이틀입니다. [B] 메뉴 2016커피엑스포 로고와 각 페이지로 연결할 수 있는 메뉴가 들어가게 된다. [C] 슬라이드 서울커피엑스포의 특성을 잘 나타내주는 비주얼이 들어가게 된다. 전시회 안내, 티켓구매, 이벤트 프로그램 중 민트라벨에 대한 내용이 담겨져 있다.

03. Basic Planing 5100 60B. Guide System > Sub-Page Guide( 상단 공통 / 타이틀 및 여백 공통)860 1200 60 A BA C B C [A] 메뉴 2016커피엑스포 로고와 각 페이지로 연결할 수 있는 메뉴가 상단에 위치하게 된다. [B] 서브 타이틀 서브페이지 타이틀이 중앙에 배치된다. [C] 서브 내용 상세 컨텐츠 내용이 들어가게 된다.

03. Basic Planing 6 C. Typo System > Main font 나눔고딕 45px | #fff (자간: 100, 장평: 100%) Main title 나눔고딕 18px , 15px | #ccffff , #fff (자간:-10, 장평:100%) 나눔고딕 55px | #fff (자간: 100, 장평: 100%)MenuFont 나눔고딕 20px, 12px | #66cccc, #666 나눔고딕 14px | #666 (자간:100, 장평:100%) (자간:100, 장평:100%)Style • 테두리하단 color : 2px, #ccffff • 마우스 오버시 color는 #66cccc

03. Basic Planing 7 C. Typo System > Sub font Sub title • Style 동일 : 테두리하단 1px, #fff 나눔고딕 18px | #fff, (자간:100, 장평:100%)Contents title 나눔고딕 15px | #330000 나눔고딕 15px | #669999 나눔고딕 13px | #006666, #fff (자간:100, 장평:100%) (자간:100, 장평:100%) 나눔고딕 13px | #339999, #999 나눔고딕 15px | #fff (자간:100, 장평:100%) 나눔고딕 13px | #cc9933, #fff (자간:100, 장평:100%)기본폰트는 국문, 영문 및 PC환경, IE 호환성을 고려한다. 이미지타입으로 폰트를 사용할 경우 Main Font를 사용한다.기타 텍스트는 페이지 디자인 과정에서 결정한다. 기본 폰트 사이즈는 13px로 사용한다.

04. image 8 A. Visual guide 나눔고딕 30px | #333, #66cccc 나눔고딕 12px | #fff (자간:40, 장평:100%) (자간:40, 장평:100%) Main Slide 나눔고딕 17px | #333, #cc6600 (자간:60, 장평:100%) 나눔고딕 60px (자간:60, 장평:100%) 나눔고딕 16px, 22px | # 330000 , #333 (자간:60, 장평:100%) 나눔고딕 23px | #66cccc 나눔고딕 13px, 14px | #333 (자간:40, 장평:100%) (자간:80, 장평:100%)나눔고딕 12px 나눔고딕 24px, 18px | #fff| #ff6600, #3399ff (자간:-20, 장평:100%)(자간:20, 장평:100%) 나눔고딕 24px, 18px | # 663300, #66cccc, #663333 (자간:-20, 장평:100%) 나눔고딕 19px, 21px | #663333, #333 (자간:-20, 장평:100%)

04. image 9 B. Button Guide Main Slide botton 10Font • font : 나눔고딕 14px | #333Style (자간 40, 장평 100%) •테두리 : 1px #ff6633 , #3399ff참가안내 botton 클릭시 팝업