성범죄 변호사 상담 홈페이지 | 성범죄변호센터 이김
변호사 소개 → 무죄·불송치 등 결과 사례 → 사건 진행 단계 → 의뢰인 후기 → 자주 묻는 질문 → 입장 선택형 진단 폼 → 지사 안내·오시는 길 순으로 구성했습니다.
청록색과 검정 대비로 무게감과 안정감을 주고, 변호사 사진을 반복 배치해 ‘이 사람에게 맡기고 싶다’는 인상을 남기도록 설계했습니다.
Design Concept
결과로 증명하는 변호사
성범죄 사건은 의뢰인이 가장 두려워하는 상황이라, 변호사 한 사람의 얼굴과 말투가 신뢰의 출발점이 되도록 했습니다.
큰 인물 사진과 짧고 단정한 문장으로 ‘이런 사람입니다’라는 메시지를 앞에 두었습니다.
청록색 블록과 검정 블록을 번갈아 배치해 긴 페이지에서도 흐름이 지루하지 않게 구성했습니다.
Design Elements
-
01
결과로 보여 주는 사례
대표 결과를 번호 목록과 후기 카드로 정리했습니다.
말보다 결과가 먼저 읽히도록 설계했습니다. -
02
사건 단계별 특별함
사건 발생부터 조사, 재판까지 4단계를 이미지 카드로 연결했습니다.
어느 단계에서 어떤 도움을 받는지 직관적으로 이해되도록 구성했습니다. -
03
입장 선택형 진단 폼
피의자·피해자·제3자 중 입장을 고르는 단계형 폼을 두었습니다.
긴 입력 대신 선택만으로 상담 문턱을 낮추도록 설계했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#D93A3A
- Black#111111
- Light Gray#F5F5F5
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PCMenu · 상단 가로 메뉴와 상담 버튼
MOMenu · 햄버거 메뉴
-
Layout
PCLayout · 풀폭 섹션 + 중앙 정렬 본문
MOLayout · 1단 세로 스택
-
Typography
PCTypography · 굵은 헤드라인 중심
MOTypography · 헤드라인 크기 단계별 축소
-
Image
PCImage · 변호사 인물 사진 비중 큼
MOImage · 인물 중심 크롭
이런 홈페이지, 우리 법무법인도 가능할까요?
변호사 · 법무법인 홈페이지만 100개 이상. AI 검색 노출 설계까지 기본으로 넣어 드립니다.
