Shoppit Service Renewal Wireframe

Presentation on theme: "Shoppit Service Renewal Wireframe"— Presentation transcript:

1 Shoppit Service Renewal Wireframe
1 3 4 1. 메인 페이지 2 5 6 7 8 대분류 카테고리: WOMEN, MEN, HOT DEAL 중분류 카테고리: (여자) 인기상품,여성의류, 여성신발, 여성가방, 여성 액세서리, 브랜드, 스토어 (남성) 인기상품, 남성의류, 남성신발, 남성가방, 남성 액세서리, 브랜드, 스토어 메인 로고: 홈 기능 (제작되어 있음) 사용자 메뉴: 마이 페이지, 찜한상품, 견적서, 쪽지함, 관리자 (아이콘 /New 알림 아이콘 필요) 검색 기능: 클릭 시 검색 레이어 적용 공지사항: 운영자페이지에서 공지사항 작성 컬렉션 광고배너 MD추천 광고배너 소형 광고배너 컬랙션 광고배너 HOT DEAL 페이지 광고 풋터: 소셜 아이콘(인스타그램, 페이스북, 네이버 블로그), 서비스 소개, 이용약관, 개인정보 취급방침, CONTACT 메뉴와 사업자 정보 표시 14 9 10 11 15 16 17 12 [디자이너 확인 사항] (4) “찜한 상품”, “쪽지함”, “견적서”의 경우 “NEW”나 ‘숫자＇로 된 알림 아이콘이 필요합니다. (4) 셀러의 경우 셀러의 관리 페이지로 이동할 수 있는 아이콘이 필요합니다. (로그인 후 보이는 관리자페이지 아이콘) (3) 메인로고는 제작되어 있음. 18 19 13 Shoppit Service Renewal Wireframe 20

2 2. 메인 페이지_소분류 호버 11 1 2 소분류 카테고리: 여성의류(16개), 여성신발(10개), 여성가방(10개), 여성 액세서리(12개) 남성의류(14개), 남성신발(7개), 남성가방(8개), 남성 액세서리(9개) 카테고리 광고배너: 운영자 페이지에서 적용/수정 카테고리 영역 하단은 어둡게 처리(반투명) 카테고리 값 문서 참조 12 13 3 4 14 5 15 6 16 7 17 8 18 9 19 10 20

3 3. 검색 레이어 검색 아이콘 클릭 시 검색 레이어 생성
11 1 2 검색 아이콘 클릭 시 검색 레이어 생성 검색 대상 선정: WOMEN, MEN, HOT DEAL 범위 내에서 검색 검색어 입력: 검색 결과: 3 12 4 13 14 5 15 6 16 7 17 8 18 9 19 10 20

4 4. 상품 페이지1 11 1 카테고리 네비게이터: 설명 문구: 기능 없음 각 소분류 카테고리에 맞는 고정 문구 적용 상품 수: 해당 카테고리 또는 검색 결과에 해당하는 상품 수 보여주기 카테고리 필터: 브랜드 필터: 가격 필터: 검색 결과 또는 해당 카테고리에서 사용자가 검색 범위를 선택하여 상품을 선별 할 수 있음 스토어 필터: 세일 필터: 상품 정렬: 인기순, 최신순, 높은가격, 낮은가격 페이지 이동: 한 페이지에 60개 상품 정렬 2 12 3 9 10 4 13 14 5 15 16 6 7 17 [디자이너 확인 사항] Top 버튼이 명시되어 있지 않으며 해당 “상품 페이지“ 맨 하단에는 “최근 본 상품“ 영역이 있어야 합니다. (최근 본 상품 : 13page에 설명되어 있음) 18 8 19 20

5 5. 상품 페이지2 (확대) [디자이너 확인 사항] (5) 세일 값이 현재 빠져 있습니다.
11 1 7 상품 이미지: thumb nail 이미지를 사용 브랜드 정보 상품 정보 상품 기본 가격 상품 세일 가격 스토어 정보 찜하기 아이콘: 하트 아이콘을 선호 MD 추천 상품: 운영자 페이지에서 적용/수정 12 13 14 2 3 15 4 5 6 16 17 [디자이너 확인 사항] (5) 세일 값이 현재 빠져 있습니다. (6) 스토어 아이콘 및 스토어 명이 현재 적용되어 있지 않습니다. 전반적인 디자인 상에 어떻게 스토어 아이콘 및 스토어 명을 넣을지 고민해 주시기 바랍니다. 18 9 19 8 10 20

