H&M 홈페이지 제작방식을 알아보자!

H&M 홈페이지 제작방식을 알아보자!

 

 

[intro]

세계적인 SPA브랜드 H&M!

명성에 걸맞게 합리적인 가격,

디자인의 옷들이 많은 브랜드 인데요.

H&M은 스웨덴에서 시작된 글로벌 브랜드 입니다.

한국 H&M홈페이지는 어떻게 제작되었는지

한번 살펴볼까요?

---

[main]

1.

홈페이지 메인 상단 중앙에는

H&M 로고가 위치해 있네요.

로고의 색상은 강렬한 레드색상, 심플한 ci로

홈페이지 접속시 브랜드인식을 강렬​하게 해주고 있네요.

​

2.

메인navigation은 심플하게 텍스트로 제작되었네요.

홈페이지가 전반적으로 심플하게 구성되있는데

이런 디자인이 트렌디하고 H&M브랜드가 추구하는

아이덴티티와 잘 어울린다고 생각되네요.

​

3.

H&M의 강렬한 로고색상에 맞춰

메인배너도 레드컬러의 박스안에

강조하고자 하는 내용의 텍스트가 삽입됬네요.

심플하지만 눈에 확 뛰는 컬러로

사용자가 홈페이지 접속 시

자연스럽게 이벤트 또는 홍보하고자 하는 내용으로

시선을 유도하게 됩니다.

홈페이지, 앱 제작 시

ui가 정말 중요하다는 점 알고 계시죠?

 

[main]

메인페이지 우측상단에는

로그인,즐겨찾기,쇼핑백 버튼이 위치되있는데요

해당 버튼은 어떤 기능이 있는지 살펴볼까요?

​

1.

로그인 버튼은

로그인페이지로 이동할 수 있는 버튼입니다.

또, 내 계정 찾기와 회원가입페이지로 이동하게 하는

버튼이 삽입되어있네요.

​

2.

쇼핑백버튼은

사용자가 장바구니에 담아놓은

상품과 상품가격 그리고 전체 상품의 총 금액을

확인할 수있는 박스가 보여지네요.

어떤페이지로 이동하든 저 버튼이

우측상단에 상단에 위치하여

사용자가 담아놓은 상품을 빠르고 쉽게

확인할 수 있습니다.

이러한 버튼 삽입으로 사용자가

홈페이지 사용시 편리성을 제공하고 있는 장점으로 보여지죠?

 

 

[main-bottom]

1.

메인페이지에서 하위로 스크롤 이동을 하면

각 카테고리 별로 섹션이 나뉘어져있는데요.

카테고리별로 다양한 이미지를 삽입하고

이미지 위에 간단한 설명

해당 카테고리로 이동할 수 있는 버튼을 삽입하여

사용자에게 행위를 유도하고

화면에 꽉차는 이미지가

시선을 사로잡아 홈페이지에 더욱

집중할 수 있게 연출 하였네요.

​

2.

H&M브랜드의 잡지내용이 삽입된 섹션인데요.

잡지내용을 보여주는 부분인 만큼

간결하고 심플하게 제작한것 같습니다.

 

[main]

메인 좌측 상단에는 공지사항 또는

고객서비스와 관련된 버튼이 위치하고 있습니다.

1.

고객서비스 버튼을 누르고

해당페이지에서도 여러개의 서비스의 버튼들이

나열되어 있는데

원하는 서비스 버튼을 누르면

​

2.

해당하는 서비스에 관련하여

설명해주는 페이지로 이동하네요.

페이지를 타고 들어가는 구조는

사용자에게 행위를 유도하기도 하지만

여러번의 행위를 반복한다는 느낌도 주게됩니다.

H&M 홈페이지처럼 간결하고 심플한 구조면

조잡하다는 느낌을 받지않지만

그렇지 않을 경우 단점으로 비춰지겠죠?

1.

메인페이지 네비게이션 버튼을 누르면

하위로 sub메뉴들이 펼쳐지는데요.

쇼핑몰사이트는 상품의 종류도 매우 다양하기 때문에

하위메뉴들이 당연히 많겠죠?

그렇기에 대부분 쇼핑몰들을 H&M처럼

심플하게 제작하여

사용자가 원하는 상품 카테고리를

빠르게 찾을 수 있도록 제작합니다.

홈페이지,앱제작 시

제작하는 목적에 맞게 메뉴구조를 기획하고

디자인해야하는 점을 여기서 강조할 수 있겠네요.

 

 

​

[subpage]

서브페이지로 이동하면

우선 좌측에 사이드메뉴가 위치하고

쇼핑몰 사이트답게 메인이미지가

크게 삽입되어있네요.

​

1.

시즌별 또는 이벤트상품과 같은 카테고리를

적극적으로 홍보할 때

홈페이지의 메인페이지에서처럼

큰 이미지위에 이벤트로 이동할 수 있는 버튼을 삽입하기도 합니다.

H&M홈페이지의 경우

서브페이지 안에서도 서브페이지의 메인->서브로

동하는 구조 인것 같은데요.

하나의 서브페이지에서도 메인이되는 이벤트를 안내하고

그 안에서 서브페이지로 이동하는 점은

사용자에게 정보를 다양하게 제공하여

사용자가 홈페이지에서 친절함을 느낄 수 있는 부분처럼 보여지네요.

​

2.

상품 썸네일을 크고 명확하게 제작하여

사용자에게 어떤상품인지 정확하게 안내하고

심플한구조의 썸네일로

사용자가 상품에 더욱 집중할 수 있도록 하고 있습니다.

 

[subpage]

서브페이지에서 상품검색시

다양한 필터로 상품검색을 할 수 있네요.

상품을 구매하는 쇼핑몰은

다양한 사용자가 접속하여

자신에게 맞는 상품을 찾을수 있도록

제공하는 기능인데요.

이런 기능들이 사용자에 편리성을 제공하고

홈페이지에서 친절함을 느낄수 있으며

이러한 장점들은

홈페이지 재방문률을 높이는 결과로 이어지게 됩니다.

홈페이지, 앱 제작시

사용자의 사용성을 편리하게 하기 위해

많은 기능을 연구하고 더욱 섬세하게 제작해야겠죠?

 

마치며

​

H&M의 홈페이지는 구성이 쉽고 간단하게,

표현은 인터렉션하게 보여주었습니다.

또 브랜드 특유의 독창적인 이미지와 잘 맞아서

트랜디한 느낌으로 보여줬습니다.

때문에 많은 사용자들이 편하게

사용할 수 있는 부분도 고려되었다고 생각해요.

앞서 언급했지만

홈페이지, 앱 제작시

사용자의 사용성을 편리하게 하기 위해

많은 기능을 연구하고 제작해야한다는 점을

다시한번 강조하며 마무리하겠습니다!

​