예스 24㈜ 디자인 가이드

1. 예스 24㈜ 디자인 가이드 분야별 메인 배너 가이드 제작 : 예스 24㈜ 디자인팀 2008년 6월

2. 목차 • 목차 • 1 개요 • 2. 출판사 배너 ( 분야 메인 사이드 배너 ) • 3. 분야 메인 센터 배너 • 4. 이벤트 세상 썸 네일 • 5. 쿠폰 배너 • 6. 하이라이트 배너 • 7. 강조 배너 3page 4page 9page 13page 15page 18page 22page 2

3. 1. 개요 2010년 업데이트된 이 가이드는 예스24 분야별 메인의 일관된 디자인 관리를 위하여 마련하였습니다. 가이드에 준하여 제작되어지는 결과물들은 사용자들에게 예스 24의 일관된 Look & Feel을 전달하게 됩니다. 가이드는 함께 제공되는 샘플 파일(PSD파일로 다운 로드 가능)과 함께 디자인 작업을 편리하게 돕게 됩니다. 제작물은 반드시 가이드에 준하여 작업해야 하며, 샘플이 제공되는 항목은 반드시 샘플을 다운받아 작업합니다. 3

4. YES24 분야별 메인 배너 가이드 2. 출판사 배너

5. 페이지 설명 제공되는 가이드는 2008년 새롭게 개편된 예스24 분야별 메인의 출판사 배너에 대한 설명으로 사이트의 일관된 디자인 관리를 위해 제작되었습니다. 출판사 배너의 특성상 노출의 편리함을 돕기 위해 아래 그림과 같이 좌측과 우측이 동일하게 디자인 되었으며 좌,우측 구분 없이 사용 가능합니다. 배너 이미지 제작 시에는 반드시 제공되는 샘플을 다운받아 작업하시기 바랍니다. 좌측 영역 우측 영역 5

6. 배너 제작 설명-1 출판사 배너는 그림과 같은 순서로 반복 전시할 것을 권장합니다. 많은 숫자의 배너 노출 시 시각적인 구분을 위하여 A 타입(배경이 없음) 과 B 타입(배경이 있는 강조 형)으로 디자인 하였습니다. 칼라 별로 A타입 4종과 B타입 4종이 제공됩니다. A타입(배경 없음) 145px B타입 (배경 있는 강조 형) 163px • 배너 크기: 가로163 X 세로44 (단위pixels, 이하px ) • 배너 구성: 이미지와 카피는 <그림1>과 같이 • 이미지 ‘왼쪽’, 카피 ‘오른쪽’ 의 좌우 조합만 허용합니다. • 카피는 메인 카피 한 줄, 서브 카피 한 줄로 구성되며, • 이미지와 카피는 겹치지 않도록 합니다. • 이미지지 영역 및 텍스트 영역은 이동 시킬 수 없습니다. 44px 44px 텍스트 영역 이미지영역 <그림1> 6

7. 배너 서체 정의, 칼라 < A 타입 : 배경 없는 출판사 배너> • 이미지 영역 • - 크기 : 가로는41 X 세로 44px (Round 4px) • 카피 영역 • - 아래 그림과 같이 메인 카피와 보조 카피로 구성됩니다. • 메인 카피는 아래 그림과 같이 네 가지 칼라가 제공 되고 • 선택 적용 가능 합니다. • 서체,칼라, 위치 등 어떠한 요소도 변형 할 수 없습니다. • 제작은 반드시 제공되는 샘플 파일을 다운 받아 작업합니다. • 아래 지정한 윤 고딕 서체가 없을 때는 유사 고딕서체로 작업합니다. 163px 44px 이미지영역 (44 X 41px) 서브 카피 서체 : 윤고딕130 크기 : 12px 자평 : 80% (글자수에 따라 75~90%조정가능) 자간 : -100 칼라 : #3c3c3c 메인 카피 서체 : 윤고딕130 크기 : 14px 자평 : 90% (글자수에 따라 75~90%조정가능) 자간 : -100 이내 칼라 A : #188a76 칼라 B : #462bac 칼라 C : #a229ad -> 배너제작은 반드시 제공되는 샘플 PDS를 다운받아 작업합니다 칼라 D : #da035f 배너 샘플 4종 다운 로드 >> 7

