UX·UI/Daily UI

Daily UI 012 / E-commerce Shop 이커머스 쇼핑몰

박해마 2024. 1. 31. 15:17

12번째 과제: E-commerce Shop 이커머스 쇼핑몰 UI

 

주제는 '신발을 주력으로 스포츠 의류를 판매하는 브랜드'의 '상세 페이지'로 설정하였다.

컨셉은 이미지 중심적이고, 신발을 다각도로 돌려보며 3D로써 파악할 수 있는 상호작용을 넣는 것이다.

 

이커머스 쇼핑몰은 정보량도 많고, 만들어야하는 페이지도 많다.

처음에는 호기롭게 온라인 의류편집샵을 주제로 잡고 레퍼런스로 29cm, 무신사, w concept를 분석하려고 했는데,

분석만 해도 하루 안에 해낼 수 없는 양이라는 것을 깨달았다.

이는 하루에 한개씩 UI를 쳐내야하는 DailyUI로는 어울리지 않았다.

 

그래서 스포츠 신발 브랜드로 시장을 구체화했고, 그에 맞게 Nike, Adidas, New Balance 웹사이트를 분석하였다.

이커머스 쇼핑몰에 대해서는 다음에 한번 더 기간을 충분히(2일~일주일) 잡고 더 꼼꼼히 분석하는 걸로!

 

- 신발 이미지 자체에 주목할 수 있도록, 신발 디스플레이를 크게 가져갔다. 아래에는 45'씩 신발을 돌려볼 수 있도록 하는 기능을 넣었다. 위아래를 뒤집어 볼수도 있다.

- 이외의 착용샷 등은 스크롤을 내리면 나타나는 것으로 상정했다.

- 왼쪽 현재 페이지 주소를 나타내어, 어느 카테고리에 속한 것인지 확인할 수 있게 했다. (나이키, 뉴발란스에는 이 기능이 없음)

- 색상 선택의 경우 텍스트로 전달하기 보다는 사진/팔레트로 직접 보여주는 것이 효과적이라고 생각했다. 나의 경우 왼쪽에 크게 들어가는 신발 이미지에 집중하는 것이 더 중요해서 팔레트로만 표현하였다. (아디다스는 놀랍게도 색상을 텍스트로만 써놓음) 

- 스포티한 이미지를 주기 위해서는, 절도있게 각진 쉐잎이 잘 어울린다고 판단했다. 그래서 아이콘 팔각형 모티브로 아이콘을 그렸다.

- 신발을 각도별로 돌려보며 3D 도식화의 경험을 느끼게 하기 위해, + 모양의 얇은 그리드를 넣었다.

 

 

 

*

 

모든 디자인에는 논리적인 이유가 필요하다.

논리가 탄탄하면 내 디자인에 대한 자신감은 자연스럽게 따라온다.

 

여태까지는 디자인 설명부에 너무 나의 부족한 점만 짚어쓰곤 했다.

하지만 앞으로는 어떤 논리에 근거하여 이런 디자인을 했는지를 쓰려고 한다.