따뜻한 전문성으로 해답을 전하는 종합 법률 웹사이트
Design Concept
차분한 신뢰와 따뜻한 전문성
분야가 넓은 종합 로펌일수록 의뢰인이 자신의 사건에 맞는 정보를 찾기 어렵다는 점에서 디자인을 시작했습니다.
차콜 블랙을 바탕으로 브론즈 베이지를 포인트로 쓰고, 영문 세리프 타이틀과 완주 서체를 더해 무겁지만 차갑지 않은 분위기를 만들었습니다.
또한 구성원, 업무분야, 성공사례, 상담신청을 하나의 흐름으로 이어 사용자가 신뢰를 확인한 뒤 서울·대전·부산 사무소로 바로 문의할 수 있도록 설계했습니다.
Design Elements
-
01
16개 업무분야 분류 구조
형사부터 기업법무, 지식재산권, 의료까지 폭넓은 분야를 하나의 목록으로 정리해
사용자가 자신의 사건 유형을 바로 찾을 수 있도록 했습니다. -
02
결과 중심의 성공사례
혐의없음, 무죄, 집행유예 같은 결과를 사례 제목과 함께 먼저 보여주고 분야 분류를 붙여
어떤 사건에서 어떤 결과를 얻었는지 빠르게 확인할 수 있습니다. -
03
구성원 프로필 갤러리
변호사와 고문, 자문위원을 사진 중심 목록으로 구성해 전문가의 얼굴과 직함을 먼저 보여주고
신뢰감을 형성하도록 설계했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#B4977B
- Charcoal#222222
- Bronze Beige#917962
- Dark Gray#2B2B2B
- Soft Sand#B4977B
- Mist Blue#C1D1D5
- Light Gray#E6E6E6
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Wanjunuriche
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Times New Roman
가나다라마바사아자차카타파하
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이미지 비율과 개수를 모바일 폭에 맞게 줄여 로딩과 가독성을 함께 확보
