DIOR 홈페이지 제작방식을 알아보자!

 

DIOR 웹 제작방식을 알아보자!

 

 

[intro]

프랑스의 하이엔드 명품 프랜드 디올!

전 세계적으로 대중들에게 사랑받고있는 디올은

어떤식으로 홈페이지가 제작되었는지 살펴볼까요?

 

 

---

 

 

1.main_top

디올 홈페이지 메인화면은

화면을 꽉채운 슬라이드 배너와 이미지 클릭 시

해당 페이지로 이동하는 구조의 형식으로 제작되었네요.

​

2.main_mid

메인페이지 컨텐츠는 디올자사에서 선정한

그달의 주력상품 또는 뷰티,여성의류,남성의류 컬렉션으로 나누어

해당 제품(컬렉션) 썸네일을 누르면

해당 페이지로 이동하는 구조입니다.

디올은 워낙 유명한 명품브랜드이기때문에

화려한 애니메이션 없이 상품이미지, 모델화보만

노출시켜도 시각적인 효과가 큰것 같네요.

​

3.footer

푸터영역에는 먼저 '부띠끄찾기'라는 전국, 세계에 디올매장의

위치를 검색할수 있네요.

온라인매장서비스를 활용하면 어떤 혜택을 받을수 있는지

사용자에게 알려주고 있습니다.

저는 개인적으로 디올 홈페이지가 반응형으로 제작되었다는 것을

푸터영역에서 명확하게 느꼈는데요.

칼럼은 3개로 나눠 일정 너비이하로 해상도가 줄어들면

가로방식이 아닌 세로방식으로 나열되게 제작하였네요.

특별한 기술은 아니지만 사용자가 다양한만큼

다양한 디바이스를 고려하여 웹사이트를 제작해야된다는점

홈페이지제작, 앱제작 시 중요하게 고려해야된다는 것

다들 알고계신 사실이죠??

 

 

[main page]

전체적인 홈페이지 구조나 분위기를 살펴봤으니

이제 상세하게 분석해볼까요?

먼저 헤더영역부터 보겠습니다.

​

1.

헤더 좌측에는 검색어입력창이 위치하고 있네요.

검색창과 관련해서는 잠시 후 자세하게 살펴보겠습니다.

​

2.

디올헤더 중앙에는 디올의 로고가 위치하고 있습니다.

네임드있는 브랜드 이기에

로고 하나만으로도 느껴지는 감성(?)

개인적으로 이런부분이 매력적으로 느껴지는것 같아요 ㅎㅎ

로고하단에는 navigation이 있는데요.

nav영역 또한 잠시 후 더 자세히 알아볼게요~

​

3.

헤더 우측에는 '위시리스트, 마이페이지,장바구니'버튼이 위치하고 있어요.

각 버튼을 누르면 해당하는 페이지로 이동하는 구조이고

버튼마다 불러오는 컨텐츠가 다른형식으로 제작되어

이 영역 또한 밑에서 분석해보도록 하겠습니다.

​

4.

메인페이지의 슬라이더 이미지인데요.

앞서 언급한것 처럼 화면에 꽉차고 선명한 이미지를 통해

사용자의 시선을 유도하고

해당제품을 보려고 들어온 유저가 아니더라도

관심을 끌어 페이지로 이동하여 제품을 더 자세히

알아보게 하는 효과를 주고 있네요.

​

 

 

[navigation]

메인페이지의 nav에서 사용자가 이용하고자 하는 카테고리에

마우스를 가져다대면 해당 카테고리에 밑줄이 생기고

하위 카테고리가 펼쳐지는 형식으로 제작되었네요.

하위 nav 컨텐츠가 많을수록 더욱 효과적인 구조이죠.

많은 기업들이 사용하기도 하고

저와같은 사용자에게 익숙한 구조입니다.

좌측에는 진행하고있는 컬렉션또는 이벤트를 이미지와

삽입하여 사용자의 눈길을 한번 더 사로 잡는 효과!

이런 작은 부분들이

홈페이지제작, 앱제작 시 놓쳐서는 안되는 부분이라는 점

다시한번 생각하게 되네요.

 

 

[search box]

헤더 좌측에 위치하고있는 검색창에 검색어를 입력하면

검색어와 관련된 제품들이 자동으로 서치되어

사용자가 상세하게 검색어를 입력하지 않더라도 먼저 사용자에게

정보를 제공함으로써 사용자는 친절함을 느끼게되고

편리함을 느낄수 있습니다.

흔히 우리가 보는 추천검색어, 인기검색어와 비슷한 효과라고

생각하시면 좋을 것 같네요.

자동으로 검색된 내용 하단에 '모든 제품 보기'버튼을 누르면

사용자가 입력한 검색어에 관련된 모든 제품이 출력되는

페이지로 이동합니다.

 

 

[main_slider_img]

메인페이지의 슬라이더 이미지 좌측 하단에는

해당 컨텐츠의 상세페이지로 이동하는 버튼이 위치하고 있는데요.

