[New Template] 제품을 소개하는 템플릿, Five-set

2019. 01. 28


안녕하세요. UX팀 디자이너 강진현입니다.
제품을 소개하는 템플릿, Five-set를 소개해 드리겠습니다.



간결하면서 강조된 레이아웃

수많은 사이트 중에 쇼핑몰을 사용하는 사용자가 많아지면서 다양하고 개성이 강한 홈페이지가 점점 많이지고 있습니다. 이번 테마를 시작하면서 판매만 목적이아닌 간결하면서 제품 소개와 판매를 접목시킨 방향으로 시작하였습니다. Five-set 템플릿은 원페이지 방식의 이미지와 텍스트 위젯으로만 구성이 되어있기 때문에 쉽게 접근하여 사용할 수 있습니다.




핵심 컨텐츠가 중심인 디자인

상품 설명이 주된 컨텐츠인 Five-set은 특별한 기술없이 쉽게 사용이 가능한 테마입니다.

컬러

  • 제품을 돋보기이기 위하여 무채색 위주에 색상을 기본으로 사용 (#1c1c1e, #f6f6f8)
  • 해드폰에서 느껴지는 특성을 살린 푸른 색상을 브랜드 컬러로 사용 (#2c82c9)

폰트

  • (영문) 제목/본문 폰트: 끝이 둥근 폰트로 제품의 특성을 맞추면서 가독성이 높은 폰트로 선택
  • (한글) 제목/본문 폰트: 크기가 작고 옅게 사용되기 때문에 가독성이 높은 고딕(스포카 한 산스, Helvetica)으로 선택

메인

  • 원페이지 방식의 형태로 구성
  • 제품이미지와 간략한 텍스트로 깔끔한 형태로 구성

쇼핑 (Shop)

  • 다른 쇼핑몰 테마와 차별성
  • 갤러리 위젯을 통하여 구매가능한 상세페이지로 이동





모바일 편집

Five-set은 모바일편집이 많지 않은 템플릿입니다. 다만 이미지를 배경으로 넣을경우 모바일 환경에서 어색하게 보이게 됩니다.
때문에 불가피하게 모바일 편집이 이뤄진 부분이 있습니다.

메인 비주얼

  • Five-set은 비주얼 이미지 비율이 다르기 때문에 모바일에서는 비주얼 숨김처리가 반드시 필요

그 외 서브

  • PC에서 사용된 비주얼 섹션 숨김




마치며

간결하면서 핵심컨텐츠를 확이할  수 있는 Five-set 테마, 소규모 상품의 집중할 수 있도록 활용도를 높이고 큰 수정이 없이 사용할 수 있도록 제작하였습니다. 많은 관심 부탁드립니다 :)

Five-set 템플릿 살펴보기