상간소송·상간피해자 변호사 상담 랜딩페이지
첫 화면 변호사 비주얼과 상담 바로가기 → 선택 이유 → 고객 리뷰 → 대표 변호사 인사말 → 진행 프로세스 → 자주 묻는 질문 → 상담 신청·카카오톡 문의 순으로 구성했습니다.
흑백 사진에 붉은 포인트 컬러를 더해 시선을 상담 버튼으로 모으고, 손글씨 로고로 브랜드 개성을 살렸습니다.
Design Concept
우아한 복수, 단단한 상담
감정이 격해지기 쉬운 주제를 차분하고 품격 있게 풀어내는 것을 컨셉으로 삼았습니다.
흑백 이미지와 붉은색 포인트의 대비로 신뢰감과 단호함을 함께 전달했습니다.
손글씨 로고와 짧은 문장형 헤드라인으로 브랜드 이름의 인상을 남기도록 구성했습니다.
Design Elements
-
01
붉은 상담 유도 띠
첫 화면 아래에 ‘상간 피해자를 대리합니다’ 문구와 상담 바로가기를 붉은 띠로 두었습니다.
스크롤을 시작하기 전에 행동을 안내하도록 설계했습니다. -
02
고객 리뷰와 프로세스
리뷰 카드를 가로로 흘려 보여 주고, 진행 4단계를 아이콘 카드로 정리했습니다.
상담 이후의 과정을 미리 이해할 수 있도록 구성했습니다. -
03
FAQ와 카카오톡 연결
자주 묻는 질문을 아코디언으로 접고 펼치게 했습니다.
하단 상담 폼 옆에 카카오톡 문의를 함께 두어 접수 경로를 넓혔습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#E03A3A
- Dark Gray#2B2B2D
- Light Gray#F0F0F0
- 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 검색 노출 설계까지 기본으로 넣어 드립니다.
