우리핸드레일 반응형 기업 홈페이지 제작 사례

PORTFOLIO

다양한 분야의 경험과 전문가의 노하우로
모두가 만족할 결과물을 제시해 드립니다.

Drawing on extensive experience across diverse fields and expert know-how,
we deliver outcomes that satisfy everyone.

PORTFOLIO

우리핸드레일 반응형 기업 홈페이지제작 2024/05

메인 화면 기획 및 시공 현장 중심 랜딩 구성

[메인 화면 기획]

난간은 실제 시공 품질로 신뢰를 얻는 분야이기 때문에, 메인 첫 화면을 용접·설치 현장과 완성된 옥상 유리난간을 담은 영상으로 구성해

브랜드 '난간스'와 '프리뷰글라스'를 현장감 있게 전달하도록 기획했습니다.

이어서 기성·평철/타공·유리/스텐·단조 난간을 소개하고, 시공 진행 절차와 당월 제품 판매 비율, 시공 사례 순으로 정보를 배치해

제품 이해부터 견적 문의까지 자연스럽게 이어지도록 설계했습니다.

메인 디자인 시스템

[메인 디자인]

철재·유리 소재의 단단한 인상을 살리기 위해 딥틸과 블랙 계열의 어두운 사진 배너를 중심으로 하고,

'디자인'·'시공' 같은 핵심 단어와 버튼에만 코랄 레드 포인트를 넣어 시선을 모았습니다.

제품 소개는 왼쪽 카피를 고정한 채 오른쪽 세로형 사진 카드가 스크롤되는 구성으로 각 난간의 소재감을 크게 보여주고,

판매 비율은 막대그래프로 시각화해 정보를 직관적으로 전달하도록 디자인했습니다.

콘텐츠 디자인 및 정보 구조

[콘텐츠 디자인]

제품 종류가 많은 만큼 제품소개 페이지는 기성난간·평철/타공·유리/스텐·단조·메쉬/주물·프리뷰글라스 등을 라운드 탭으로 나누고,

실물 사진 그리드로 제품을 비교해 볼 수 있게 구성했습니다.

시공갤러리는 '지역 + 공간 + 난간 종류' 형식의 제목으로 사례를 정리해 비슷한 현장을 쉽게 찾도록 했고,

회사소개에는 CEO 인사말과 인증서·특허증을 배치해 기술력을 보여주는 구조로 설계했습니다.

웹사이트 UX/UI 최적화

[웹사이트 UX/UI]

견적 상담이 최종 목적인 만큼 화면 오른쪽에 카톡문의·전화문의·제품소개·시공갤러리·FAQ·블로그 퀵메뉴와 대표번호 버튼을 고정해,

어느 페이지에서든 바로 상담으로 이어지도록 동선을 설계했습니다.

메인에는 견적의뢰부터 현장실측·제품제작·현장시공까지 4단계 절차를 아이콘으로 보여줘 진행 과정에 대한 불안을 줄였고,

FAQ와 문의하기 폼으로 상담 전 궁금증 해결부터 접수까지 한 흐름으로 연결했습니다.