디올이 현재 주력하고 있는 제품, 컬렉션을 슬라이더 이미지만

보여주고 끝나는게 아니라 해당 제품,컬렉션에 더 관심을 유도하게 버튼을 삽입해

사용자의 접근성을 더욱 용이 하게 하고있네요.

홈페이지제작, 앱제작 시 당연하다고 생각할 수 있고,

간단한 기능이지만 이런 버튼의 유/무의 차이는

확연하기 때문에 간과해서는 안된다는 점!!

 

 

​

[mypage1]

1.

헤더 우축에 위치한 마이페이지 버튼을 누르면

우선 비회원/미로그인 유저가 접근시

로그인 또는 회원가입을 하게 하는 페이지로 이동합니다.

​

2.

회원가입이 필요한 유저에게는 회원가입을 할수 있도록

회원가입 페이지로 이동하는 버튼을 삽입했습니다.

​

3.

기존회원은 로그인을 할 수 있도록 로그인패널을 우측에 넣었구요.

​

4.

회원가입한 유저가 사이트 이용 시 받는 혜택을

회원가입/로그인 페이지 하단에 배치하여

비회원 유저에게 회원가입을 유도하는 부분도

홈페이지제작, 앱제작 시 놓쳐선 안되는 부분 중 하나라고 생각됩니다.

회원가입을 유도해 사용자가 회원이 되어

사이트 이용을 더욱 활성활 시키는 효과가 될수 있기 때문이죠.

​

 

 

[join]

1.

회원가입 작성폼을 살펴볼까요?

디올은 회원가입 쉽고, 빠르게 완료할 수 있었습니다.

필수정보는 사용자의 이메일, 이름이였는데요.

본인인증과 같은 번거로운 절차 없이도

회원가입이 완료된다는 점이 개인적으로 편리했습니다.

본인인증, 휴대폰번호 입력과 같은 개인정보를

필수 적으로 입력해야되는 사이트도 있지만

그렇지 않음에도 굳이 회원가입시 개인정보를 필수적으로 입력해야만 하는

사이트들도 종종볼수 있었는데

홈페이지 또는 앱의 사용 목적, 기능에 따라 회원가입절차를

다르게해야 된다는 것 또한 다시한번 생각하게 됬습니다.

 

 

 

 

[mypage2]

1.

로그인 유저가 마이페이지 버튼을 누르면

마이페이지로 이동하는데요.

​

2.

좌측은 나의 개인정보와 관련된 내용이 보여지는 영역이네요.

해당영역에 하위로 출력되는 버튼을 누르면

관련페이지로 이동하는 구조입니다.

​

3.

사용자가 구매한 제품을 보여주는 영역이구요.

​

4.

위시리스트 또한 사용자가

제품의 하트버튼을 누른 제품을 한눈에 보아 보여주는 영역입니다.

이러한 기능은 사용자의 편리성을 위한 기능으로 보여지는데요.

쇼핑몰 사이트에 주로 활용하는 기능 중 하나이기도 하죠.

홈페이지, 앱제작 시 사이트의 목적에맞게

마이페이지에 들어가야하는 컨텐츠 또한 고민해서

제작해야된다는 것 또한 잊지말아야되는 부분 중 하나라고 생각됩니다.

​

 

 

[subpage1]

서브페이지 중 여성패션영역의

구두 컨텐츠 서브페이지를 살펴보겠습니다.

​

1.

제품의 상세이미지를 다양한 각도에서 촬영 이미지를

보여주어 사용자가 마치 실물을 보는 것처럼

제품의 형태, 색상 등을 보여주고 있네요.

​

2.

'부띠끄 구매 가능여부' 버튼은

사용자가 보고있는 제품이 어떤매장에서 판매하고 있는지

알려주는 기능을 하고 있는 버튼입니다.

이 버튼을 누르면 어떻게 보여지는 바로 아래에서 보시죠.

 

 

1.

부띠끄 구매가능여부 버튼을 클릭하면

해당내용의 팝업창이 화면에 띄워지는데요.

​

2.

사용자 본인의 사이즈를 선택하면 선택한 사이즈에 버튼이 active 처리되고

​

3.

선택한제품, 사이즈와 관련하여 구매가능한 매장을

사용자에게 정보제공하고 있습니다.

매장의 위치, 전화번호 등 상세 정보를 사용자에게 알려주어

사용자가 빠르고 쉽게 구매할 수 있도록 정보를 제공해주고 있네요.

 

마치며

​

오늘은 세계적인 명품 브랜드 디올 사이트를 분석해봤는데요.

오늘의 분석을 통해서 개인적으로

방대한 정보를 담고 있는 복잡한 레이아웃의 웹사이트는

모바일 사용자에게 필요이상의 정보와 그에따른 로딩시간에 문제가 야기될 수 있기에

비지니스의 형태에 따라 잠재고객, 사이트 접근방법 등을 먼저 파악해

홈페이지또는 앱 제작을 해야된다는 것을 생각해봤습니다.

그럼 오늘의 포스팅을 마칠게요:))

​