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

Presentation on theme: "우리집닷컴 Style Guide 우리집닷컴 Web Style Guide 2000. 12. 29 Web Planner 김 영실."— Presentation transcript:

1 우리집닷컴 Style Guide 우리집닷컴 Web Style Guide Web Planner 김 영실

2 목 차 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

3 Web Style Guideline 의 목적
1. 목적 및 개념 Web Style Guideline 란? 우리집닷컴 웹사이트에 일관된 시각적 아이덴티티를 부여하기 위한 요소 - 웹사이트 구축시 기본적으로 준수해야 하는 제작 원칙 - 원칙에 위배되지 않는 한도내에서 다양한 기능성을 가지고 변화 가능 - 디자인 가이드라인의 범위는 고객의 정책에 의해 결정 Web Style Guideline 의 목적 우리집닷컴 웹사이트 디자인 아이덴티티 관리 책임 - 각 채널의 통일성을 부여하여 사용자들이 직관적이고 쉽게 사용할 수 있는 표준 제공 - Woorijip.com 및 관련되는 다양한 Site 및 Application의 유지 보수 관리 용이 - 신규 사이트의 Guideline 적용기준을 제시, 관리

4 3e : e-family + easy + efficiency
2. Concept WRJ 만의 아이덴티티를 적용한 디자인 - 우리집닷컴의 이미지를 부각 - 부동산에 관한 모든 서비스를 제공하는 Portal Site를 지향한 화면구성 - 안정된 화면구성 Design Concept 3e : e-family + easy + efficiency - 개인과 가족의 삶의 질을 향상시키는 vision 제시 - Interface의 통일감과 일관성을 통하여 편안하고 쉬운 네비게이션 제공 - WRJ과 사용자간의 Communication 효율성을 강조한 Design

5 3. Structure - 개인회원 주택은행 http://www.woorijip.com koasset 회원가입
About Woorijip Event/What’s new 집들이선물코너 포인트 Polling Site Map/바로가기 (특종매물) 매물광장 매물광장 My Page 대출 분양청약 이사와 집가꾸기 뉴스와정보 전문가상담실 커뮤니티 매물검색 부동산 수첩 내게맞는대출 청약길라잡이 이사가이드 우리집기획뉴스 법률 모임방 매물등록 부가서비스 주택은행대출신청하기 아파트분양종합검색 이사견적서 뉴스클리핑 법무 전국중계업자방 중개업소검색 나의포인트 대출금리비교표 분양전원주택 집들이 부동산가이드 세무 사이버아파트방 시세검색 개인정보관리 대출정보ABC 사이버모델하우스 우리집고치기 부동산용어해설 부동산 라이프스타일방 매물맞춤서비스 대출상담실 인터넷청약 우리집꾸미기 우리집은몇점? 분양  청약 게시방 매매안내도우비 나의신용도평점은? 분양  청약Q&A 도전DIY 건설홍보광장 (대출) 토론방 추천코너 부동산감정가 청약FAQ 인테리어 상담실 세금계산기 (인테리어) 알림방 경매/공매 금융계산기 주소지변경 인터넷서류 질문방 부동산용어사전 오늘의대출금리 카드보내기 주택건설관련법 내집마련계산기 대출용어사전 신용카드 사이버모델하우스 금융계산기 화재보험가입

6 3. Structure - 중개사회원 주택은행 http://www.woorijip.com koasset 회원가입
About Woorijip Event/What’s new 집들이선물코너 포인트 Polling Site Map/바로가기 (특종매물) 매물광장 My Page 대출 분양청약 이사와 집가꾸기 뉴스와정보 전문가상담실 커뮤니티 매물검색 매물관리 내게맞는대출 청약길라잡이 이사가이드 우리집기획뉴스 법률 모임방 매물등록 계약관리 주택은행대출신청하기 아파트분양종합검색 이사견적서 뉴스클리핑 법무 전국중계업자방 중개업소검색 일정관리 대출금리비교표 분양전원주택 집들이 부동산가이드 세무 사이버아파트방 시세검색 고객관리 대출정보ABC 사이버모델하우스 우리집고치기 부동산용어해설 부동산 라이프스타일방 매물맞춤서비스 부가서비스 대출상담실 인터넷청약 우리집꾸미기 우리집은몇점? 분양  청약 게시방 매매안내도우비 나의포인트 나의신용도평점은? 분양  청약Q&A 도전DIY 건설홍보광장 (대출) 토론방 추천코너 개인정보관리 부동산감정가 청약FAQ 인테리어 상담실 세금계산기 (인테리어) 알림방 경매/공매 금융계산기 주소지변경 인터넷서류 질문방 부동산용어사전 오늘의대출금리 카드보내기 주택건설관련법 내집마련계산기 대출용어사전 신용카드 사이버모델하우스 금융계산기 화재보험가입

