상품설명 페이지 디자인.

Presentation on theme: "상품설명 페이지 디자인."— Presentation transcript:

1 상품설명 페이지 디자인

2 상품설명페이지 제작과정 Step1 : 컨셉정하기 Step2 : 포토샵을 활용하여 페이지 작성하기 Step3 : 저장하기
제품의 특성 파악하기 ≫ 컨셉정하기 ≫ 상품사진 선별하기 Step2 : 포토샵을 활용하여 페이지 작성하기 상품사진 배치하기 ≫ 상품설명 작성하기 ≫ 기타 디자인 요소 제작하기 Step3 : 저장하기 원본파일 저장하기 ≫ 최종파일로 저장하기

3 페이지 작성방법 방법 2: 전체 페이지를 만든 후 분할(Slice)하는 방법 방법 1: 세분화된 페이지를 각각 만드는 방법
레이어가 적어 포토샵 작업이 편리하나 파일 개수가 많아 파일관리가 어렵고 전체적인 화면 구성을 확인하기 어렵다 방법 2: 전체 페이지를 만든 후 분할(Slice)하는 방법 전체적인 화면구성을 쉽게 확인가능하고 파일관리도 용이하나 원본파일에 레이어가 많아 포토샵 작업이 어렵다 Page01.psd Page02.psd Page03.psd Page04.psd Page01.jpg Page02.jpg Page03.jpg Page04.jpg 원본파일 (psd) 최종파일 (jpg) Page01.psd 원본파일 (psd) Page01.jpg Page02.jpg Page03.jpg Page04.jpg 최종파일 (jpg)

4 상품 페이지 기획 컨셉을 만드는 방법 상품중심 구매층 중심 브랜드 중심 1. 카테고리분류
2. 제품의 특성을 살려주는 도움 컬러 선정 3. 제품 중심의 사진배치 4. 제품기능 중심의 내용 작성 및 배치 1. 구매층 분석 2. 고객요구 분석 3. 선호하는 색상분석 1. 브랜드 특성 분석 2. 대표색상 적용 3. 브랜드 심볼 적용

5 레이아웃(Layout) 레이아웃의 요소 좋은 레이아웃의 조건 이미지 : 모델사진, 상품사진, 심볼, 아이콘, 일러스트 등
여백 : 모든 요소들을 배열 한 후 남아있는 공간 글꼴 : 글자의 모양(서체) 좋은 레이아웃의 조건 명료성 : 보는 이로 하여금 상품의 정보를 정확히 알 수 있도록 한다, 집중도 : 흥미 유발 등을 통해 상품에 집중시킬 수 있어야 한다. 가독성 : 시선의 흐름을 원활하게 하고 상품의 정보는 한 눈에 읽을 수 있도록 한다. 심미성 : 보기 좋지만 눈에 피로를 주지 않는 색상과 배치를 적용하도록 한다.

6 레이아웃의 종류 왼쪽정렬 중앙정렬 오른쪽 정령 사람의 시선에 가장 가까운 정렬 방식으로 가독성이 높다
상품의 기능설명, 사용설명서, 구성품 등에 많이 사용 중앙정렬 시선을 집중시키기 좋은 레이아웃으로 구매자들이 기억해야 할 내용을 중심으로 각 요소들을 배치하는 것이 좋다 상품명이나 제품의 색상정보를 대표이미지와 함께 배치한다. 오른쪽 정령 중요한 내용을 강조하면서 미적요소를 더하기 좋은 레이아웃 이벤트 페이지나 상품의 부연 설명 등 이미지와 함께 글자를 넣을 때 주로 사용

7 레이아웃의 종류 대칭정렬 수평정렬 수직정렬 바둑판 왼쪽과 오른쪽을 지그재그로 혼합하여 사용하는 레이아웃
산만해 질 수 있으나 변화를 주어 시선을 끌기 좋다. 수평정렬 비슷한 중요도나 칸셉을 지닌 요소들을 가로로 나열하는 레이아웃 수직정렬 수평정렬과 혼항하여 많이 사용하는 레이아웃 주로 하나의 특성을 중심으로 여러 개의 상품을 배치할 때 사용 바둑판 바둑판 모양으로 칸을 만들어 해당영역에 이미지를 배치하는 레이아웃

8 레이아웃의 종류