예스 24 ㈜ 디자인 가이드

분야별 메인 배너 가이드

제작 : 예스 24 ㈜ 디자인팀 2008 년 6 월

목차

목차

1 개요

2. 출판사 배너 ( 분야 메인 사이드 배너 )

3. 분야 메인 센터 배너

4. 이벤트 세상 썸 네일

5. 쿠폰 배너

6. 하이라이트 배너

7. 강조 배너

2

3page

4page 9page

13page

15page

18page

22page

1. 개요

2010 년 업데이트된 이 가이드는 예스 24 분야별 메인의 일관된 디자인 관리를 위하여 마련하였습니다 .

가이드에 준하여 제작되어지는 결과물들은 사용자들에게 예스 24 의 일관된 Look & Feel 을 전달하게 됩니다 .

가이드는 함께 제공되는 샘플 파일 (PSD 파일로 다운 로드 가능 ) 과 함께 디자인 작업을 편리하게 돕게 됩니다 .

제작물은 반드시 가이드에 준하여 작업해야 하며 ,샘플이 제공되는 항목은 반드시 샘플을 다운받아 작업합니다 .

3

YES24 분야별 메인 배너 가이드

2. 출판사 배너

페이지 설명

제공되는 가이드는 2008 년 새롭게 개편된 예스 24 분야별 메인의 출판사 배너에 대한 설명으로사이트의 일관된 디자인 관리를 위해 제작되었습니다 .

출판사 배너의 특성상 노출의 편리함을 돕기 위해아래 그림과 같이 좌측과 우측이 동일하게 디자인 되었으며 좌 , 우측 구분 없이 사용 가능합니다 .

배너 이미지 제작 시에는 반드시 제공되는 샘플을 다운받아 작업하시기 바랍니다 .

우측 영역

5

좌측 영역

배너 제작 설명 -1

6

출판사 배너는 그림과 같은 순서로 반복 전시할 것을 권장합니다 .

많은 숫자의 배너 노출 시 시각적인 구분을 위하여 A 타입 ( 배경이 없음 ) 과 B 타입 ( 배경이 있는 강조 형 ) 으로 디자인 하였습니다 .칼라 별로 A 타입 4 종과 B 타입 4 종이 제공됩니다 .

A 타입 ( 배경 없음 )

B 타입 ( 배경 있는 강조 형 )

145px

• 배너 크기 : 가로 163 X 세로 44 ( 단위 pixels, 이하px )

• 배너 구성 : 이미지와 카피는 < 그림 1> 과 같이 이미지 ‘왼쪽’ , 카피 ‘오른쪽’ 의 좌우 조합만 허용합니다 .카피는 메인 카피 한 줄 , 서브 카피 한 줄로 구성되며 ,이미지와 카피는 겹치지 않도록 합니다 .

• 이미지지 영역 및 텍스트 영역은 이동 시킬 수 없습니다 .

163px

44px

< 그림 1>

44px

이미지영역 텍스트 영역

163px

44px

이미지영역(44 X

41px)

배너 서체 정의 , 칼라

메인 카피서체 : 윤고딕 130크기 : 14px자평 : 90%( 글자수에 따라 75~90% 조정가능 )자간 : -100 이내칼라 A : #188a76

서브 카피서체 : 윤고딕 130크기 : 12px자평 : 80%( 글자수에 따라 75~90% 조정가능 )자간 : -100칼라 : #3c3c3c

칼라 B : #462bac

칼라 C : #a229ad

칼라 D : #da035f

• 카피 영역- 아래 그림과 같이 메인 카피와 보조 카피로 구성됩니다 .- 메인 카피는 아래 그림과 같이 네 가지 칼라가 제공 되고 선택 적용 가능 합니다 .- 서체 , 칼라 , 위치 등 어떠한 요소도 변형 할 수 없습니다 .제작은 반드시 제공되는 샘플 파일을 다운 받아 작업합니다 .- 아래 지정한 윤 고딕 서체가 없을 때는 유사 고딕서체로 작업합니다 .