7 4. Navigation 1 Frame 초기화면 기본 Type
Woorijip.com 의 메인 및 모든 채널 Home의 초기화면은 1Frame으로 한다. 내부화면에서도 1Frame을 기본으로 하나 Frame Link의 경우 또는 기능과 성격에 맞추어 Frame 사용도 가능하다. 800x600 Safe zone 1024x768 Safe zone 150pixel 150pixel 1 Frame

8 ① ② ③ ③ 4. Navigation 채널 홈 기본 Type 채널 홈 역시 1Frame 적용
① 1depth 및 2depth Menu Area ② Graphip 영역 (케릭터와 케치프레이즈 활용) ③ Data Area ① ② ③ ③ 3.5 3.5 3

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

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

11 4. Navigation Navigation 기본 Type 1depth 메뉴(대출) 선택 2depth 메뉴(내게맞는대출) 선택

12 4. Navigation 2depth 메뉴(내게맞는대출) 선택 3depth 메뉴(상품검색) 선택

13 5. Visual Lay-out 기본 Browser 및 해상도 해상도 800 X 600 의 예
기본Browser : Explorer 4.0 이상 / Netscape 4.0 이상 * 3.0 Version에서 볼 경우에도 모든 내용을 볼 수 있도록 처리함을 기본으로 한다. 해상도 : 800 X 600 기준 * 1024 X 768 에서 보았을 때 좌측 정렬(또는 가운데 정렬)

14 5. Visual Lay-out ① ② ③ ⑨ ⑦ ④ ⑩ ⑤ ⑧ ⑪ ⑥ ⑫ ⑬ ⑭ 화면구성 - 초기화면
① Logo 및 Banner Area ② Main Menu Area ③ 보조기능 연결 ④ portal:핵심메뉴 연결 ⑤ 주력서비스 연결 ⑥ 채널별 what’s new ⑦ 로그인 ⑧ 강조메뉴 노출 ⑨ 투자사 배너 ⑩ 특종매물 홍보 ⑪ Polling ⑫ 공지사항 ⑬ 안내 페이지 연결 ⑭ copyright ② ③ ⑦ ⑨ ④ ⑩ ⑤ ⑧ ⑪ ⑥ ⑫ ⑬ ⑭

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

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

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

18 6. 구성요소1(Title/Bullet/Button)
칼라와 모양으로 변형 가능 Bullet - 내부화면 3depth는 bullet을 사용하지 않고 4depth에 bullet을 사용

19 6. 구성요소1(Title/Bullet/Button)
버튼의 Style은 동일하게 사용 매 채널의 color적용 Table이나 게시판 등의 Next/Previous 등의 Button 이외의 모든 버튼에 적용 Color 및 Size는 적용 Page 또는 Site내 기준에 따라 변형 가능 Text : 한글 – 굴림 12 pt (72p/inch) 영문 – Arial 12 pt(72p/inch) Button – 게시판/table의 버튼 버튼의 Style은 동일하게 사용 Color 및 Size는 적용 Page 또는 Site내 기준에 따라 변형 가능

20 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 마다 차별하여 적용

21 8. 구성요소3(기타) Main Footer Sub Footer Footer BG Color : FAFEF0
(연계Site의 경우 Color 차별화 가능) Footer 내용 : 회사소개,이용안내,제휴안내,개인정보보호정책 Copyright / 등 Sub Footer Footer BG Color : FAF9F4 Footer 내용 : Copyright / 등

