-
다양한 분야의 제작경험과 전문가들의 개발노하우로 모두가
만족하는 결과를 만들어 드리겠습니다. -
“비절개모발이식 전문! 모발이 뿌리를 내리듯 믿음과 신뢰로 뿌리내리겠습니다!”
모션의원 홈페이지 프로젝트는
비절개 모발 전문 이식 병원이라는 컨셉을 가장 중점으로 기획되었습니다.
실제 사례자들의 전후사진 이미지를 메인 비주얼로 두어 사용자가 두터운 신뢰를 가질 수 있도록 구성하였으며
중요 컨텐츠에는 마우스 오버 효과를 주어 집중도를 높이도록 유도하였습니다.
병원에 직접 와 있는 듯한 느낌으로 태어났다! 머리가 자랄 것만 같은 디테일함을 최대화 시킨 디자인!
디자인 의도
비주얼과 모든 컨텐츠들 사이의 여백을 제거하고 면으로만 처리하여 딱 떨어지는 깔끔한 구성을 이루어냈습니다.
또한 HI에 사용된 세모 모양을 메인 곳곳에 사용하여 디테일을 살렸습니다.
전체적인 컬러는 무채색 계열을 사용하되 브라운 계열을 사용하여 병원 자체의 고급스러움을 그대로 담아냈으며,
곳곳에 병원 사진을 사용하여 온라인 상이지만 병원을 직접 느낄 수 있도록 하였습니다.
일반 병원 홈페이지처럼 LNB 영역이 컨텐츠 영역 왼쪽 또는 오른쪽에 있는 것을 배제하고 상단 GNB 영역에 붙어 있도록 처리하여 컨텐츠의 활용도를 최대화했습니다.
또한 2Depth 메뉴가 각 대메뉴를 오버했을 시에만 보여지는 단점을 커버하기 위해 GNB 오른쪽으로 전체메뉴를 삽입하여 메뉴 간의 이동성을 간편화했습니다.
사용자가 가장 궁금해하는 내용을 비주얼로 한 눈에! 일러스트를 이용하여 지루하지 않도록!
사용자가 궁금해하는 컨텐츠들을 각 컨텐츠 페이지의 상단 비주얼로 삽입한 방식으로 이해를 도울 수 있게 처리하였습니다.
기존 방식과 모션의원만의 장점을 비교하는 방식을 통해 모션만의 강점을 어필했으며 일러스트를 사용하여 다소 지루할 수도 있는 컨텐츠 영역을 보완했습니다.
다른 메뉴로의 접근성을 높이기 위해 삽입한 퀵메뉴에 마우스 오버 효과를 주어 각 퀵메뉴마다의 설명이 보여지는 형태로
일반적인 아이콘/텍스트 배치에서 벗어난 구성을 가져갔습니다.
Color System