상품
normal
Renneewal Project : 2023.01 - 2023.05
TYPE : Reponsible Website
Break Point : 768px
Program: Adobe XD, Adobe Photoshop,
Adobe Illustrator, Visual Studio Code
Frame Work: Gsap,Swope Slide
OverView
나그참파코리아는 인도 전통 방식으로 재현한 인센스 스틱 브랜드 사이트입니다.
홈페이지가 정적인게 아쉬어 동적인 모션을 넣어 상품을 돋보이게 하였습니다.
인센스 스틱의 상품을 살리는 색을 사용하고 제품 패턴을 이용해서 개성 있어 보이는 방향으로 리뉴얼했습니다.
브랜드와 소비자 사이를 가깝게 만들어 주는 디자인
홈페이지를 분석하여 문제점을 발견해 해결방안을 제시하였습니다
As is
To be
GOAL
모션 효과를 넣어 사용자의 유입과 상품 구매를 증가
브랜드 홍보에 필요한 섹션을 추가해 접근성을 높여 브랜드 사용자의 유입 증가
네비게이션을 사용하기 쉽게 재구성하여 사용자의 편의성을 높임
Concept
상품과 어울리는 자연의 이미지와 따뜻한 색삼을 써서 자연적이면서
안락함을 느낄 수 있게 디자인을 하였고, 심플한 레이아웃을 사용해 편의성을 높였습니다.
Comfort
안락함
Natural
자연적인
Simple
심플한
Stule Guide
Font Guide
폰트는 가독성을 높이기 위해서 고딕체를 사용했습니다
직선과 곡선의 조화가 인센스 스틱 상품에도 잘 어울리는 것같아 한글 폰트는Noto Sans를, 영문 폰트는 Oswald를 사용하였습니다.
한글 폰트
Noto Sans KR
Main Title
: 38pt
: -30
나그참파만의 깊은 잔향의 특별함_38pt_Bold700
Main Title
: 26pt
: -30
나그참파만의 깊은 잔향의 특별함_26pt_Medium500
Main Title
: 20pt
: -30
나그참파만의 깊은 잔향의 특별함_20pt_Regular400
Main Title
: 26pt
: -30
중세 인도 브란만들만 누릴 수 있었던 인센스 스틱을 인도 전통 방식으로 재현한 향.
나그참파는 천연 허브와 에센셜 오일로 향(Masala)을 배합하고 대나무 스틱에 반죽을
수작업으로 롤링하여 만듭니다_16pt_Light300
영문 폰트
Oswald
Main Title
: 48pt
: +20
Speciality of Nag Champa's deep_36pt_SemiBold 600
Main Title
: 34pt
: +24
Speciality of Nag Champa's deep_26pt_Regular 400
Main Title
: 26pt
: +24
Speciality of Nag Champa's deep_18pt_Light 300
Main Title
: 20pt
: +30
Satya Incense is your destination for Lifestyle Products in Perfume,
Incense, Room Freshener, Candles, Beauty Soaps and Fragrance Oil's.
We sell expertly curated_16pt_ExtraLight 200
메인 색으로는 연한 노한색이 도는 컬러를 사용하여 따뜻한 느낌을 들 수 있도록 하였습니다
검정색과 주황색을 이용해서 브랜드 로고 색과 대표 상품이 잘 어우러지도록 하였습니다
포인트 색상으로는 파랑색을 사용하여 메인색과 보조색의 조합의 차분한 느낌을 조금 가볍게 만들고자 사용하였습니다
Main Color
#FFFFF5
#FFFFF5
NAG CHAMPA
NAG CHAMPA
#FD5316
NAG CHAMPA
Sub Color
#FD5316
#FFFFF5
NAG CHAMPA
NAG CHAMPA
#363637
NAG CHAMPA
Sub Color
#363637
#FFFFF5
NAG CHAMPA
NAG CHAMPA
#2850C1
NAG CHAMPA
Point Color
#2850C1
Component
상품
normal
브랜드
hover
매거진
게시판
NEW ARRIVE
BEST SELLER
normal
active
NEW ARRIVE
BEST SELLER
normal
active
normal
hover
normal
hover
MAIN PAGE
NAGCHAMPA KOREA NAGCHAMPA KOREA
고급스러움을 살린 오토 슬라이드
이미지의 반을 불투명한 요소로
가려 고급스러운 느낌을 나게 디자인
브랜드의 소개를 한 눈에 볼 수 있는 섹션
버튼을 클릭하면 어바웃 페이지에 연결됨
입점된 상품을 볼 수 있는 섹션
슬라이드 버튼을 클릭하면
이미지가 바뀜
신제품과 베스트셀러의 섹션
상품과 어우러지는 이미지를
넣어 상품을 더욱 돋보이게 만듬
브랜드 동영상 섹션
위의 섹션과 어색하지 않게 연결되며
동영상으로 인해 동적이게 느껴지게 함
흘러가는 텍스트 섹션
흘러가는 텍스트 효과로
시각적인 재미를 더해줌
세로 슬라이드 인센스 상품섹션
인센스를 피우는 어두운 이미지를
배경을 해서 상품이 돋보임
나그참파 매거진 소개 섹션
매거진을 간략하게 소개하는 글을
볼수 있으며 버튼과 이미지를 클릭
하면 매거진으로 연결됨
SUB PAGE
About Page
Magazine Page
My Page
Cart Page
Product Page
Detail Page
Login Page
Publishing
Thank you