차양·흡연부스·버스승강장을 전하는 관급자재 전문 기업 웹사이트
Design Concept
튼튼한 구조, 선명한 오렌지
공공시설에 쓰이는 구조물을 만드는 기업인 만큼, 튼튼하고 믿을 수 있는 인상을 주면서도 딱딱하지 않게 보이도록 하는 것을 디자인의 출발점으로 삼았습니다.
차양과 흡연부스, 버스승강장을 실제 시공 사진으로 크게 보여주고, 브랜드 오렌지를 제목과 포인트에 사용해 제품 이미지가 먼저 눈에 들어오도록 했습니다.
또한 회사소개 · 제품소개 · 설치사례 · 고객센터 · 견적의뢰로 메뉴를 단순하게 정리해, 제품을 살펴본 뒤 견적 의뢰나 나라장터 쇼핑몰 이동까지 자연스럽게 이어지도록 설계했습니다.
Design Elements
-
01
풀페이지 방식의 메인 섹션
배너, 기업소개, 제품소개, 설치사례, 인증현황을 화면 단위로 나누고 우측 앵커로 바로 이동하게 했습니다.
긴 스크롤 없이 섹션별 핵심 메시지를 차례대로 확인할 수 있습니다. -
02
제품 4종 이미지 카드
차양, 흡연부스, 버스승강장, 자전거 보관대를 국문·영문 병기 이미지 카드로 구성했습니다.
제품 분류가 한눈에 보이고 각 제품 페이지로 바로 이동할 수 있습니다. -
03
분류별 설치사례 탭
설치사례를 제품과 같은 분류 탭으로 묶어 최신 시공 사진과 제목을 카드로 보여줍니다.
비슷한 시설의 시공 실적을 찾기 쉽도록 했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#F5A21D
- Canopy Orange#FF6E20
- Warm Orange#F0831E
- Amber#F5A21D
- Charcoal#222222
- Steel Gray#585958
- Light Gray#E4E4E4
- White#FFFFFF
Typography
Aa 가나다 Paperlogy
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
제품소개와 설치사례를 같은 네 가지 분류로 맞춰, 새 제품과 사례가 추가돼도 같은 규칙으로 확장되도록 설계했습니다.
서브 페이지는 상단 비주얼과 제목, 좌측 분류 메뉴, 본문 목록의 구조를 반복합니다.
제품 상세에는 식별번호, 규격, 재질, 납품기한, 공급지역을 같은 항목 순서로 정리했습니다.
- Grid
- 제품과 시공 사례는 이미지 카드 그리드로 배열해 사진 중심으로 비교하며 볼 수 있게 했습니다.
- Header
- 상단 메뉴에서 하위 메뉴를 펼쳐 보고, 나라장터 쇼핑몰 바로가기 버튼으로 바로 이동할 수 있게 했습니다.
- CTA
- 견적의뢰 메뉴와 우측 플로팅 버튼(제품검색·블로그·Call)으로 문의 동선을 항상 노출했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC상단 메뉴에 마우스를 올리면 하위 분류가 펼쳐지는 구성
MO햄버거 버튼을 누르면 오른쪽에서 슬라이드 메뉴가 열리는 구성
-
Layout
PC화면 단위로 넘어가는 풀페이지 섹션과 우측 앵커 내비게이션
MO카드가 한 줄로 쌓이는 세로 스크롤 구성
-
Typography
PCPaperlogy 제목과 Pretendard 본문으로 제품 정보를 또렷하게 전달
MO큰 제목과 짧은 문구를 유지해 좁은 화면에서도 읽기 쉽게 구성
-
Image
PC실제 시공 사진을 배경과 카드에 크게 사용한 구성
MO사진 비율을 유지하며 화면 폭에 맞춰 카드 크기를 조정