8. 배너 서체 정의, 칼라 < B 타입 : 배경 있는 강조 배너> • 이미지 영역 • - 크기 : 가로는41 X 세로 44px (Round 4px) • 카피 영역 • - 아래 그림과 같이 메인 카피와 보조 카피로 구성됩니다. • 메인 카피는 아래 그림과 같이 네 가지 칼라가 제공 되고 • 선택 적용 가능 합니다. • 서체,칼라, 위치 등 어떠한 요소도 변형 할 수 없습니다. • 제작은 반드시 제공되는 샘플 파일을 다운 받아 작업합니다. • 아래 지정한 윤 고딕 서체가 없을 때는 유사 고딕서체로 작업합니다. 163px 44px 이미지영역 (44 X 41px) 서브 카피 서체 : 윤고딕130 크기 : 12px 자평 : 80% (글자수에 따라 75~90%조정가능) 자간 : -100 칼라 : #1c1c1c 메인 카피 서체 : 윤고딕130 크기 : 14px 자평 : 90% (글자수에 따라 75~90%조정가능) 자간 : -100 이내 칼라 A : #540a5b 배경칼라 #e0b8e4 #c0c9e7 칼라 B : #16234b 칼라 C : #154840 #b1d7d1 -> 배너제작은 반드시 제공되는 샘플 PDS를 다운받아 작업합니다 #f4b8d2 칼라 D : #7c1240 배너 샘플 4종 다운 로드 >> 8

9. YES24 분야별 메인 배너 가이드 3. 분야 메인 센터 배너

10. 3. 분야 메인 센터 배너 2-1 .페이지 설명 분야 메인 은 아래 그림과 같이 구성 되며, 다음은 분야 메인 센터 배너에 해당하는 설명입니다. 이벤트의 특성이 드러나도록 자유롭게 디자인되는 센터 배너는 최대 20개까지 노출 가능하며, <그림 1>과 같이 배너 우측 하단의 버튼을 통해 사용자가 원하는 배너로 편리하게 접근이 가능 합니다. 이 우측 하단 버튼은 자동으로 생성 되며, 배너 이미지 제작 시에는 버튼 영역을 비워놓고 작업합니다. 센터 배너 영역 Box Round는 자동 생성됩니다 <그림 1> 버튼은 자동으로 생성 되며 베너 제작 시에는 버튼 공간을 비워 놓고 작업합니다 배너는 최대 20개까지 노출됩니다 4

11. 3. 분야 메인 센터 배너 • 2-2. 크기 및 필수 구성요소 • 배너 크기 : 540 X 120 (단위: pixels 이하px ) • 필수 구성 요소 : 메인 카피, 서브 카피, 대표 이미지 • 버튼 영역 : 우측하단 540 X 22px •  버튼은 사용자가 센터 배너를 자유롭게 볼 수 있도록 돕는 기능으로 자동으로 생성됩니다. • (최대 20개 생성가능) • 따라서, 하단의 버튼 영역은540 X 22 px만큼 비워놓고 작업합니다. 540px 120px 헤드라인 카피 서브 카피 대표이미지 22px 540px 버튼영역 5

12. 3. 분야 메인 센터 배너 • 2-3. 권장 제작 가이드 • 센터 배너는 자유 구성을 기본으로 하지만, 제작의 • 편리함을 돕기 위해 아래와 같이 권장 가이드를 제안합니다. • 필수 구성 요소 : 메인 카피, 서브 카피, 대표 이미지 1. 메인 카피 : 고딕계열의 크기30~35pt 서체 권장 2. 서브 카피 : 명조계열의 크기11~13pt 서체 권장  메인 카피 한줄, 서브 카피는 2줄을 넘지 • 않도록 합니다. 3. 대표 이미지: 이벤트를 상징적으로 표현하는 대표이미지를 엄선하며, 이미지와 택스트는 겹치지 않도록 배치합니다. • 배경 칼라는 이벤트 특성을 고려 자유롭게 선택합니다. • 배경 칼라가 없을 때에는 테두리 라인 칼라 #D7D7D7, 라인굵기 1px을 반드시 적용합니다. <메인카피>는 고딕계열의 서체로 30~35pt를 권장 <서브카피>는 명조계열의 서체로 11~13pt를 권장하며,두 줄을 넘지 않도록 한다 이벤트를 상징적으로 드러내는 대표이미지 선택 540px 120px <버튼 영역>은 그림과 같이 우측 하단에 540 X 22px 만큼 공간을 비워둔다. 운영자가 관리 툴로 자동 생성 시킴 6