7

< A 타입 : 배경 없는 출판사 배너 >

• 이미지 영역- 크기 : 가로는 41 X 세로 44px (Round 4px)

배너 샘플 4종 다운 로드 >>

-> 배너제작은 반드시 제공되는 샘플 PDS 를 다운받아 작업합니다

163px

44px

이미지영역(44 X

41px)

배너 서체 정의 , 칼라

메인 카피서체 : 윤고딕 130크기 : 14px자평 : 90%( 글자수에 따라 75~90% 조정가능 )자간 : -100 이내칼라 A : #540a5b

서브 카피서체 : 윤고딕 130크기 : 12px자평 : 80%( 글자수에 따라 75~90% 조정가능 )자간 : -100칼라 : #1c1c1c

칼라 B : #16234b

칼라 C : #154840

칼라 D : #7c1240

배경칼라 #e0b8e4

8

< B 타입 : 배경 있는 강조 배너 >

• 이미지 영역- 크기 : 가로는 41 X 세로 44px (Round 4px)

• 카피 영역- 아래 그림과 같이 메인 카피와 보조 카피로 구성됩니다 .- 메인 카피는 아래 그림과 같이 네 가지 칼라가 제공 되고 선택 적용 가능 합니다 .- 서체 , 칼라 , 위치 등 어떠한 요소도 변형 할 수 없습니다 .제작은 반드시 제공되는 샘플 파일을 다운 받아 작업합니다 .- 아래 지정한 윤 고딕 서체가 없을 때는 유사 고딕서체로 작업합니다 .

#c0c9e7

#b1d7d1

#f4b8d2

배너 샘플 4종 다운 로드 >>

-> 배너제작은 반드시 제공되는 샘플 PDS 를 다운받아 작업합니다

3. 분야 메인 센터 배너

YES24 분야별 메인 배너 가이드

3. 분야 메인 센터 배너

2-1 . 페이지 설명

분야 메인 은 아래 그림과 같이 구성 되며 ,다음은 분야 메인 센터 배너에 해당하는 설명입니다 .

이벤트의 특성이 드러나도록 자유롭게 디자인되는 센터 배너는 최대 20 개까지 노출 가능하며 , < 그림 1> 과 같이 배너 우측 하단의 버튼을 통해 사용자가 원하는 배너로 편리하게 접근이 가능 합니다 .

이 우측 하단 버튼은 자동으로 생성 되며 , 배너 이미지 제작 시에는 버튼 영역을 비워놓고 작업합니다 .

센터 배너 영역

4

< 그림 1> 버튼은 자동으로 생성 되며 베너 제작 시에는버튼 공간을 비워 놓고 작업합니다배너는 최대 20 개까지 노출됩니다

Box Round 는 자동 생성됩니다

3. 분야 메인 센터 배너

2-2. 크기 및 필수 구성요소

• 배너 크기 : 540 X 120 ( 단위 : pixels 이하 px )

• 필수 구성 요소 : 메인 카피 , 서브 카피 , 대표 이미지

• 버튼 영역 : 우측하단 540 X 22px

버튼은 사용자가 센터 배너를 자유롭게 볼 수 있도록 돕는 기능으로 자동으로 생성됩니다 .

( 최대 20 개 생성가능 ) 따라서 , 하단의 버튼 영역은 540 X 22 px 만큼

비워놓고 작업합니다 .

5

120px

헤드라인 카피

서브 카피

540px

버튼영역

540px

22px

대표이미지

3. 분야 메인 센터 배너

2-3. 권장 제작 가이드

센터 배너는 자유 구성을 기본으로 하지만 , 제작의편리함을 돕기 위해 아래와 같이 권장 가이드를 제안합니다 .

• 필수 구성 요소 : 메인 카피 , 서브 카피 , 대표 이미지