6 6. 상품 페이지3 전체 필터 해제: 사용자가 선택한 필터를 한번에 전부 해제할 수 있는 기능 11 2 12 1 3 13 4
14 5 15 6 16 7 17 8 18 9 19 10 20

7 7. 상품 상세페이지 상품 이미지 브랜드 정보 상품 정보 기존 가격 및 세일 가격 관부가세 정보(DDP)
1 2 3 상품 이미지 브랜드 정보 상품 정보 기존 가격 및 세일 가격 관부가세 정보(DDP) 사이즈 가이드: 클릭 시 사이즈표 모달 제공 사이즈 정보: 사이즈 선택 가능 사이즈 확인하기: 클릭 시 해당 스토어 페이지로 이동 색상 정보 견적 신청하기: 클릭 시 견적 신청서 모달 제공 구매하러 가기: 클릭 시 해당 스토어로 이동 (중간에 이동 페이지 존재) 상품 상세 설명 (기본값으로 열려 있음) 환불 정책 회원가입 및 구매방법: thumb nail이미지가 보여지며 클릭 시 큰 이미지를 제공함 공유기능: 페이스북만 제공 추천 상품: 4개 상품 이미지 노출 * 페이지 맨 하단 (풋터 영역 위)에 최근 본 상품 영역 적용 로그인 페이지(pg13) 참조 4 5 6 7 8 9 10 11 12 13 16 17 14 18 19 15 20

8 위 샘플 사이즈 가이드 이미지(위 이미지)는 변경이 가능하오니, 이와 무관하게 전반적인 디자인 작업을 진행해 주시면 합니다.
8. 사이즈 가이드 모달 11 3 사이즈 가이드 클릭 시 사이즈 가이드 모달 제공 닫기 아이콘 적용 뒷 배경은 어둡게 처리 사이즈 가이드는 이미지로 처리 12 1 2 13 4 14 5 15 6 16 7 17 [디자이너 확인 사항] 위 샘플 사이즈 가이드 이미지(위 이미지)는 변경이 가능하오니, 이와 무관하게 전반적인 디자인 작업을 진행해 주시면 합니다. 8 18 9 19 10 20

9 위 회원가입 및 구매방법 가이드 이미지는 수정이 불가 합니다. 따라서 디자인 시 참고하시기 바랍니다.
9. 회원가입 및 구매방법 모달 11 3 회원가입 및 구매 방법에 대한 상세 가이드 모달 제공 닫기 버튼 적용 뒷 배경은 어둡게 처리 회원가입 및 구매방법 가이드는 이미지로 처리 12 1 2 13 4 14 5 15 6 16 7 17 [디자이너 확인 사항] 위 회원가입 및 구매방법 가이드 이미지는 수정이 불가 합니다. 따라서 디자인 시 참고하시기 바랍니다. 8 18 9 19 10 20

10 “주소록” 정보 추가에 대하여 디자인 간에 참고하시기 바랍니다.
10. 구매대행 견적 신청하기 모달 상품 이미지 브랜드 정보 상품 정보 기존 가격 및 세일 가격 관부가세 정보 (DDP) 견적의뢰 시 필요한 사이즈 정보 (사용자 기입) 기입 시 사이즈 정보 확인을 위한 이동 URL (클릭 시 해당 스토어 새 탭으로 열기) 견적의뢰 시 필요한 색상 정보 (사용자 기입) 기입 시 색상 정보 확인을 위한 이동 URL (클릭 시 해당 스토어로 이동) 견적의뢰 시 필요한 수량 정보 (사용자 기입) 견적 신청 확인 버튼: 클릭 시 모달 닫기 신청하기 닫기 버튼 필요 위 항목 외에 이름/성 (영문), 배송지주소 (우편번호 포함), 개인통관번호도 추가되어야 함. 13 12 1 2 14 3 4 5 6 7 8 15 9 10 11 16 17 [디자이너 확인 사항] “주소록” 정보 추가에 대하여 디자인 간에 참고하시기 바랍니다. 18 19 20