13. YES24 분야별 메인 배너 가이드 4. 이벤트 세상 썸 네일

14. 페이지 설명 • 제공되는 가이드는 이벤트 세상과 상품상세페이지에 • 노출되는 이벤트 세상 썸네일의 일관된 디자인 관리를 위해 • 제작되었습니다. • 이벤트 세상 내에 전시되는 썸네일은 • 상품 상세의 도서정보에도노출 됩니다. • 이벤트의 특성을 살릴 수 있는 이미지를 사용할 것을 • 권장하며, 크기는 반드시 138X85픽셀로 제작해야 합니다. • 썸네일 크기 : 138 X 85 이벤트 세상에 쓰이는 경우 상품 상세 화면에 쓰이는 경우 138px 85px 14

15. YES24 분야별 메인 배너 가이드 5. 쿠폰 배너

16. 페이지 설명 제공되는 가이드는 2008년 새롭게 개편된 예스24 분야별 메인 중 우측 영역의 쿠폰 배너에 대한 설명입니다. 배너 이미지 제작 시에는 반드시 제공되는 샘플을 다운받아 작업하시기 바랍니다. 중소 카테고리 우측 영역 <쿠폰 배너> 16

17. 배너 제작 설명 다운로드 받은 샘플의 구성 요소 중 가격, 할인율 내용( 아래 예제의 가격부분)만 변경하여 사용합니다. 구성요소(칼라, 배경이미지, 테두리 등)는 임의로 수정하거나 변형할 수 없으며, 사이즈 및 구성요소의 변형이 필요할 때는 예스24 디자인팀에 의뢰합니다. • 배너 크기: 171 X 90 (단위: pixels 이하px ) • Round 4px • 가격 및 할인율 : • 윤고딕 140, 18pt , 자평 95%, 자간 0pt, 칼라#3072ac Round 4px 171px 대표이미지 <가격 및 할인율 영역> 사용서체 : 윤고딕 140 크기 : 18pt 자평 : 95% 자간 : 0pt 칼라 :#3072ac 90px -> 배너제작은 반드시 제공되는 샘플 PDS를 다운받아 작업합니다 배너 샘플 다운 로드 >> 17

18. YES24 분야별 메인 배너 가이드 6. 하이라이트 배너

19. 페이지 설명 제공되는 가이드는 2008년 새롭게 개편된 예스24 분야별 메인 중 우측 영역의 하이라이트 배너에 대한 설명입니다. 하이라이트는 아래 그림과 같이 좌측과 우측이 다르게 디자인 되었으므로 반드시 좌측용과 우측용을 구분하여 사용해야 합니다. 배너 이미지 제작 시에는 반드시 제공되는 샘플을 다운받아 작업하시기 바랍니다. 좌측 영역 우측 영역 <좌측 하이라이트 배너> <우측 하이라이트 배너> 19

20. 배너 제작 설명-1 < 좌측 하이라이트 배너 > 아래 내용은 좌측 하이라이트 배너에 대한 설명입니다 하이라이트 배너는 스크립트로 구현되는 영역으로 (A)타이틀 영역 과 (B) 도서 정보영역으로 구분되며 두개의 이미지를 제작해야 합니다. 제작 시 반드시 아래 ‘샘플 파일’을 다운로드 받아 작업하며, 제작 기준을 준수해 주시기 바랍니다. (A)타이틀 영역 13px 98px (B)도서 정보 영역 145px • 배너 구성 요서 상세 설명 • 타이틀 영역 • - 크기 : 가로는145px 이내 (타이틀 명에 따라 변동가능) • 세로 13px 고정 • -서체 규정 :윤 고딕140 , 14pt, 자간-50, 자평 95%, 칼라 #3a85c7 • (B)도서 정보 영역 • - 크기: 가로 145 X 세로 98px • - 서체규정 • 도서명:윤 고딕120 , 12pt, 자간-100, 자평 95%, 칼라 #525252 • 정가, 포인트:윤 고딕120, 12pt, 자간-100, 자평 90%, 칼라 #737373 • 가격:산돌 Doll B, 16pt, 자간0, 자평 100%, 칼라 #da035f • 할인율: 산돌 Doll B, 16pt, 자간0, 자평 100%, 칼라 #ffffff -> 배너제작은 반드시 제공되는 샘플 PSD를 다운받아 작업합니다 배너 샘플 다운 로드 >> 20