1. 메인 카피 : 고딕계열의 크기 30~35pt 서체 권장 2. 서브 카피 : 명조계열의 크기 11~13pt 서체 권장 메인 카피 한줄 , 서브 카피는 2 줄을 넘지 않도록 합니다 .

3. 대표 이미지 : 이벤트를 상징적으로 표현하는 대표이미지를 엄선하며 , 이미지와 택스트는 겹치지 않도록 배치합니다 .

• 배경 칼라는 이벤트 특성을 고려 자유롭게 선택합니다 . 배경 칼라가 없을 때에는 테두리 라인 칼라 #D7D7D7,

라인굵기 1px 을 반드시 적용합니다 .

< 버튼 영역 > 은 그림과 같이 우측 하단에540 X 22px 만큼 공간을 비워둔다 .운영자가 관리 툴로 자동 생성 시킴

120px

540px

< 메인카피 > 는 고딕계열의 서체로 30~35pt 를 권장

< 서브카피 > 는 명조계열의 서체로 11~13pt 를 권장하며 , 두 줄을 넘지 않도록 한다

이벤트를 상징적으로 드러내는 대표이미지 선택

6

4. 이벤트 세상 썸 네일

YES24 분야별 메인 배너 가이드

페이지 설명

제공되는 가이드는 이벤트 세상과 상품상세페이지에 노출되는 이벤트 세상 썸네일의 일관된 디자인 관리를 위해 제작되었습니다 .

이벤트 세상 내에 전시되는 썸네일은 상품 상세의 도서정보에도노출 됩니다 .

이벤트의 특성을 살릴 수 있는 이미지를 사용할 것을 권장하며 , 크기는 반드시 138X85 픽셀로 제작해야 합니다 .

• 썸네일 크기 : 138 X 85

상품 상세 화면에 쓰이는 경우

14

이벤트 세상에 쓰이는 경우

85px

138px

5. 쿠폰 배너

YES24 분야별 메인 배너 가이드

페이지 설명

제공되는 가이드는 2008 년 새롭게 개편된 예스 24 분야별 메인 중 우측 영역의 쿠폰 배너에 대한 설명입니다 .

배너 이미지 제작 시에는 반드시 제공되는 샘플을 다운받아 작업하시기 바랍니다 .

16

< 쿠폰 배너>

중소 카테고리 우측 영역

배너 샘플 다운 로드 >>

배너 제작 설명

• 배너 크기 : 171 X 90 ( 단위 : pixels 이하 px ) Round 4px

17

90px

171pxRound 4px

대표이미지

다운로드 받은 샘플의 구성 요소 중가격 , 할인율 내용 ( 아래 예제의 가격부분 ) 만 변경하여 사용합니다 .

구성요소 ( 칼라 , 배경이미지 , 테두리 등 ) 는 임의로수정하거나 변형할 수 없으며 , 사이즈 및 구성요소의 변형이 필요할 때는 예스 24 디자인팀에 의뢰합니다 .

< 가격 및 할인율 영역 >사용서체 : 윤고딕 140 크기 : 18pt 자평 : 95%자간 : 0pt칼라 :#3072ac

• 가격 및 할인율 :윤고딕 140, 18pt , 자평 95%, 자간 0pt, 칼라 #3072

ac

-> 배너제작은 반드시 제공되는 샘플 PDS 를 다운받아 작업합니다

6. 하이라이트 배너

YES24 분야별 메인 배너 가이드

페이지 설명

제공되는 가이드는 2008 년 새롭게 개편된 예스 24 분야별 메인 중 우측 영역의 하이라이트 배너에 대한 설명입니다 .

하이라이트는 아래 그림과 같이 좌측과 우측이 다르게 디자인 되었으므로반드시 좌측용과 우측용을 구분하여 사용해야 합니다 .

배너 이미지 제작 시에는 반드시 제공되는 샘플을 다운받아 작업하시기 바랍니다 .

우측 영역

19

