전국 지점의 전문성을 하나로 잇는 종합 법률 웹사이트
Design Concept
신뢰를 담은 딥 네이비와 골드
여러 지점과 다양한 업무분야를 가진 대형 로펌의 규모를 복잡하지 않게 전달하는 것을 디자인의 출발점으로 삼았습니다.
딥 네이비를 바탕으로 골드를 포인트로 사용해 안정감과 격식을 만들고, 영상 배경의 메인 비주얼로 첫 인상에서 전문성과 활력을 함께 전달하도록 구성했습니다.
또한 업무분야 → 구성원 → 성공사례 → 지사안내 → 상담신청으로 이어지는 흐름을 같은 규칙으로 정리해, 사용자가 필요한 정보를 찾고 상담까지 자연스럽게 이어지도록 설계했습니다.
Design Elements
-
01
영상 배경의 메인 비주얼
PC와 모바일에 각각 다른 배경 영상을 적용하고 그 위에 브랜드 메시지를 배치했습니다.
첫 화면에서 로펌의 분위기를 전달하면서 상담 신청으로 바로 이어지도록 했습니다. -
02
카드형 업무분야 구성
20여 개의 업무분야를 같은 형식의 카드로 정리하고 ‘자세히보기’로 상세 페이지에 연결했습니다.
분야가 많아도 사용자가 자신의 사건에 맞는 항목을 빠르게 찾을 수 있습니다. -
03
구성원·성공사례 슬라이더
구성원 소개와 성공사례를 슬라이더로 구성해 많은 정보를 한 화면 안에서 넘겨 볼 수 있게 했습니다.
사건 분야와 결과가 함께 드러나 전문성을 구체적으로 확인할 수 있습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#CFA94E
- Soul Navy#254774
- Deep Navy#1D355F
- Midnight Blue#0F2A44
- Soul Gold#CFA94E
- Antique Gold#D4AF37
- Mist Gray#E6E6E6
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Noto Serif KR
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
많은 업무분야와 지사 정보를 동일한 규칙 안에서 일관되게 확장할 수 있도록 설계했습니다.
서브 페이지는 상단 배너와 본문, 주요 서비스 목록으로 이어지는 같은 구조를 사용했습니다.
업무분야와 구성원, 성공사례 모두 하단의 상담신청 영역으로 연결되도록 구성했습니다.
- Grid
- 구성원과 업무분야를 카드형 그리드로 정리해 항목이 늘어나도 같은 규칙으로 확장할 수 있습니다.
- Header
- 영상 위에서는 투명하게, 스크롤 시에는 블러 배경으로 바뀌어 메뉴 가독성을 유지합니다.
- CTA
- 골드 컬러의 CONTACT 버튼과 상담신청 폼을 일관되게 배치해 상담 동선을 분명히 했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PCMenu · PC 상단 메뉴와 우측 퀵메뉴(전화상담·블로그·온라인 상담·오시는 길)
MOMenu · 햄버거 메뉴로 전환하고 CONTACT 버튼은 골드 컬러로 강조
-
Layout
PCLayout · 구성원·업무분야를 다열 그리드로 배치
MOLayout · 한 열 중심으로 재배치해 터치 이동이 편하도록 구성
-
Typography
PCTypography · 큰 제목과 세리프 포인트로 격식 있는 위계
MOTypography · 제목과 본문 크기를 줄여 좁은 화면에서도 가독성 유지
-
Image
PCImage · 전체 화면 영상과 구성원 프로필 사진
MOImage · 모바일 전용 영상과 비율에 맞춘 프로필 사진