11 11. 스토어 페이지 네비게이터 설명 문구: 기능 없으며 고정 값 (페이지 설명) 제공되는 스토어 수
스토어 thumb nail이미지 영문 스토어 이름 국문 스토어 이름 스토어 페이지는 페이지 넘기는 기능이 없으며 스크롤 다운 시 자동적으로 추가 스토어 목록 불러와 생성 2 12 3 13 4 14 5 6 15 16 17 8 18 9 19 7 10 20

12 브랜드 수가 많아 일단 전체 브랜드 숫자로 테스트를 해 보고 너무 느릴 경우 제한된 브랜드 수만 보여주도록 수정합니다.
12. 브랜드 페이지 11 “브랜드” 로 변경 브랜드 값 바로가기 메뉴 (알파벳 오더) 알파벳 메뉴 브랜드 값: 클릭 시 해당 상품 페이지1(pg4) 과 유사한 페이지 Top 버튼 필요 1 12 2 3 13 4 14 15 6 16 7 17 [개발자 확인 사항] 브랜드 수가 많아 일단 전체 브랜드 숫자로 테스트를 해 보고 너무 느릴 경우 제한된 브랜드 수만 보여주도록 수정합니다. 5 8 18 9 19 10 20

13 13. 로그인 페이지 기존 회원의 로그인 영역 이메일 주소 기입란 비밀번호 기입란 비밀번호 찾기 URL (pg26) 사용자 정보 저장 후 자동로그인 체크 박스 로그인 버튼 신규회원 회원가입 영역으로 성(국문) 기입란 이름(국문) 기입란 비밀번호 확인 기입란 이용약관 체크박스: 이용약관 동의서 클릭 시 이용약관 페이지로 이동 개인정보 및 쿠키정보 체크박스: 개인정보 동의서 클릭 시 개인정보 취급방침 페이지 이동 이메일 수신 동의 체크박스 회원가입 버튼 최근 본 상품 영역 상품 이미지 브랜드 정보 삭제 아이콘 페이지 넘김 기능으로 변경 : 상품은 최대 20개까지만 제공 1 2 7 8 3 9 4 5 10 11 12 13 14 6 15 16 20 17 19 [개발자 확인 사항] 하단에 위치하는 최근 본 상품의 경우 위에 제공된 페이지 넘김이 아닌 슬라이드 넘김으로 변경합니다. (좌우측에 화살표 아이콘 필요) 18

14 14. 서비스 소개 페이지 현재 보고 있는 페이지 값 서비스 소개: 클릭 시 서비스 소개 페이지 적용
11 1 현재 보고 있는 페이지 값 서비스 소개: 클릭 시 서비스 소개 페이지 적용 이용약관: 클릭 시 이용약관 페이지 적용 개인정보 취급방침: 클릭 시 개인정보 취급방침 페이지 적용 Contact: 클릭 시 Contact 페이지 적용 서비스 소개의 경우 이미지로 처리 12 2 6 3 4 5 13 14 15 16 7 17 8 18 9 19 10 20

15 15. 이용약관 페이지 현재 보고 있는 페이지 값 이용약관의 경우 텍스트로 처리 11 1 12 2 3 13 4 14 5 15
6 16 7 17 8 18 9 19 10 20

16 16. 개인정보 취급방침 페이지 현재 보고 있는 페이지 값
11 1 현재 보고 있는 페이지 값 개인정보 취급방침의 경우 텍스트로 처리 (쿠키정보 관련 방침 정리 후 적용) 12 2 3 13 4 14 5 15 6 16 7 17 8 18 9 19 10 20