21. 배너 제작 설명-1 < 우측 하이라이트 배너 > 아래 내용은 좌측 하이라이트 배너에 대한 설명입니다 하이라이트 배너는 스크립트로 구현되는 영역으로 (A)타이틀 영역 과 (B) 도서 정보영역으로 구분되며 두개의 이미지를 제작해야 합니다. 제작 시 반드시 아래 ‘샘플 파일’을 다운로드 받아 작업하며, 제작 기준을 준수해 주시기 바랍니다. (A)타이틀 영역 13px 98px (B)도서 정보 영역 145px • 배너 구성 요서 상세 설명 • 타이틀 영역 • - 크기 : 가로는145px 이내 (타이틀 명에 따라 변동가능) • 세로 13px 고정 • -서체 규정 :윤 고딕140 , 14pt, 자간-50, 자평 95%, 칼라 #3a85c7 • (B)도서 정보 영역 • - 크기: 가로 145 X 세로 98px • - 서체규정 • 도서명:윤 고딕120 , 12pt, 자간-100, 자평 95%, 칼라 #525252 • 정가, 포인트:윤 고딕120, 12pt, 자간-100, 자평 90%, 칼라 #737373 • 가격:산돌 Doll B, 16pt, 자간0, 자평 100%, 칼라 #da035f • 할인율: 산돌 Doll B, 16pt, 자간0, 자평 100%, 칼라 #ffffff -> 배너제작은 반드시 제공되는 샘플 PSD를 다운받아 작업합니다 배너 샘플 다운 로드 >> 21

22. YES24 분야별 메인 배너 가이드 7. 강조 배너( 대,소)

23. 페이지 설명 제공되는 가이드는 2008년 새롭게 개편된 예스24 분야별 메인 중 좌, 우측 영역의 강조 배너에 대한 설명입니다. 배너 이미지 제작 시에는 디자인팀에 요청해 주시기 바랍니다. 중소 카테고리 좌측 영역 <강조 배너 소> <강조 배너 대> 23

24. 배너 제작 설명 강조 배너는 그림과 같이 두 가지 크기로 제작 가능합니다. 칼라는 네 가지 종류로 제한 합니다. 배너는 왼쪽 카피영역과, 오른쪽 이미지 영역으로 구성됩니다. 구성요소(칼라, 배경이미지, 테두리 등)는 임의로 수정하거나 변형할 수 없습니다. 내부 마진은 꼭 유지합니다. • 배너 크기(대) : 171 X 90 (단위: pixels 이하px ) • 배너 크기(소) : 171 X 62 px Round 4px 171px 18px 62px A B C D 18px 90px < 배경 칼라 4종 > 배경칼라는 위에 제시하는 4가지로만 제한 합니다. 왼쪽 그림과 같이 메인 카피와 보조카피는 가독성을 고려해 배경색 보다 진하게 처리합니다. 14px 텍스트 영역 이미지영역 • 서체 규정 • 서브 카피 : 윤고딕 130, 14pt , 자평 90%이내, 자간 -50pt, 칼라# 3072ac • 메인 카피 : 윤고딕 140, 16pt , 자평 90%이내, 자간 -50pt • 칼라는 배경 칼라보다 진한 색으로 선택 • 서브 카피2 : 윤고딕 140, 12pt , 자평 90%이내, 자간 -50pt • 칼라는 배경 칼라보다 진한 색으로 선택. -> 배너제작은 반드시 제공되는 샘플 PDS를 다운받아 작업하며 디자인팀이나 관련담당자에게 의뢰하여 제작 합니다. 배너 샘플 다운 로드 >> 24