쇼핑몰 디자인 무작정 따라하기
도서명:쇼핑몰 디자인 무작정 따라하기
저자/출판사:신승희/길벗
쪽수:504쪽
출판일:2018-10-12
ISBN:9791160505863
목차
PART 1 매출을 올리는 쇼핑몰 디자인 전략
01 보물 같은 아이디어 - 메타포 찾기
1 괜찮은 아이디어를 흥미진진하게 만드는 기술
2 어떤 메시지를 전달할 것인가
3 아이디어 찾기
4 8단계 디자인 메서드
02 나만의 컬러 찾기
1 메인 컬러와 포인트 컬러 선정
2 사진에서 색 추출하기
3 컬러리스트가 추천하는 배색 살펴보기
4 나에게 꼭 맞는 배색 선택법
03 비주얼 스토리텔링의 힘
1 흥미로운 이야기의 조건과 디자인
2 스토리텔링 마케팅
04 시선을 사로잡는 레이아웃
1 레이아웃과 그리드 시스템
2 전체 레이아웃과 모듈 레이아웃
3 콘텐츠에 계급 매기기
05 디자인 트렌드를 통한 차별화
1 디자인 차별화 방법
2 디자인을 보정하는 방법
06 그래서 하고 싶은 말은 무엇인가? - 설문조사
07 쇼핑몰 콘텐츠는 무조건 읽기 쉽게
PART 2 쇼핑몰 운영에 꼭 필요한 포토샵 핵심 기능
01 상품을 돋보이는 촬영 기술
1 포토그래퍼처럼 스튜디오를 꾸미는 노하우
2 상품을 돋보이게 하는 빛과 배경
3 상품 사진 촬영을 위해 알아두어야 할 여덟 가지
4 좋은 상품 사진을 얻기 위한 노하우
5 상품을 배경과 분리하기(누끼따기) 위한 사진 촬영 방법
02 쇼핑몰 디자인을 위한 포토샵 핵심 기능
1 배경을 밝고 하얗게 만들기 - Select
2 배경과 분리하고 배경색 바꾸기 - 마술봉 도구
3 머리카락을 자연스럽게 배경과 분리하기 - Global Refinements
4 불필요한 부분 자르기 - Crop
5 웹용으로 사진 크기 줄이기 - Image Size
6 날씬한 모델 만들기 - Liquify
7 깨끗한 피부 표현을 위한 잡티 지우기 - Spot Healing Brush
8 배경 늘리기 - Content-Aware Scale
9 불필요한 부분 지우고 자동으로 채우기 - Content-Aware
10 밝고 화사한 이미지 만들기 - Levels
11 어두운 사진 노출 조절하기 - Shadow/Highlights
12 특정 부분의 색상 바꾸기 - Replace Color
03 상세 정보 표시를 위한 타이포그래피 기능
1 글꼴 설치와 입력하기
2 단락을 나누고, 행간과 자간, 장평 조절하기
3 제목 만들기
4 소제목 만들기
5 대제목 강조하기
6 색상 적용하여 강조하기
04 인쇄용 파일 제작을 위한 포토샵 기본 설정
PART 3 쇼핑몰의 기본 요소 디자인
01 모던한 느낌으로 패션 의류 쇼핑몰 로고 디자인하기
02 아기자기한 느낌으로 쇼핑몰 로고 디자인하기
03 빈티지 느낌의 라벨 디자인하기
1 라벨 레이아웃 디자인하기
2 라벨 정보 입력하기
04 브랜드 홍보를 위한 택배 상자 라벨 디자인하기
1 택배 상자 라벨 앞면 디자인하기
2 택배 상자 라벨 옆면 디자인하기
05 고객 만족을 위한 교환/반품 안내 디자인하기
1 교환/반품 안내 페이지 상단 디자인하기
2 교환/반품 안내 페이지 상세 정보 디자인하기
06 쇼핑몰을 소개하는 메인 슬라이드 디자인하기
1 슬라이드 배경 디자인하기
2 슬라이드에 문자 디자인 추가하기
07 혜택을 한눈에 보여주는 멀티 팝업 창 디자인하기
1 첫 번째 페이지 만들기
2 두 번째 페이지 만들기
08 팝업으로 보여지는 공지사항 디자인하기
1 전통적인 배경 디자인하기
2 공지사항 입력하고 달력 만들기
09 상단 풀 배너 광고 디자인하기
1 도트 형식의 풀 배너 디자인하기
2 배너에 광고 정보 추가하기
10 고객 참여를 유도하는 이벤트 페이지 디자인하기
1 참여하는 것 같은 화면으로 디자인하기
2 이벤트 정보 디자인하기
11 고급스러운 쿠폰 디자인하기
1 쿠폰 모양 디자인하기
2 감각적인 타이포그래피 디자인하기
12 인포그래픽 형식으로 회원 등급별 혜택 안내 디자인하기
1 인포그래픽 형식의 등급 데이터 제작하기
2 등급별 혜택 정보 디자인하기
13 베스트셀러 뱃지 아이콘 디자인하기
1 계급장 스타일의 뱃지 아이콘 만들기
2 베스트셀러 모양 디자인하기
PART 4 지갑을 여는 상세페이지와 바이럴 마케팅 디자인
01 GIF 동영상으로 상품 목록 이미지 만들기
1 상품 목록 페이지 디자인하기
2 GIF 동영상 만들기
02 공감대를 형성하는 인트로 디자인하기
1 인트로 타이포그래피 디자인하기
2 일러스트레이션 추가하기
03 호소력 있는 스토리텔링 디자인하기
1 스토리를 강조하는 배경 디자인하기
2 스토리텔링 추가하기
04 한 마디로 설명하는 헤드 카피 디자인하기
1 배경과 설명글 디자인하기
2 상품 정보 추가하기
05 상품의 이념을 담아 헤드 카피 디자인하기
1 호감이 가는 헤드 카피 디자인하기
2 이미지 합성하기
06 사실적인 상품 설명 디자인하기
1 시선을 끄는 상세페이지 상단 디자인하기
2 상품 정보 디자인하기
3 상품 상세 사진 감각있게 디자인하기
07 꼼꼼한 설명의 상품 소개 디자인하기
1 상품 소개 페이지 디자인하기
2 정보가 잘 보이는 상품 설명 디자인하기
08 경쟁 상품과의 차별점 부각시키기
1 상품을 돋보이게 보정하기
2 차별화된 상품 정보 추가하기
09 같은 듯 다른 5가지 선택 옵션 디자인하기
1 첫 번째 상품 목록 디자인하기
2 두 번째 상품 목록 디자인하기
3 세 번째 상품 목록 디자인하기
4 네 번째 상품 목록 디자인하기
5 자세히 보기 디자인하기
10 생생한 고객 후기 디자인하기
1 심플한 배경 디자인하기
2 후기 디자인하기
11 상품을 보증하는 추천글 디자인하기
1 배경 디자인하기
2 추천글 디자인하기
12 상품 활용 제****디자인하기
1 기본 배경 디자인하기
2 활용 제****디자인하기
13 친절한 쇼핑 가이드 디자인하기
1 상품 관련 가이드 디자인하기
2 배송 관련 가이드 디자인하기
14 상품 정보 제공 고시 디자인하기
1 상품 상세 사이즈 디자인하기
2 사이즈 표 디자인하기
3 세탁 방법 디자인하기
4 상품 정보 디자인하기
PART 5 쇼핑몰 디자인 세팅과 홈페이지형 블로그 제작
01 쇼핑몰 솔루션 기본 세팅하기 1 - 카페24
1 무료 디자인 스킨 세팅하기
2 로고 세팅하기
3 뱃지 디자인 세팅하기
4 버튼 세팅하기
5 팝업 이미지 세팅하기
6 메인 슬라이드 세팅하기
7 배너 세팅하기
8 상품 상세페이지의 이벤트 세팅하기
02 쇼핑몰 솔루션 기본 세팅하기 2 - 고도몰
1 무료 디자인 스킨 세팅하기
2 로고 세팅하기
3 뱃지 세팅하기
4 버튼 세팅하기
5 단일 팝업 세팅하기
6 멀티 팝업 세팅하기
7 메인 슬라이드 세팅하기
8 배너 세팅하기
9 따라다니는 배너 세팅하기
03 쇼핑몰 솔루션 기본 세팅하기 3 - 네이버 스마트스토어
1 테마 세팅하기
2 로고 세팅하기
3 상점 컬러 변경하기
4 팝업 이벤트 세팅하기
5 메인 슬라이드 세팅하기
6 배너 세팅하기
7 상품 상세페이지에 공지사항 세팅하기
04 상세페이지 디자인을 쇼핑몰에서 사용하기
1 웹용 이미지 포맷 알아보기
2 상세페이지 디자인을 하나의 파일로 저장하기
3 상세페이지 이미지를 여러 파일로 저장하기
4 카페24에서 상품 상세페이지 이미지 세팅하기
5 고도몰에서 상품 상세페이지 세팅하기
6 스마트스토어에서 상품 상세페이지 세팅하기
05 홈페이지형 블로그 디자인하기
1 홈페이지형 블로그 스킨 디자인하기
2 블로그 스킨 세부 디자인하기
3 이미지 파일 저장하기
4 네이버 블로그의 기본 세팅 변경하기
5 투명 위젯으로 홈페이지형 블로그 세팅하기
[부록] 쇼핑몰 운영에 꼭 필요한 HTML5 + CSS3 코딩의 기본 알아보기
쇼핑몰 디자인 수정 문제 해결하기
01 쇼핑몰 디자인 수정하기
02 실수로 날린 파일 해결하기
03 깨지는 한글 해결하기
쇼핑몰 디자인에 필요한 기본 코딩 알아보기
01 Alt와 Title 속성으로 상품 정보 최적화하기
02 마우스 오버하면 흑백으로 바뀌는 상품 이미지 만들기
03 마우스 오버하면 반투명해지는 상품 이미지 만들기
04 마우스 오버하면 설명이 나타나는 상품 이미지 만들기
05 화면 크기에 딱 맞춘(Hero) 이미지 만들기
06 상품명을 돋보이게 굵게, 밑줄, 색상으로 강조하기
07 판매가에 취소선 표시하기
08 상품 리스트 이미지에 센스 있는 테두리 만들기
09 상품 리스트 이미지가 돋보이는 그림자 추가하기
10 상품 리스트에서 아이콘과 상품명 간격 조정하기
11 상품명 높이 맞추기
12 모바일 쇼핑몰에서 상세 화면 확대하기