17 17. Contact 페이지 현재 보고 있는 페이지 값 1:1 문의 영역 이름 기입란 연락처 기입란 이메일 기입란 제목 기입란
11 1 현재 보고 있는 페이지 값 1:1 문의 영역 이름 기입란 연락처 기입란 이메일 기입란 제목 기입란 내용 기입란 문의하기 버튼: 클릭 시 으로 이메일 발송 자주 묻는 질문 영역 질문 클릭 시 답변 확인이 가능하며 해당 FAQ는 운영자 페이지에서 적용/수정 가능 12 2 3 4 5 13 6 7 14 8 15 9 16 10 17 18 19 20

18 18. 마이 페이지 페이지 현재 보고있는 페이지 값 내 정보 영역 이름(국문) 성(국문) 이메일 주소 전화번호 생년월일 성별
비밀번호 수정하기: 클릭 시 수정 페이지 적용 주소록 영역 영문 성명과 주소 견적 완료 목록 영역 완료된 견적의 목록 및 정보 * 완료된 견적 목록은 “견적서“ 페이지에서 사용자가 접수된 견적 중 한 개를 선택하여 “확정”을 눌렀을 경우 마이 페이지 견적 완료 목록에 추가됨 1 2 3 4 5 6 7 8 9 10 11 12 16 13 17 14 15 18 19 20

19 19. 내 정보 수정 페이지 이름(국문) 기입란 * 성(국문) 기입란 * 이메일 주소 기입란 * 이메일 주소 재 기입란 *
전화번호 기입란 생년월일 기입란 성별 선택란 * 현재 비밀번호 기입란 새 비밀번호 기입란 새 비밀번호 재기입란 취소하기: 내 정보 저장: 1 13 2 3 4 14 5 6 7 15 8 9 16 10 11 12 17 18 19 20

20 20. 주소록 수정 페이지 이름(영문) 기입란 * 성(영문) 기입란 * 국가(국문) 기입란 * 주소(국문) 기입란 *
주소2(국문) 기입란 개인통관 고유번호기입란 동/읍/면/리 기입란 * 시/도 기입란 * 우편번호 기입란 * 전화번호 기입란 * 취소하기: 주소 저장하기: 13 1 14 2 3 15 4 5 16 6 7 8 17 9 10 18 11 12 19 20

21 21. 견적서 페이지 견적서 페이지 값 견적 일자: 견적 상품: 상품 이미지 상품 가격: 브랜드 정보 스토어 정보 사이즈 정보
색상 정보 수량 정보 견적 상황: 견적중, 견적(견적수), 마감(재견적), 견적 완료 견적 목록 클릭 시 세부 견적 내용 확인 가능 선택 값 구매대행자: 클릭 시 구매대행자 정보 모달로 제공 이메일 연락처 견적 가격 계좌 번호 견적 확정: 쪽지: 클릭 시 쪽지 모달 제공 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

22 22. 구매대행자 정보 모달 프로필 영역 프로필 이미지 구매대행자 이름 구매대행자 카페/블로그 정보 구매대행자 평가 평가하기:
구매대행자 정보 영역 이메일 정보 연락처 정보 사업자등록번호 대표자명 주소 계좌번호 닫기 아이콘 필요 공지/정책사항 14 1 2 3 4 5 6 7 8 9 10 11 12 16 13 15 17 18 19 20

23 23. 쪽지 쓰기 모달 쪽지쓰기 모달 영역 받는 사람 정보 글 쓰기 영역 보내기 버튼: 11 12 1 2 13 3 14 4 5
15 6 16 7 17 8 18 9 19 10 20

24 24. 찜한 상품 페이지 찜한 상품 영역 상품 이미지 브랜드 정보 상품 정보 스토어 정보 찜 했을 당시의 가격 변경된 가격
11 찜한 상품 영역 상품 이미지 브랜드 정보 상품 정보 스토어 정보 찜 했을 당시의 가격 변경된 가격 찜한 상품 목록에서 삭제 우측 상단 사용자 정보에서 알림을 알려줄 수 있는 “New” 아이콘 필요. 12 1 2 3 5 6 7 8 4 13 14 15 16 17 18 9 19 10 20

