본문 바로가기
포트폴리오[기업]

[홈블리] 인테리어 기업 홈페이지, 손님과 사람을 부르는 홈페이지 제작 반응형 구축 잘하는 웹 에이전시!

by (주)매스티지 2024. 7. 8.

안녕하세요~!

20년노하우, 국내 최다 홈페이지 제작 매스티지입니다^^

오늘은 인테리어 기업,

홈블리

반응형 홈페이지를 소개해드리려고합니다:)

 


 

 
 
반응형 웹

 

인테리어 기업 홈블리데스크톱 화면뿐만 아니라

태블릿, 모바일 스마트폰 화면에서도 고객의 접근성을 생각해

가독성 높은 인터페이스로 개발했습니다^^

모든 화면에 디자인과 기능이 모바일 화면에 잘 어울리도록

매스티지의 자체 프로세스를 활용하여

완성도 높은 반응형 홈페이지를 만들었답니다.

 

 
 

 

 

PC 화면과의 통일성을 유지하면서 자연스러운 느낌이 날 수 있도록

그리드 레이아웃을 변형을 최적화하여 모바일 화면을 디자인했습니다.

스마트폰이 세로가 긴 해상도를 가지고 있기 때문에 가독성을 위해

컨텐츠들을 밑으로 나열시켰습니다.

 


 

 
 

 

홈블리

손님과 사람을 부르는 매력적인 공간을 만드는 인테리어 기업입니다.

고객이 원하는 고객이 필요로 하는 니즈를 정확히 분석하고 연구하여

고객의 집, 공간을 세련되고 고급스럽게 만들어줍니다.

 

 

클릭시 홈페이지로 이동합니다.

 


메인페이지

홈블리 메인 홈페이지입니다.

 

 

기업의 다양한 인테리어 포트폴리오를 쾌적하게 볼 수 있도록 

홈페이지 전체적으로 풀페이지 형태의 레이아웃으로 구성했습니다^^

인테리어라는 단어와 어울리는 모던한 느낌

홈페이지에 그대로 묻어나는 디자인으로제작하여

브랜드 인식이 강화되도록 만들었답니다.

레이아웃에 사진, 이미지 뿐만 아니라 gif 영상을 사용해

생동감 넘치고 입체감이 느껴지도록 제작되었는데요.

마우스 스크롤에 반응하는 모션 스크립트를 활용해

화면을 밑으로 내릴 때마다 컨텐츠들이 펼쳐지는 듯한

애니메이션 효과를 주면서 사이트를 이용하는

고객의 흥미와 몰입감을 높여 홈페이지 이탈률을 낮추었답니다:)

 


컬러사용

 

 

 

전체적인 컬러 사용은 화이트, 그레이, 블랙의 무채색을 활용해

모던하고 세련된 느낌의 이미지로 디자인했답니다.

섹션별로 풀페이지에 백그라운드 컬러를

무채색으로 활용함으로써 컨텐츠의 구분을 명확히 할 수 있었어요.

기업의 시공사례를 많이 노출시켰는데요,

고객의 호기심과 구매욕을 불러 일으켜야 하기 때문에

화려하고 다채로운 디자인보다

기업의 포트폴리오에 집중할 수 있도록

간결하고 심플한 레이아웃으로 만들었습니다.

 


메인비주얼

 

 

인테리어 소품을 활용하여

색상이 바뀌는 gif 영상으로 합성 제작했습니다:)

좌측에 기업의 비전, 가치를 소개하는 문구와 함께

메인 비즈니스 사업인 견적받기 버튼을 만들고

쉽게 문의할 수 있게 전화번호를 노출시켰답니다.

 


상단 GNB 영역

 

상단 GNB 영역은 로고와 포트폴리오, 상단문의 메뉴로 구성했으며

마우스 스크롤에 상관없이 고정시켜

홈페이지를 이용하는 유저들의 편의성을 높답니다^^

 

GNB에 상담문의 메뉴를 클릭하면

상세한 견적을 할 수 있는 추가 정보 창이 노출되는데요.

견적문의에 포커스가 잡히도록 정보창을 제외한 전체 화면에

투명도를 조절하여 제작된 검은 막으로 덮었답니다.

하단에 상단문의가 가능한 컨텐츠를 탭 형태로 제작해

고객이 보다 더 빠르게 견적문의를 받을 수 있고,

그로인해 고객유치가 효과적으로 이루어지도록 만들었습니다.

 


인테리어 사례

홈블리의 대표적인 인테리어 사례를 이미지로 소개하는 섹션입니다.

 

 

우스 스크롤에 반응하는 스크립트 기능을 활용하여 제작되었는데요!

기업의 대표적인 시공사례가 펼쳐지고 줄어드는 애니메이션 효과를 통해

역동적인 느낌의 레이아웃으로 만들었답니다:)

 


 

 

기업의 비즈니스를 고객에게 제안하는 컨텐츠로 간단한 스크립트 기능을 사용해 제작했습니다

 


포트폴리오, 다양한 시공사례

 
 

 

기업의 가장 중요한 비즈니스이기 때문에

고화질의 이미지를 활용해 제작했으며

4단 그리드로 레이아웃 구조를 잡고 모서리가 둥근

박스형태의 디자인을 사용해서

부드럽고 따뜻한 이미지가 느껴질 수 있도록 만들었답니다^^

마우스를 올리면 컨텐츠 요소가 밝아지게 제작되었고

그로인해 사용자의 인지를 확실하게 만들었으며,

클릭하면 더 많은 사례를 확인할 수 있는 상세페이지로 이동하게된답니다:)

 


 

네이버 검색

 

웹사이트제작에는 어느 요소 하나 중요하지 않은부분이 없습니다. ​

웹사이트의 기본이 되는 기획부터 보여주는게 중요한 디자인

인지하고 액션할 수 있는 퍼블리싱 그리고, 결과값을 보여주는 개발까지 

 

더 많은 포트폴리오와 수상내역은

홈페이지제작 매스티지 홈페이지에서 보실 수 있습니다^^

 

 

매스티지는 전문 프로세스를 통한 다양한분야의 반응형홈페이지 제작 경험과 

성공적인 사례로 각종 홈페이지 제작 어워드에서 매년 수상을 받을만큼 


고객과의 신뢰를 구축하고있습니다.

 

 

매스티지 20년노하우를 믿고, 

함께 웹사이트를 구축하고 싶으시다면 언제든지 연락 주시기 바랍니다^^


개별상담을 통해 보다 자세한 제안을 드리겠습니다. 감사합니다~!

 

▼ 홈페이지 제작 및 문의▼

매스티지 바로가기 클릭

 

▼ 프리웹스튜디오 바로가기 클릭▼

프리웹스튜디오 홈페이지