< 우측 하이라이트 배너 >

좌측 영역

< 좌측 하이라이트 배너 >

배너 샘플 다운 로드 >>

배너 제작 설명 -1

20

-> 배너제작은 반드시 제공되는 샘플 PSD 를 다운받아 작업합니다

아래 내용은 좌측 하이라이트 배너에 대한 설명입니다하이라이트 배너는 스크립트로 구현되는 영역으로(A) 타이틀 영역 과 (B) 도서 정보영역으로 구분되며두개의 이미지를 제작해야 합니다 .제작 시 반드시 아래 ‘샘플 파일’을 다운로드 받아 작업하며 , 제작 기준을 준수해 주시기 바랍니다 .

< 좌측 하이라이트 배너 >

• 배너 구성 요서 상세 설명

(A) 타이틀 영역- 크기 : 가로는 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

98px

(A) 타이틀 영역

(B) 도서 정보 영역

145px

13px

배너 샘플 다운 로드 >>

배너 제작 설명 -1

21

-> 배너제작은 반드시 제공되는 샘플 PSD 를 다운받아 작업합니다

아래 내용은 좌측 하이라이트 배너에 대한 설명입니다하이라이트 배너는 스크립트로 구현되는 영역으로(A) 타이틀 영역 과 (B) 도서 정보영역으로 구분되며두개의 이미지를 제작해야 합니다 .제작 시 반드시 아래 ‘샘플 파일’을 다운로드 받아 작업하며 , 제작 기준을 준수해 주시기 바랍니다 .

< 우측 하이라이트 배너 >

• 배너 구성 요서 상세 설명

(A) 타이틀 영역- 크기 : 가로는 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

98px

(A) 타이틀 영역

(B) 도서 정보 영역

145px

13px

7. 강조 배너 ( 대 , 소 )

YES24 분야별 메인 배너 가이드

페이지 설명

제공되는 가이드는 2008 년 새롭게 개편된 예스 24 분야별 메인 중 좌 , 우측 영역의 강조 배너에 대한 설명입니다 .

배너 이미지 제작 시에는 디자인팀에 요청해 주시기 바랍니다 .

23

< 강조 배너 소 >

중소 카테고리 좌측 영역

< 강조 배너 대 >

이미지영역텍스트 영역

배너 샘플 다운 로드 >>

배너 제작 설명

• 배너 크기 ( 대 ) : 171 X 90 ( 단위 : pixels 이하 px )

24

62px

171pxRound 4px

강조 배너는 그림과 같이 두 가지 크기로 제작 가능합니다 .칼라는 네 가지 종류로 제한 합니다 .

배너는 왼쪽 카피영역과 , 오른쪽 이미지 영역으로 구성됩니다 .구성요소 ( 칼라 , 배경이미지 , 테두리 등 ) 는 임의로수정하거나 변형할 수 없습니다 .내부 마진은 꼭 유지합니다 .

• 서체 규정 서브 카피 : 윤고딕 130, 14pt , 자평 90% 이내 , 자간 -50pt, 칼라 # 3072a

c 메인 카피 : 윤고딕 140, 16pt , 자평 90% 이내 , 자간 -50pt 칼라는 배경 칼라보다 진한 색으로 선택 서브 카피 2 : 윤고딕 140, 12pt , 자평 90% 이내 , 자간 -50pt 칼라는 배경 칼라보다 진한 색으로 선택 .

-> 배너제작은 반드시 제공되는 샘플 PDS 를 다운받아 작업하며디자인팀이나 관련담당자에게 의뢰하여 제작 합니다 .

90px

• 배너 크기 ( 소 ) : 171 X 62 px

< 배경 칼라 4 종 >배경칼라는 위에 제시하는 4 가지로만 제한 합니다 .왼쪽 그림과 같이 메인 카피와 보조카피는 가독성을 고려해 배경색 보다 진하게 처리합니다 .

18px

18px

14px

A B C D