사례 연구사례 템플릿 · Traditional

Traditional카나비스 플라워 브랜드 · 콘셉트 웹사이트

서비스

도구

카나비스 플라워 브랜드 · 콘셉트 웹사이트

로스앤젤레스의 카나비스 브랜드 Traditional을 위해 자체적으로 진행한 웹사이트 콘셉트입니다. 패키지의 개성을 표현력 있는 품종 페이지로 옮기고, 명확한 카탈로그, 제품 형태, 매장 찾기로 뒷받침했습니다.

Traditional의 패키지는 품종마다 고유한 색상과 아트워크를 부여합니다. 저희는 그 개성을 지키면서 다양한 상품 구성도 이해하기 쉽게 전달하는 웹사이트를 목표로 했습니다. 품종이 무엇인지, 어떤 형태로 나오는지, 브랜드를 어디에서 찾을 수 있는지입니다.

웹사이트 콘셉트, 정보 구조, 시각 디자인, 프런트엔드를 개발했습니다. 브랜드의 기존 패키지와 이미지가 저희만의 페이지 구성, 타이포그래피, 색상 시스템, 인터랙션의 출발점이 되었습니다.

사이트에 서로 보완하는 두 가지 모드를 두었습니다. 품종을 탐색하는 표현력 있는 페이지와 상품 구성을 비교하는 차분한 카탈로그입니다. 공통 페이지 구조 덕분에 각 품종은 정체성을 유지하면서도 하나의 웹사이트에 속합니다.

각 품종은 패키지 이미지, 팔레트, 콘텐츠를 재사용 가능한 페이지 구조와 결합합니다. 컬렉션, 형태, 매장 정보가 이 시각적 이야기를 상품 구성으로 향하는 실용적인 경로와 연결합니다.

01 / 시각적 방향

각 품종 페이지의 오프닝을 포스터처럼 다루었습니다. 패키지가 초대형 이름과 겹치고, 그 색상과 그래픽 요소가 배경과 타이포그래피로 확장됩니다.

Mamba 24는 보라색 배경에 질감 있는 금색 글자를 조합합니다. 다른 품종도 같은 구성에 각자의 팔레트와 패키지 이미지를 사용합니다. 변형을 페이지 시스템에 녹여 냈기 때문에 품종을 추가해도 새 레이아웃을 디자인할 필요가 없습니다.

02 / 상품 구성 비교

여러 품종을 비교하는 방문자에게는 안정적인 정보와 명확한 조작이 필요합니다. 카탈로그를 중립적인 배경에 배치하고, 라인, 유형, 맛 필터와 선택한 품종의 세부 정보를 목록 옆에 두었습니다.

필터 숫자로 선택 가능한 항목을 보여 줍니다. 데스크톱에서는 선택이 바뀌어도 패널 높이가 유지되고, 필터 상태가 URL에 남아 특정 보기를 공유할 수 있습니다.

03 / 제품 구조

같은 품종이라도 병, Minis, 프리롤로 제공될 수 있습니다. 이러한 옵션을 품종 페이지 안에 두고, 각 형태에 고유한 패키지 이미지와 크기를 부여했습니다.

방문자가 외부 스토어 링크로 이동하기 전에 이 관계가 명확해집니다. 품종의 정체성은 유지되고 형태만 달라집니다.

04 / 모바일 구성

포스터를 전체 높이의 모바일 구성으로 조정하고 품종명, 패키지, 색상을 함께 유지했습니다. Milks 포스터는 같은 품종의 형태로 이어집니다.

아래로 내려가면 형태 카드가 한 열로 쌓이고, 각 카드 안에 크기와 다음 동작이 있습니다. 모바일 레이아웃은 표현력 있는 오프닝과 그 뒤를 잇는 실용적인 순서를 유지합니다.

05 / 매장 찾기

매장 찾기는 모든 페이지의 헤더에서 이용할 수 있습니다. 로스앤젤레스의 네 지점을 하나의 지도에 모으고, 주소, 길 안내, 각 Weedmaps 페이지 링크를 제공했습니다.

이 콘셉트의 역할은 상품 구성을 소개하고 매장을 찾도록 돕는 것입니다. 제품 및 위치 동작은 Weedmaps로 이어지며, 웹사이트 자체에는 결제 기능이 없습니다.

결과

실제 작동하는 콘셉트는 품종별 이야기, 필터링 가능한 카탈로그, 형태 선택, 매장 위치를 하나의 시각 시스템으로 연결하며, 데스크톱과 휴대폰에 맞게 조정되었습니다.