$$config title: 티파니앤코 리디자인 keywords: - 웹포폴 - 리디자인 $$ # <티파니앤코 리디자인>? # 창작 프로젝트 3: 티파니앤토 리디자인 ## 조사 ### 기존 사이트 -[티파니앤코](https://www.tiffany.kr/jewelry/shop/necklaces-pendants/) --- ### 참고 사이트 - [로이드](https://www.lloydgift.com/main) ->애니메이션 , 레이아웃 참고 - [스톤헨지](https://stonehenge.co.kr/index.html) ->fullpage, 레이아웃 스타일 참고 - [골든 듀](https://goldendew.com/brand/main.php) ->fullpage, 애니메이션 참고 ### 이용자 유형 - 손님 75% - 예비 가맹점주 3% - 투자자 22% ### 이용자 분석, 손님 - 연령: 20대 30% , 30대 45%, 기타 25% - 성비 : 남자 40% , 여성 60% - 목적 - 브랜드 제품 정보확인 - 쇼핑 - 신상품 확인 - 이벤트 정보 - 콜라보 정보 ### 이용자 분석, 투자자 - 제품력 비교 - 제품 이용고객 파악 - 제품 종류 - 투지가치 파악 # 기존 사이트 lA - **메인** - 구성 - 왼쪽 사이드 바 - 검색 - 매장 위치 - 티파니 고객 관리 - 로고 - 오른쪽 사이드 바 - 상담 예약하기 - 로그인 - 저장된 제품 보기 - 탑바 - 주얼리 - 커플 & 웨딩 링 - 파인워치 - 홈 & 액세서리 - 향수 - 남성용 - 기프트 - 메인컨텐트 - 로제와 티파니 하드웨어의 리믹스 - 이미지 사진 (버튼) - 참고: [맨위로 올라가는 버튼](https://codepen.io/young-yoi/live/YzrwgWm) - 메인컨텐츠 하단 - 제품 이미지 슬라이드 - 4개씩 보여지는 슬라이드 - 버튼 클릭시 4개 이미지 우로 이동(4개씩) - 서브컨텐츠 1 - 티파니 하드웨어 보기 (버튼) - 엘사 퍼레티 주얼리 : 화보이미지 & <자세히 보기 버튼> - 스털링 실버 : 화보이미지 & <자세히 보기 버튼> - 서브컨텐츠 2 - 카테보리 별로 보기 - 액세서리 종류별 이미지 버튼 - 서브컨텐츠 3 - 스토리 - '갤 가돗 그리고 보태니카: 2022 블루 북' -> **컬렉션 보기** - 티파니 노트와 아일린 구 (컬렉션) -> **자세히 보기** - 하단 컨텐츠 (티파니 앤코 메인 링과 다이아몬드에 대해 소개) - 화보이미지와 타이틀, 버튼으로 구성 - '나만의 방식으로 사랑하세요' : Love & Engagement 자세히보기 - '믿을 수 있는 소싱' : 다이아몬드 여정을 떠나보세요 - 하단 컨텐츠 2 - 티파니 경험 - 티파니 고객 서비스 - 상담 예약하기 - 아이코닉한 블루 박스 (기프트 소개) - 푸터 #푸터 이미지 ![푸터](https://ifh.cc/g/9bOX1w.png) # 기존 사이트 문제점 분석 - 탑바 구성이 너무 단조로움 - 브랜드 색깔이 나타나지 않음 - 폰트나 이미지 구성이 올드함 - 애니메이션 효과가 적어서 제품이 눈에 잘 안들어옴 ## 경쟁자 분석 - [로이드](https://www.lloydgift.com/main) - 브랜드 이미지에 맞는 컬러 구성과 깔끔함이 돋보임 - 여성스러움을 잘 보여주는 컬러 사용 - 슬라이드 구성이 심플하면서도 아름다움 - 심플하면서도 브랜드 메인제품들이 한눈에 잘들어옴 - [스톤헨지](https://stonehenge.co.kr/index.html) - 반응형 풀페이지로 제작 - 브랜드 메인컬러르 아주 잘활용하여 전체적인 레이아웃과 이미지를 잘구성시킴 - 여러컨텐츠를 한곳에 정리 (한눈에 들어옴) ---- - sns 종류별 홍보리스트 정리참고!) # 이미지 예시 ![이미지](https://ifh.cc/g/bKoq6L.jpg) - [골든 듀](https://goldendew.com/brand/main.php) - **탑바를 제외** 반응형으로 제작 - 동영상 활용 - pop하지만 이질감 없는 컬러로 화보나 제품이미지를 돋보이게 잘 구성함 참고!) # 기획 ### 사이트 중요 컨텐츠 (중요도 순) - **골든 듀**와 같이 레이아웃 구성 - 제품이미지를 돋보일수 있는 컬러와 폰트 활용 - ' 로제와 티파니 하드웨어의 리믹스 ' 를 메인컨텐츠로 활용 ### 사진 , 자료 구하기 - [이미지] - [인스타그램 참고](https://www.instagram.com/tiffanyandco/) - [핀터레스트 참고](https://www.pinterest.co.kr/tiffanyandco/_created/) - [동영상] - [유투브 참고 1 ](https://www.youtube.com/hashtag/%ED%8B%B0%ED%8C%8C%EB%8B%88%EC%95%A4%EC%BD%94) - [유투브 참고 2 ](https://www.youtube.com/c/TiffanyandCo) # 각 파트 세부 계획 --- **배경색** - 화이트 (#fff) **포인트 컬러** - #81d8d0(메인컬러) **폰트** - 미정 # 풀페이지 구성 **스톤핸지 참고** # 탑바 구성 [메뉴제작참고](https://codepen.io/yalru/pen/PoRbqew?editors=1100) ** 스톤핸지 참고** ->고정탑바(에스쁘아 참고) --- - 로고 --- - 검색 - 로그인 - 저장된 제품보기 버튼 --- - 하단메뉴 (*hover -> 나타나는 메뉴*) - 주얼리 - 커플 & 웨딩 링 - 파인워치 - 홈 & 액세서리 - 향수 - 남성용 - 기프트 --- 위에서 아래 순서로 기획 # 메인컨텐츠 - 이번시즌 컬렉션 소개 # 컨텐츠 1 - [티파니앤코 광고 영상](https://youtu.be/PV6-iSFCOSU) (골든 듀 참고) ---- ---- ### ***컨텐츠 2& 3 & 4 스톤핸지 참고** # 컨텐츠 2 - 티파니앤코 신상제품 소개 (스톤핸지 참고) # 컨텐츠 3 - 티파니앤코 스토리 - 갤 가돗 그리고 보태니카 : 2022 블루 북 (Gal Gadot and BOTAMINA : Blue Book 2022) -> 컬렉션 보기 - 티파니 노트와 아일린구 컬렉션 (Eileen Gu in Tiffany Knot) # 컨텐츠 4 - 브랜드 소개 # 컨텐츠 5 - 브랜드 다이아몬드 소개 - 브랜드 홈페이지 참고 - 믿을 수 있는 소싱 <다이아몬드 여정> **푸터** - [골든 듀](https://goldendew.com/brand/main.php) 참고 - 구성 - 티파니 고객 서비스 - 상담 예약하기 - 아이코닉한 블루 박스 (기프트 살펴보기) - 푸터 메뉴 - SNS 리스트 (인스타, 페이스북, 유투브, 카카오톡, 트위터, 핀터레스트) - 하단메뉴 - 주얼리 - 커플 & 웨딩 링 - 파인워치 - 홈 & 액세서리 - 향수 - 남성용 - 기프트 - 카피라이트 ``` © T&CO. 2022 ```