Style Guide Web Style Guide 2000 12 29

우리집닷컴 Style Guide 우리집닷컴 Web Style Guide 2000. 12. 29 Web Planner 김 영실 1

우리집닷컴 Style Guide 목차 1. 개념 및 목적 2. Concept 3. Structure 4. Navigation 5. Visual Lay-out 6. 구성요소1(Title/Bullet /Button) 7. 구성요소2(Table) 8. 구성요소3(기타) 9. Color 10. Font 11. Media 12. Character 2

우리집닷컴 Style Guide 4. Navigation 본문화면 기본 Type Frame 활용 가능 ① ② ① 1 depth 및 2 depth Menu Area ② 3 depth 및 4 depth 및 관련 Menu Area ③ Data Area ③ 9

우리집닷컴 Style Guide 4. Navigation 프레임 링크 기본 Type ① 1 depth 및 2 depth Menu Area ② Frame 영역(주택은행, 한신정 등등) ① ② 10

우리집닷컴 Style Guide 5. Visual Lay-out 화면구성 - 초기화면 124 pixel ① 가로 : 770 pixel - 프린트 safe zone ② CI logo : 124 x 48 pixel ③ 배너 : 468 x 60 pixel ④ 가로 분할 : 150: 470: 150 pixel 468 pixel 60 pixel 48 pixel 770 pixel Top margin 25 pixel Left margin 25 pixel 150 pixel 15

우리집닷컴 Style Guide 5. Visual Lay-out 기본 Grid ① ② ③ ⑥ ⑦ ④ ⑧ ⑨ ① CI logo 및 배너광고 Area ② 1 depth Menu Area ③ 2 depth Menu Area ④ 3 depth 및 4 depth Menu Area ⑤ 관련 Menu Area ⑥ 보조기능 연결(고객지원센터, 로그인, Site map) ⑦ Full Path Area ⑧ Title Area ⑨ Data Area Footer Area ⑤ 16

우리집닷컴 Style Guide 6. 구성요소1(Title/Bullet/Button) Title - 한글 굴림체 12 point Bold ( html 내 사용 시 Style 에서 12 pt로 지정 ) Font : 굴림체 Size : 15 pt (Resolution 72 pixel/inch기준) Tracking : 0 Title - 영문 Font : Arial (Bold) Size : 18 pt (Resolution 72 pixel/inch기준) Tracking : 0 하단라인 굵기 : 4 pixel 17

우리집닷컴 Style Guide 7. 구성요소2(Table) Table Single Row Table : Header에만 BG Color 적용(Data Field 에는 White Color 적용) Multi Row Table : Td background color는 적용하지 않는 다. (White Color 적용) Table Color는 Site 마다 차별하여 적용 20

우리집닷컴 Style Guide 8. 구성요소3(기타) Main Footer BG Color : FAFEF 0 (연계Site의 경우 Color 차별화 가능) Footer 내용 : 회사소개, 이용안내, 제휴안내, 개인정보 보호정책 Copyright / E-mail 등 Sub Footer BG Color : FAF 9 F 4 Footer 내용 : Copyright / E-mail 등 21

우리집닷컴 Style Guide 9. Color 규정 Color 주 사용 Area Main Color 1 Menu Bar 상단 Color Main Color 2 Main Menu Area BG Color Main Color 3 Sub Menu Area BG Color Sub Color 1 Main 화면 내 Title 및 Table Header 등 주요 Area Color Sub Color 2 Table 내 Sub Header BG Color 등 Sub Color 3 Table 내 Data Field BG Color 등 Sub Color 44 메인화면 본문화면 기타 Color 로 사용 Contents 및 일반에 쓰이는 BGBG Color Title text color Title 등의 Point Color 1 화면 내 강조되는 text 등의 Point Color 공통 Color Main Color : Main 1, 2 Color의 경우 모든 Page에 동 일하게 적용 Main 3 Color는 Site의 성격에 맞게 차 별화된 Color를 사용하되 명도와 채도 는 모든 사이트에 유사하게 적용한다. Sub Color : Main Color에 맞게 배색하여 사용하되 Sub Color는 한가지 배색만 가능하며 한 Page내에 3가지 이상의 Color를 사 용하는 것은 지양한다. Point Color : Main/Sub Color에 맞게 배색하여 사용 하되 한화면의 Point Color는 2가지 색 이하로 사용한다. 채도와 명도가 높은 색으로 화면의 생동감을 줄 수 있도록 표현할 때 사용한다. 변형가능색 22

우리집닷컴 Style Guide 9. Color 구성 예 < Main color 1 > Top Disabled Color #F 3 F 3 F 3 < Main color 3 > < Main color 2 > HOME #469127 매물광장 #003366 분양, 청약 #3 F 3097 뉴스와 정보 #006666 대출 #2 F 72 AE 이사. 집가꾸기 #F 99100 전문가상담실 #82 B 025 커뮤니티 #B 45484 My Page #A 79040 HOME #CDEECC 매물광장 #D 4 E 7 F 6 분양, 청약 #DDDAF 5 뉴스와 정보 #D 0 EAEA 대출 #E 7 E 7 CF 이사. 집가꾸기 #FFEEA 9 전문가상담실 #D 9 E 9 B 8 커뮤니티 #FAE 7 E 9 My Page #ECEDCE 24

우리집닷컴 Style Guide 9. Color 채널 Color 구성 예 우리집 대출채널Color : < 대출 > Sub color 1 #E 7 E 4 CF Sub color 2 #F 9 F 7 EF Sub color 3 #FFFFFF(white) Sub color 4 #FBFBF 7 title text color #5 B 5 B 0 D Point color 1 #601515 신뢰와 안정감을 주는 컬러 적용 25

우리집닷컴 Style Guide 10. Font 본문화면 Title - 한글 굴림체 12 point Bold ( html 내 사용 시 Style 에서 12 pt로 지정 ) Font : 굴림체 Size : 15 pt(bold) (Resolution 72 pixel/inch기준 ) Tracking : 0 본문화면 Title - 영문 Arial 12 Point Bold ( html 내 사용 시 Style 에서 12 pt로 지정 ) Font : Arial (Bold) Size : 15 pt (Resolution 72 pixel/inch기준 ) Tracking : 0 27