Transcript PPT 다운로드 - 다나와 웹스타일 가이드

커뮤니티 개편
Style Guide
각 템플릿에 해당하는 원본파일은 Template PSD 폴더에 있음
2010. 08.26
작성자 : 콘텐츠개발팀 노영미/유지숙
Copyright © DANAWA Co., Ltd. All rights reserved. 다나와 - 쇼핑의 시작
1/30
다나와 – 쇼핑의 시작 DANAWA
INDEX
본 가이드라인의 목적은
1) 사이트의 일관적이고 통일된 아이덴티티 (Identity)와 브랜드(Brand) 이미지를 형성한다.
2) 다나와 커뮤니티 서비스에 가이드라인 (Guide Line)을 제시하여 Site의 효과적인 수행, 유지, 관리, 갱신을 제어하기 위한 것이다.
01. File Info
---------
03
02. Design Template
---------
04
03. Layout System
---------
06
04. Grid System
---------
08
05. Color System
---------
28
06. Font System
---------
29
07. UI Standard Structure
---------
30
2/30
다나와 – 쇼핑의 시작 DANAWA
1.File Info
파일경로
PSD
\\Ts-htgl4b7\design\02_GUIDE\39_커뮤니티
메인
섹션메인
게시판
main.psd
템플릿 1 (디카)
section_main_last.psd
템플릿 2 (노트북)
section_notebook.psd
템플릿 3 (유아동)
section_baby.psd
목록
list.psd
보기
view.psd
글쓰기
write.psd
캐릭터
character.psd
HTML
http://img.danawa.com/new/nCommunity/htmlList.html
CSS
http://www.danawa.com/new/css/nCommunity.css
http://www.danawa.com/new/css/nCom_board.css
3/30
다나와 – 쇼핑의 시작 DANAWA
2.Design Template
메인
섹션메인
4/30
다나와 – 쇼핑의 시작 DANAWA
2.Design Template
커뮤니티 게시판_보기
커뮤니티 게시판_목록
5/30
다나와 – 쇼핑의 시작 DANAWA
3.Layout System
#wrap
메인
#header
#m_spot
#container
#wrap
전체 영역
#header
다나와 로고, 검색, 로그인, 서비스 메뉴 영역
#m_spot
로그인 및 각 카테고리별 이슈된 게시물
#m_left / #m_right
콘텐츠 영역
#footer
보조메뉴와 copyright 영역
#wrap
전체 영역
#header
다나와 로고, 검색, 로그인, 서비스 메뉴 영역
.navigation_wrap
LNB (네비게이션) 영역
.con
콘텐츠 영역
.se_side
콘텐츠 영역
#footer
보조메뉴와 copyright 영역
#m_right
#m_left
#footer
섹션/게시판
#wrap
#header
#container
.navigation
_wrap
.con_550
.con_730
. se_side
#footer
6/30
다나와 – 쇼핑의 시작 DANAWA
4.Grid System
메인
7/30
다나와 – 쇼핑의 시작 DANAWA
4.Grid System
•가로 : 925px / 세로 : 가변적
main.psd
925
> 메인
• 중요 콘텐츠 1024 해상도에서
180
745
벗어나지 않도록 주의
※ 코딩파일 참조
330
61
10
285
10
165
10
200
555
360
10
8/30
다나와 – 쇼핑의 시작 DANAWA
4.Grid System
main.psd
> TOP 게시물
582
156
140 x 140
330
50
32
77
• 영역라인 : 3px / #947add
• 게시글 top 1 타이틀 : 18px / #cf4d66
※ 캐릭터 아이콘은 comty3.0 Character.ppt 문서 참조
• 게시글 top 2.3.4 타이틀 : 기본 스타일 적용
• 댓글표기 : bold / #6367cb
• 작성 및 정보표기 : 11px / #999
9/30
다나와 – 쇼핑의 시작 DANAWA
4.Grid System
main.psd
> TOP 게시물
582
156
140 x 140
330
50
32
77
• 카테고리
#ffffff
10/30
#424242
다나와 – 쇼핑의 시작 DANAWA
4.Grid System
main.psd
> 커뮤니티 검색
925
60
• 영역라인 : 1px / #dcdcdc
• 타이틀
# 1c1c1c
11/30
# 49339a
다나와 – 쇼핑의 시작 DANAWA
4.Grid System
main.psd
> 커뮤니티 검색
• 검색창 : 1px / #bebebe
100
220
24
• 선택창 : 12px / #999999 – 활성화시 배경 : #e5e5e5
• 검색버튼 : 12px / #000000
• 출석체크버튼 : width-132px / height-26px
# 333333
12/30
다나와 – 쇼핑의 시작 DANAWA
4.Grid System
main.psd
> 테마커뮤니티 배너
270
270
56
• 영역라인 : 2px / #dcdcdc
• 배너 이미지
- 타이틀 : 15pt / 윤고딕 550 / #2e2e2e
※ 상단 가이드대로 제작하는 것이 기본이지만,
커뮤니티 이슈 및 중요도에 따라 강조되거나 해당 커뮤니티 디자인 요소대로 적용되도 무방함.
> 게시글 썸네일 없는 경우 _ noimg
• 각 콘텐츠 게시물의 대표 썸네일이 없는 경우 적용
• 영역 라인 : 1px / #e2e2e2
• 배경 : #f4f4f4
13/30
다나와 – 쇼핑의 시작 DANAWA
4.Grid System
main.psd
> 각 콘텐츠 영역
콘텐츠마다 달리 적용
56
• 영역라인 : 1px / #dcdcdc
• 타이틀 : font system 참고
가변적
• 타이틀배경 : #f9f9f9
• 더보기버튼 : 11px / #8d8d8d
> 커뮤니티 서비스 목록
23 20
20
160
20
• 서비스 타이틀 : 12px / bold / #000
• 서비스명 : 11px / #666
14/30
다나와 – 쇼핑의 시작 DANAWA
4.Grid System
섹션메인
15/30
다나와 – 쇼핑의 시작 DANAWA
4.Grid System
•가로(925) / 세로 (가변적)
section_main_last.psd
> 섹션메인
925
각 기기별 해상도(사이즈)에 따라
10
가변적으로 사이즈가 변할도록 하며,
155
요소 단위별로 화면에서 일그러지는
현상이 발생되지 않도록
블록 단위별로 움지이도록 한다.
255
※ 코딩파일 참조
10
가변적
75 x 75
75 x 75
16/30
다나와 – 쇼핑의 시작 DANAWA
3.Grid System
section_main_last.psd
> LNB
153
12
12
• 타이틀
44
82
#2f2f2f
#212121
가변적
• 메뉴 타이틀
137 x 65
- 타이틀 블랙 : 12px / #000000 / bold / 돋움
- 텍스트 블랙 : 12px / #333333 / 돋움
- 타이틀 하단 라인 : 1px solid #E5E5E5
- 점선 구분라인 : http://img.danawa.com/new/main_new/img/line_dash.gif
• 박스
- 테두리 : 1px solid #DDDDDD
17/30
다나와 – 쇼핑의 시작 DANAWA
3.Grid System
section_main_last.psd
> LNB
153
10
38
10
• 박스 타이틀
- 타이틀 블루 : 12px / #5065A8 / bold / 돋움
- 타이틀 블랙 : 12px / #000000 / bold / 돋움
- 텍스트 블랙 : 12px / #333333 / 돋움
• 박스
- 테두리 : 1px solid #D1D7EA
가변적
- 배경 : #F6F7F8
18/30
다나와 – 쇼핑의 시작 DANAWA
3.Grid System
section_main_last.psd
> TOP 게시글
15
15
10
10
237
※ 메인과 동일
19/30
다나와 – 쇼핑의 시작 DANAWA
3.Grid System
section_main_last.psd
> 게시글_섬네일+리스트형
15
10
• 박스 타이틀
22
- 텍스트 레드 : 12px / #D04B66 / bold / 돋움
15
- 텍스트 블랙 : 12px / #333333 / bold / 돋움
75 x 75
• 박스 라인
- 1px solid #DDDDDD
가변적
- 텍스트 블랙 : 12px / #333333 / bold / 돋움
15
15
10
• 블루 타이틀
- 텍스트 : 12px / #6367CB / bold / 돋움
• 블랙 타이틀
- 텍스트 : 12px / #4B4B4B/ bold / 돋움
10
10
• 글쓰기 (class=“rightBtn”)
- 텍스트 : 12px / #333333 / bold / 돋움
• 더보기 (class=“moreBtn)
• 닉네임 / 날짜(class=“description”)
- 텍스트 : 12px / #999999 / 돋움
20/30
다나와 – 쇼핑의 시작 DANAWA
3.Grid System
section_main_last.psd
> 게시글_대표섬네일 + 리스트형
15
10
10
22
• 섬네일 박스 (수동으로 제작되는 섬네일 임)
15
- 테두리 라인 : 1px solid #DBDBDB
- 안쪽라인 : 4px solid #FFFFFF
68 x 68
68
- 이미지 사이즈 : 68px * 68px
10
10
• 구분라인
- 하단 : 1px solid #EFEFEF
15
15
• 텍스트
- 타이틀 텍스트 : 12px / #4b4b4b / bold / 돋움
80 x 80
- 기간 텍스트 : 12px / #999999 / 돋움
- 날짜 텍스트 : 12px / #EB5149 / 돋움
15
49.9%
21/30
다나와 – 쇼핑의 시작 DANAWA
3.Grid System
section_main_last.psd
> 게시글_리스트형
15
10
• 텍스트
22
- 텍스트 블랙 : 12px / #606060 / 돋움
15
68
- 텍스트 블루 : 12px / #6367CB / 돋움
68 x 68
15
22/30
다나와 – 쇼핑의 시작 DANAWA
3.Grid System
section_main_last.psd
> 갤러리
15
10
22
20
80 x 80
가변적
24.8%
15
15
• 섬네일 타이틀
- 텍스트 : 12px / #606060 / bold / 돋움
• 사용자 닉네임
- 텍스트 : 11px / #787878 / 돋움
• 갤러리 박스 (class=“galleryBox”)
- 배경 : http://img.danawa.com/new/nCommunity/img/bg_se_mainall.gif
23/30
다나와 – 쇼핑의 시작 DANAWA
3.Grid System
section_main_last.psd
> 사이드 콘텐츠
10
10
10
75 x 75
80 x 80
10
178 x 54
가변적
178 x 32
24/30
다나와 – 쇼핑의 시작 DANAWA
4.Grid System
게시판
25/30
다나와 – 쇼핑의 시작 DANAWA
4.Grid System
•가로 : 925px / 세로 : 가변적
board_list.psd
925
> 게시판
• 중요 콘텐츠 1024 해상도에서
155
10
550
10
200
벗어나지 않도록 주의
※ 코딩파일 참조
※ 세부요소는 게시판 가이드 참조
가변적
730
26/30
다나와 – 쇼핑의 시작 DANAWA
4.Grid System
board_list.psd
> 타이틀 & 현재위치
550 / 730 게시판에 따라 가변적
30
• 타이틀
• 선택박스 : 검색 셀렉트와 동일
#422b9a
> 카테고리 탭
550 / 730 게시판에 따라 가변적
32
15
• 활성화 : 12px / bold / #fff / 배경 #a291e2
• 비활성화 : 12px / bold / #999 / 배경 #ebebeb
27/30
다나와 – 쇼핑의 시작 DANAWA
5.Color System
이슈되는 게시글과 GNB메뉴에 주조 칼라로 포인트를 주어 시선이 가도록 유도하며,
많은 정보로 인한 시선의 분산을 줄이기 위해 칼라 요소는 주.조칼라로 제한하였으며, 중요요소에는 포인트 칼라를 사용한다.
- 포인트 칼라 사용 : 게시글 타이틀, 댓글 수등
> Concept Keyword
친근한, 감성적인, 정다운
분류
칼라값
주칼라
RGB : 100,76,189 / #644cbd
보조칼라
RGB : 148,122,221 / #947add
RGB : 207,77,102 / #cf4d66
포인트칼라
RGB : 9,103,203 / #6367cb
28/30
다나와 – 쇼핑의 시작 DANAWA
6.Font System
• 일부 타이틀을 제외한 모든 페이지의 LNB 타이틀 및 모든 텍스트는 시스템폰트를 기본으로 한다.
• 강조되어야 하는 경우 칼라 시스템의 포인트 칼라를 적용.
> Text / Base Font (기본폰트)
돋움
가 나 다 라 마 바 사 아 자 차 카 타 파 하
Size : 12px
Color Code : #666666
ABCDEFGHIJKLMNOPQRSTUVWXYZ
> Title (타이틀)
윤고딕 540
Size : 13px
Color Code : #333333
> 텍스트 포인트
이슈게시물 타이틀
Color Code : #cf4d66
class=tit
댓글수
Color Code : #6367cb
class=pointBlueB
29/30
다나와 – 쇼핑의 시작 DANAWA
7.UI Standard Structure
> Labeling
| Image의 명명법 기준 테이블
Object (name)
Object 명칭
Object (name)
Object 명칭
버튼액션
액션명칭
일반이미지 (image)
img
배경 (background)
bg
일반
없음
타이틀 (title)
tit
버튼 (button)
btn
마우스액션
_on
블릿, 아이콘 (icon), 화살표
ico
탭 (tab)
tab
사용방법
• 단어 사이의 구분은 ‘_’를 사용하며, Image는 기능단위로 구분하여 가능한 짧은 이름을 사용하되 해당 파일의 용도를 명확히 구분할 수 있도록 한다.
Object 명칭_컷파일명.gif
Object 명칭_컷파일명.gif
예) 출석하기버튼 : btn_check.gif
Object 명칭_컷파일명_액션이름.gif
예) 베스트 공감댓글 : tit_bestcom.gif
예) top게시물 컴퓨터 탭 : talk_com.gif/ talk_com.gif
| 파일명 기준 테이블
File Type
확장명
File Type
확장명
HTML File
.html
JPEG, JPG File
.jpg
GIF File
.gif
CSS File
.css
File Type
Java Script File
확장명
.js
| 이미지 파일 FTP 정보
이미지
http://img.danawa.com/new/nCommunity/img/
30/30
다나와 – 쇼핑의 시작 DANAWA
7.UI Standard Structure
• 사이트 전체의 본문 및 일반텍스트일
경우 최대한 가독성과 디테일을 보장
> Cascading Style Sheets
| 기본 CSS : http://www.danawa.com/new/css/default.css / init.css
하는 서체 크기와 자간, 줄간격을
정의한다.
• 링크되는 텍스트, 타이틀, 메뉴, 스크롤바
등을 정의한다.
각 페이지별로 특화되는
링크 및 텍스트일 경우 color system에서
크게 벗어나지 않는 칼라로 정의한다.
/* default Selector */
body {font-family: "돋움", "Arial", "Verdana“; font-size: 12px; color:#666666; text-align:left; background-color:#ffffff;}
td table {text-align:left;}
a{text-decoration:none; cursor:pointer;}
a:hover {text-decoration:none; cursor:pointer;}
/* 링크스타일 */
span.pointPink {color:#F1679B;}
span.pointPink_B {font-weight:bold; color:#F1679B;}
/* Type Selector */
img, fieldset, button {border:none;}
li {list-style:none;}
textarea {overflow:auto;}
select { font-size:12px; font-family: "돋움","Arial","Verdana"; color:#333333; border:1px solid #cccccc;}
html:first-child select{padding-right:6px; height:20px;} /* Opera 9 & Below Fix */
option {padding-right:6px;} /* Firefox Fix */
legend {position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;}
/* For Screen Reader */
--------------------------------------------------------------------------------------------------------------html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, button
{margin: 0; padding: 0;border: 0; font-family: "돋움", "Arial", "Verdana";}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse; border-spacing: 0; font-size:12px;}
a {text-decoration:none;}
a img {border:none;}
legend, caption, hr {visibility:hidden;height:0; line-height:0; font-size:0; width:0; position:absolute; margin:0; padding:0; text-indent:1000px; }
button {cursor:pointer; overflow:visible;}
| 커뮤니티 CSS import : http://www.danawa.com/new/css/nCommunity.css
| 게시판 CSS 정의 : http://www.danawa.com/new/css/init.css >> nCommunity.css에 import
31/30
다나와 – 쇼핑의 시작 DANAWA
7.UI Standard Structure
> 기타
| Web Brower
• Microsoft Internet Explorer : 5.0~8.0버전을 지원하도록 한다.
- 8.0지원가능 방법 : <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 추가
• FireFox/Netscape등 : 우선순위는 아니지만 지원이 가능하도록 한다.
| Resolution / Support Color
• 해상도 : 1024 X 768를 기본으로 지원한다.
• 지원색상 : 16bit High Color를 기준으로 한다.
| Window Title
• 브라우저 상단에 표시되는 Window Title은 아래의 형식을 따른다.
– 행복쇼핑의 시작! 다나와 (가격비교)
| Cursor 표시
• 모든 링크 항목은 반드시 링크항목에 마우스 오버시 손가락모양의 커서로 변경되도록 처리하여 사용자 혼돈을 막을 수 있도록 한다.
| Form Tag의 위치
• HTML페이지 내에서 폼 태그 사용시 위치는 해당 블럭라인 요소를 감싸도록 한다.
예)
<form name=”user” method=”post”>
<table>
<tr>
<td></td>
</tr>
</table>
</form>
| HTML Cording 기본 규칙
- Indent Size : 4, Tab Size : 4
- Comment (주석)
<!-- 대상이름 시작 //-->
<table cellpadding=“0” celspacing=“0” border=“0”>
<tr>
<td>내용</td>
</tr>
</table>
<!-- 대상이름 끝 //-->
32/30
다나와 – 쇼핑의 시작 DANAWA
7.UI Standard Structure
> 기타
| 기타 고려사항
• 플래시와 동영상 입력시 HTML Head 부분에 아래 자바스크립트를 링크 시킨다.
<script language="javascript" src="http://www.danawa.com/js/ie_embed.js"></script>
링크가 들어갈 부분에 아래와 같이 넣어 주시면 됩니다
<script language="javascript">
ieEmbed("src=플래시 및 동영상 주소","width=넓이","height=높이","wmode=transparent");
</script>
• IMG태그의 WIDTH, HEIGHT
- IMG태그를 사용할 경우 WIDTH와 HEIGHT의 속을 지정하여 주는 것이 웹 브라우저가 HTML문서를 보다 빨리 읽는데 효과적이다.
- 이때 사이즈값에 양쪽에 “ “을 넣는다. (예 : width=“100” height=“100”)
- 검색 최적화를 위해 타이틀에 해당하는 이미지에 alt를 넣도록 한다.
• 복잡한 테이블 과다사용 억제
- 과다한 테이블 태그도 로딩속도의 적이 된다는 것도 유념해야 한다.
- 레이아웃에 해당하는 것은 <div>사용하여 css로 컨트롤 하도록 마크업을 한다.
33/30
다나와 – 쇼핑의 시작 DANAWA