맞춤형 초경합금 솔루션을 소개하는 제조 기업 웹사이트
Design Concept
단단한 소재, 믿음직한 인상
전문 용어가 많은 제조업 제품을 처음 보는 방문자도 쉽게 이해하도록 하는 것을 디자인의 출발점으로 삼았습니다.
차분한 그레이 블루와 짙은 차콜 톤으로 단단한 소재 기업의 신뢰감을 만들고, 영문 타이틀과 한글 설명을 함께 배치해 글로벌 거래처에도 어울리는 인상을 주었습니다.
또한 제품 카테고리, 납품 포트폴리오, 견적문의를 하나의 흐름으로 이어 방문자가 제품 확인 후 바로 문의까지 넘어가도록 설계했습니다.
Design Elements
-
01
슬라이드로 전하는 브랜드 메시지
메인 상단에서 맞춤형 초경합금 솔루션과 신뢰 메시지를 슬라이드로 순서대로 보여주었습니다.
영문 Royal Cemented Carbide 타이틀과 한글 설명을 함께 배치했습니다. -
02
네 가지 제품 카테고리
절삭공구, SAW, 광산·토목공구, 내마모부품/비자성합금을 같은 카드 형식으로 정리했습니다.
각 제품의 영문명과 세부 항목을 함께 보여주고 자세히 보기로 이어집니다. -
03
납품 사례 포트폴리오
초경 커터, 스크류, 광산팁 등 실제 제품 사진과 용도를 함께 소개했습니다.
제품이 어디에 쓰이는지 사례로 확인할 수 있어 신뢰를 더합니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#EB5757
- Steel Blue#40647D
- Charcoal#222222
- Signal Red#EB5757
- Mid Gray#7F7F7F
- Light Gray#E6E6E6
- Pale Gray#F7F7F7
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 LINESeedKR
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 GmarketSans
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
제품·회사·문의 페이지를 동일한 규칙으로 일관되게 확장할 수 있도록 설계했습니다.
서브 페이지는 상단 비주얼과 제목, 본문 순서의 같은 구조를 따릅니다.
메뉴는 회사소개, 제품소개, 포트폴리오, 고객 서비스로 나누어 정리했습니다.
- Grid
- 제품 카드와 포트폴리오 목록을 같은 간격과 비율 규칙으로 맞췄습니다.
- Header
- 상단 메뉴 아래에 하위 메뉴가 펼쳐지며 스크롤 시 헤더 로고가 전환됩니다.
- CTA
- 하단과 메인 곳곳에 견적문의 버튼을 배치해 상담으로 바로 이어지게 했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC상단 가로 메뉴와 하위 메뉴 펼침
MO햄버거 버튼으로 여는 메뉴
-
Layout
PC제품 카드를 가로로 나열
MO카드를 세로로 재배치
-
Typography
PC영문 타이틀 중심의 큰 제목
MO제목 크기를 줄여 줄바꿈 최적화
-
Image
PC와이드 제품 비주얼
MO화면 폭에 맞춰 이미지 비율 조정
