Main
해태제과의 귀여운 대표 캐릭터들과 일러스트 배경을 배치하여 visual 페이지를 구성하였습니다.
사이트 경험만으로 해태제과의 밝고 통통 튀는 이미지를 즐길 수 있도록 대표 캐릭터들이 움직이는 애니메이션 기능을 구현하였습니다.
리뉴얼페이지 소개
RENEUAL WEBSITE
해태제과
70년간 좋은 제품을 끊임없이 연구하는 제과 기업 ‘해태제과’ 사이트를 리뉴얼한 프로젝트입니다.
일러스트 요소만 강조되어 정보 전달력이 부족한 기존의 웹사이트의 문제점 개선을 중점으로 개편하였습니다.
-
Contribution
1인 프로젝트(UX 기획, UI 디자인, 퍼블리싱 100%) -
Date
2024.03-2024.04 (약10일) -
Tool
Welcome Sweet World
Concept
“달콤한 세상으로 여러분을 초대합니다!“달콤한 세상인 해태제과 사이트에 초대받은 느낌을 받을 수 있도록 디자인하였습니다.
해태제과의 달콤한 매력을 느낄 수 있도록 귀여운 일러스트와 통통 튀는 활기찬 인터랙션을 활용하였습니다.
Typography
한글서체는 해태제과의 로고와 비슷한 서체인 G마켓 산스서체를 지정하여
브랜드 아이덴티티를 나타냈습니다.
영문 서체는 모서리가 둥근 서체를 이용하여 해태제과의 귀여운 이미지를 표현하였습니다.
-
Korean
G마켓 산스
-
English
Montserrat Alternates
Color
메인컬러는 고객에게 즐거움을 제공하고자 하는 해태제과의 열정을 나타내는 HAITAI Red 컬러를 사용하였습니다.
- #ED1D85
- #1D1D1D
- #FEDCDB
- #DEFFFD
Navigation bar
스크롤를 내리면 메뉴가 고정되어 어느 페이지에서든 메뉴를 사용할 수 있게 접근성을 높였습니다.
Company introduction
홈페이지 방문자들께 달콤한 세상에 초대한 느낌을 받을 수 있도록 마우스 휠을 내리면 회사소개 내용이 나타나게 애니메이션을 구현하였습니다.
Welcome
달콤한 해태제과
Sweet World
달콤한 평생친구
좋은 제품을 끊임없이 연구하여 고객과 함께하는 달콤한 해태제과
새로운 것을 상상하는 달콤한 기업
고객을 지켜주는 달콤한 평생친구
Product
기존 메인 페이지에는 없던 Best Product를 추가하여 해태제과의 기업의 대표 상품들을 소개하였습니다.
각 제품들의 분야별 best 상품들을 Tab 메뉴를 통해 배치하여 소비자가 원하는 정보를 쉽고 빠르게 습득할 수 있게 구성하였습니다.
pc 버전에서는 마우스를 해당 제품에 호버시, 제품 내용물이 떠다니는 인터랙션으로 시각적 즐거움을 더하였습니다.
달콤한 즐거움을 주는 시간, 입안을 부드럽게 채워주는 시간! 언제나 해태제과의 맛과 함께하세요. 달콤한 즐거움을 주는 시간, 입안을 부드럽게 채워주는 시간! 언제나 해태제과의 맛과 함께하세요. 달콤한 즐거움을 주는 시간, 입안을 부드럽게 채워주는 시간! 언제나 해태제과의 맛과 함께하세요.
Sns
sns 항목들을 인스타그램 카드 형식으로 배치하여 귀여운 포인트를 주었습니다. 마우스 오버시 해당 항목의 카드가 움직이는 애니메이션을 주어 집중도를 높였습니다. 일정 사이즈 이하로 디바이스가 교체되면 좌우로 슬라이드되도록 변경하였습니다.
Event
진행중인 이벤트들을 포스터와 내용들을 한눈에 볼 수 있게 마우스 휠을 내리면 슬라이드되어 나타나게 배치하였습니다. 모든 디바이스에서 최적화된 화면을 제공하기 위해 일정 사이즈 이하로 디바이스가 교체되면 위아래 배치를 좌우로 슬라이드되게 변경하였습니다.
News
메인컬러를 배경으로 지정하여 색상 변환을 주고, 전달하고자 하는 메세지를 하단에 움직이는 애니메이션으로 배치하여 보는 즐거움을 더했습니다. 해당 소식에 마우스 호버시 배경색을 변경하여 주목성을 이끌어냈습니다.