25 25. 쪽지함 페이지 11 쪽지 삭제: 복수의 쪽지를 선택 후 삭제 선택: 체크박스로 복수의 쪽지 선택 가능 보낸 사람 쪽지 내용 일자: 쪽지를 받은 일자 답장: 쪽지 목록에서 읽고 싶은 쪽지를 선택하면 쪽지 영역이 아래로 열리고 쪽지의 내용을 전부 확인할 수 있음 12 1 13 2 3 4 5 6 14 7 15 16 17 [디자이너 확인 사항] 쪽지함 디자인에 현재 “받은 쪽지함＂과 “보낸 쪽지함”이 없으며 이를 구별할 수 있는 탭이 필요합니다. (삭제 버튼 위쪽 예상) 8 18 9 19 10 20

26 26. 비밀번호 찾기 / 변경하기 페이지 회원가입 시 사용한 이메일 주소 기입란 취소하기: 확인: 새롭게 변경할 비밀번호 입력
11 회원가입 시 사용한 이메일 주소 기입란 취소하기: 확인: 새롭게 변경할 비밀번호 입력 새롭게 변경할 비밀번호 재입력 확인: 클릭 시 로그인 페이지로 이동 12 13 1 2 3 14 15 16 4 7 17 5 6 8 18 9 19 10 20

27 27. 핫딜 페이지 핫딜 네비게이터 페이지 타이틀: 텍스트 고정값 핫딜, 할인쿠폰 수 스토어 로고 핫딜, 프로모션 정보:
11 1 핫딜 네비게이터 페이지 타이틀: 텍스트 고정값 핫딜, 할인쿠폰 수 스토어 로고 핫딜, 프로모션 정보: 스토어 이름(영문) 할인 코드 값 할인 쿠폰의 종료일 할인 쿠폰이 아닌 프로모션으로 쿠폰 코드 값이 없을 경우 “프로모션＂이라 명시 페이지 기능: 한 페이지에 60개씩 제공 2 12 10 3 13 4 5 6 14 7 9 8 15 16 17 18 19 20

28 디자인 제작 요소 사이트의 기본 레이아웃/기능은 farfetch.com 참조 저작권 문제 없도록 아이콘 / 색상 / 폰트 제작
카테고리 목록은 카테고리 참고사항 페이지(pg29) 참조 10 Page 견적 신청하기 양식은 배송지주소 등 기타정보를 추가해서 견적서 스타일로 제작 로고는 현재 제작완료 반응형 사이트로 제작

29 카테고리 참고사항 WOMEN (대분류) 여성의류 (중분류) (총16개 소분류) 여성신발 (중분류) (총10개 소분류)
전체보기, 상의, 셔츠/블라우스, 후디/스웨트, 스웨터/니트, 재킷/코트, 원피스/드레스, 바지, 데님, 스커트, 반바지, 수영복, 언더웨어/양말, 액티브웨어, 임부복, 기타 여성신발 (중분류) (총10개 소분류) 전체보기, 힐/펌프스, 부츠, 웨지, 뮬/클로그, 샌들, 스니커즈, 레이스업/옥스포드, 기타 여성가방 (중분류) (총10개 소분류) 전체보기, 샤첼, 숄더, 토트, 백팩, 클러치, 크로스바디, 트래블, 지갑, 기타 여성 액세서리 (중분류) (총12개 소분류) 벨트, 시계, 팔찌, 반지, 브로치, 귀걸이, 목걸이, 모자/장갑, 스카프, 안경/선글라스, 기타 MEN (대분류) 남성의류 (중분류) (총14개 소분류) 전체보기, 상의, 셔츠, 후디/스웨트, 스웨터/니트, 수트/블레이저, 재킷/코트, 바지, 데님, 반바지, 수영복, 언더웨어/양말, 액티브웨어, 기타 남성신발 (중분류) (총7개 소분류) 전체보기, 로퍼, 부츠, 샌들, 스니커즈, 레이스업/옥스포드, 기타 남성가방 (중분류) (총8개 소분류) 전체보기, 메신저, 브리프케이스, 토트, 백팩, 트래블, 지갑, 기타 남성 액세서리 (중분류) (총9개 소분류) 전체보기, 벨트, 시계, 넥타이, 주얼리, 모자/장갑, 스카프, 안경/선글라스, 기타