건설·부동산·M&A 전문성을 결과로 증명하는 법률 웹사이트
Design Concept
결과로 말하는 절제된 신뢰
기업과 개인의 복잡한 분쟁을 다루는 로펌인 만큼, 화려한 연출보다 전문성과 책임감이 먼저 읽히는 디자인을 목표로 했습니다.
딥 네이비를 바탕으로 절제된 골드를 포인트로 쓰고, 영문 섹션 타이틀과 명조 계열 서체를 더해 대형 로펌의 경험을 가진 부띠크 로펌의 인상을 만들었습니다.
또한 메인 화면에서 강점, 업무분야, 구성원, 사례, 상담신청까지 한 흐름으로 이어지게 하고 각 구간마다 상담 문의 버튼을 둬 정보 탐색이 자연스럽게 상담으로 이어지도록 설계했습니다.
Design Elements
-
01
일곱 개 업무분야 카드 구조
건설·부동산부터 형사사건까지 일곱 분야를 같은 카드 규칙으로 정리했습니다.
각 분야의 핵심 내용을 한눈에 비교하고 상세 페이지로 바로 이동할 수 있습니다. -
02
Why JLCK Partners 네 가지 강점
로펌을 선택해야 하는 이유를 번호가 붙은 네 가지 메시지로 압축해 보여줍니다.
긴 소개글 없이도 로펌의 강점을 빠르게 파악할 수 있습니다. -
03
분야 필터형 Case Results
사례를 전체와 분야별 탭으로 나눠 사용자가 관련 분야만 골라볼 수 있게 했습니다.
사례 수가 늘어나도 같은 구조 안에서 정리되도록 설계했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#1B1917
- Deep Navy#0E1F39
- Muted Gold#CCA95A
- Warm Black#1B1917
- Charcoal#222222
- Stone Gray#7F7F7F
- Light Gray#E6E6E6
- White#FFFFFF
Typography
Aa 가나다 KoPub Batang
가나다라마바사아자차카타파하
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
- Member, Service 같은 영문 타이틀 아래 한글 부제를 두어 페이지 성격을 먼저 알립니다.
- CTA
- 상단 Contact 버튼과 하단 온라인 상담신청 폼이 모든 페이지에서 이어집니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC상단 고정 헤더에 5개 메뉴와 Contact 버튼을 한 줄로 배치
MO햄버거 메뉴로 전환하고 열기·닫기 아이콘으로 전체 메뉴 이동
-
Layout
PC업무분야와 구성원을 가로 다단 카드로 배치
MO카드를 세로로 쌓아 한 화면에 한 분야씩 읽히도록 정리
-
Typography
PC명조 계열 제목과 Pretendard 본문을 넉넉한 크기로 구성
MO제목과 본문 크기를 줄이고 줄바꿈을 조정해 가독성 확보
-
Image
PC메인 이미지와 로고 그래픽을 큰 화면 비율로 노출
MO화면 폭에 맞춰 이미지 비율과 여백을 조정