22 9. 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가지 색 이하로 사용한다. 채도와 명도가 높은 색으로 화면의 생동감을 줄 수 있도록 표현할 때 사용한다. 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 4 Sub Color 4 Contents 일반에 쓰이는 BG Color 메인화면 및 본문화면 기타 BG Color 로 사용 Title text color Title 등의 Point Color Point Color 1 화면 내 강조되는 text 등의 Point Color 공통 Color 변형가능색

23 9. Color Channel별 Color 구성 CI logo 칼라 차용 기업-Site-Logo의 통일감 유지
Green 칼라는 환경친화적이며, 밝고 따뜻한 느낌을 주고, 특히 Web상에서 선명하고 경쾌한 분위기를 잘 살린다. Main color 매물광장, 분양청약, 뉴스정보, 대출 등 비교적 전문적인 정보를 다루는 채널에는 신뢰감을 줄 수 있는 Blue계열의 칼라를 주로 적용함. 매물광장 분양청약 뉴스정보 대 출 이사와집가꾸기, 전문가상담실, 커뮤니티, Mypage 등 비교적 Soft한 정보를 다루는 채널에서는 따뜻하고 밝은 칼라를 적용함 이사와 집가꾸기 전문가상담실 커뮤니티 Mypage

24 9. Color Color 구성 예 < Main color 1 > Top Disabled Color #F3F3F3
HOME #CDEECC HOME #469127 매물광장 #D4E7F6 매물광장 #003366 분양,청약 #DDDAF5 분양,청약 #3F3097 뉴스와 정보 뉴스와 정보 #006666 #D0EAEA 대출 #E7E7CF 대출 #2F72AE 이사.집가꾸기 #FFEEA9 이사.집가꾸기 #F99100 전문가상담실 #D9E9B8 전문가상담실 #82B025 커뮤니티 #FAE7E9 커뮤니티 #B45484 My Page #ECEDCE My Page #A79040

25 9. Color 채널 Color 구성 예 < 대출 > 우리집 대출채널Color : 신뢰와 안정감을 주는 컬러 적용
Sub color 1 #E7E4CF Sub color 2 #F9F7EF Sub color 3 #FFFFFF(white) Sub color 4 #FBFBF7 title text color #5B5B0D Point color 1 #601515

26 10. Font Site 명 Text Font Site 명은 로고 적용
H2WuIL 9 Point Bold Site 명은 로고 적용 ( Resolution : 72pixel/inch 기준 ) Font size : 9 Point Tracking : 0 Text Font 굴림체 9 point ( html 내 사용 시 Style 에서 9pt로 지정 ) 해당되는 모든 Text는 이미지처리하지 않음을 기본으로 하나 디자인 적용에 문제가 있는 경우에는 (예:버튼 등) 이미지 문자를 사용할 수 있다. 이미지 사용 시 12 Point Resolution : 72pixel/inch 기준

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

28 11. Media Animation Animation사용을 원칙적으로 자제함 계약에 의한 상단 배너의 경우는 예외적임
필요한 경우 사이트의 성격에 따라 Image 또는 Banner 등에 Animation을 사용할 수 있으나 화면 내의 주요내용의 부각시에만 사용한다.(타사이트의 광고-주택은행 배너 예외- 등에는 사용하지 않는다.) 한 화면 내의 Animation은 2개 이하로 제한한다. Animation 제작 시에는 Color 배색에 3 Color 이상 사용하지 않으며 용량은 최소화하는 것을 기본으로 한다.

29 12. Character Character 활용 목적 Character 활용 방안 후보 Character - 벌
- 온라인 상의 WRJ 도우미 및 홍보대사 역할 사이트의 친밀감 부여 차후 활용도를 검토한 후 오프라인 캐릭터 상품 제작으로 확대 (캐릭터를 활용한 기념품 제작 등) Character 활용 방안 - 채널 안내 도우미 : 각 채널 Home에 변형된 모습으로 등장, 다양함 부여 - e-Card 캐릭터 : 회원가입, 신년카드, 집들이초청카드, 고객감사카드 등 e-Card 그래픽에 활용 후보 Character - 벌 - 벌과 벌집으로 ‘집’과의 연관성, 부지런함, 꿀(자산)모으기, 친근감