SOFT
부드러운
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
부드러운 모션을 넣어
동적인 요소를 넣음
고급스러운 느낌의 이미지와
레이아웃을 잡음
네비게이션 카테고리를 정리해서
불편한 점을 개선
부드러운 선요소와 모션을 넣어 만년필을 연상시키고 블랙&화이트 컬러와 깔끔한 레이아웃으로 고급스러운 컨셉을 잡았습니다.
SOFT
부드러운
CLASSY
고급스런
NEAT
깔끔한
:: FONT STYLE
가독성과 깔끔함을 위해서 한글은 주로 Noto Sans KR 를 쓰고,
영어는 Cormorant Infant 폰트를 써 고급스러운 느낌을 냈습니다.
한글 폰트
Noto Sans KR
한계를 넘어서_40pt_Medium 500
한계를 넘어서_30pt_Medium 500
한계를 넘어서_24pt_Regular 400
개인 필기 스타일에 맞는 올바른 닙을 선택하면 수월하게 글씨를
쓸 수 있습니다. 2019년 캘리그래피 프로그램의 일환으로 현재의 세트
는 여덟 가지 다른 종류의 닙 폭 및 혁신적인 연성 닙을 제공하기에 다양한
14pt_Light 300
영어 폰트
Cormorant Infant
What moves you_40pt_SemiBold 600
What moves you_30pt_Medium 500
What moves you_28pt_Regular 400
At Montblanc, we believe that the way you move
inspires the mark you make. That every choice can
affect the ultimate destination of an individual’s journey.
20pt_Light 300
:: COLOR STYLE
Main Color
#000000
Sub Color
#ffffff
Point Color
#E9D09D
#315A88
Main page
반응형 페이지
Main page
단순하지만 직관적인 네비
사용자가 직관적인 확인이
가능하도록 디자인.
고급스러움을 살린 오토 슬라이드
이미지의 반을 불투명한 요소로
가려 고급스러운 느낌을 나게 디자인.
이미지 드래그 슬라이드
오토 슬라이드에 사용된 이미지의 전체모습을
넣어 메인 배너와 이어지는 느낌을 줌
베스트 셀러 섹션
베스트 셀러 제품을 나열 해놓음
몽블랑 만년필 섹션
만년필이 좌우에서 나오는 효과를 넣어
시각적인 재미를 줌
눈길을 끌어 몽블랑의 컬렉션을 더 살펴보게 함
장인정신 섹션
버튼을 클릭하면 슬라이드 됨
그에 맞는 설명도 같이 나옴음
장인정신 섹션
장인정신에 대한 설명과 함께
스크롤 하면 만년필로 선을 긋는 효과를 주어
시각적인 재미를 줌
동영상 섹션
몽블랑 동영상이 무한 루프 재생됨
신제품 섹션
신제품이 나열 되어있고
드래그 하면 슬라이드 됨
Sub page
About page
MontblacHouse page
Markmaker page
Product page
Publishing