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

몽블랑은 필기구, 레더, 시계, 액세서리 제품을 제작하는 고가 제품 브랜드입니다.
홈페이지가 정적인게 아쉬워 부드러운 모션 효과를 넣어 사용자의 눈길을 끌어 상품 구매력을 높이고.
고가 제품에 맞게 고급스러운 느낌을 내어 브랜드의 가치를 더 높이도록 리뉴얼하였습니다.

GOAL

불필요한 요소를 정리하여 사용자의 편의성을 높임, 모션 효과를 넣어 사용자의 유입과 상품 구매를 증가 시킴
고급스런 느낌으로 브랜드의 가치를 높임.

AS IS

타 사이트에 비해 동적인 요소가
없어 홈페이지가 정적임

단순한 레이아웃으로
브랜드 개성이 잘 드러나지 않음

네비게이션이 복잡하게 되어있어
유저가 사용하기 불편함

TO BE

부드러운 모션을 넣어
동적인 요소를 넣음

고급스러운 느낌의 이미지와
레이아웃을 잡음

네비게이션 카테고리를 정리해서
불편한 점을 개선

DESIGN CONCEPT

부드러운 선요소와 모션을 넣어 만년필을 연상시키고 블랙&화이트 컬러와 깔끔한 레이아웃으로 고급스러운 컨셉을 잡았습니다.

SOFT

부드러운

CLASSY

고급스런

NEAT

깔끔한

STYLE GUIDE

:: 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