누구나 PD가 되는 크리에이터 비디오 판매 플랫폼 웹사이트
Design Concept
누구나 PD가 되는 무대
창작자에게는 안심하고 판매할 수 있는 무대를, 구매자에게는 필요한 비디오만 구매하는 간단한 경험을 주는 것을 디자인의 출발점으로 삼았습니다.
밝은 화이트 바탕에 선명한 블루를 기본으로 하고 “누구나 PD가 될 수 있다” 문구를 반복해 흐르는 띠로 배치해, 서비스의 정체성이 스크롤하는 내내 이어지도록 했습니다.
또한 Web과 App 두 서비스를 같은 구조로 나눠 소개하고, 입점 문의는 블로그의 Contact us로 연결해 창작자가 바로 문의할 수 있도록 설계했습니다.
Design Elements
-
01
흐르는 슬로건 마키
“누구나 PD가 될 수 있다”와 Value-Based, Data-Driven, Creator-Focus 문구가 가로로 계속 흐릅니다.
서비스의 핵심 가치를 읽지 않아도 인상으로 남깁니다. -
02
Web과 App 두 갈래 소개
PDing Web은 비디오 판매를, PDing App은 채널 운영과 고객 지원 도구를 따로 설명합니다.
방문자가 자신의 역할에 맞는 서비스를 클릭 한 번으로 찾을 수 있습니다. -
03
개별 구매와 수수료 안내
3일, 7일, 영구 접근 같은 시청 기간 옵션과 PD 등급별 수익 비율을 구분해 보여 줍니다.
창작자가 판매 조건을 이해하고 입점을 판단하기 쉽습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#F45050
- Deep Blue#036DE4
- Ink Black#222222
- Warm Gray#7F7F7F
- Light Gray#E6E6E6
- White#FFFFFF
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Paperlogy
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Taenada
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
서비스 소개 페이지와 서비스 내부 화면이 같은 규칙으로 이어지도록 설계했습니다.
내 피드, 검색, 프로필, 레벨, 메시지, 공지사항, 상점이 같은 좌측 메뉴 구조를 공유합니다.
소개 페이지에서 서비스 화면으로 이동해도 같은 블루 컬러와 서체를 유지합니다.
- Grid
- 서비스 소개, 기능, 지표를 번호가 붙은 섹션 단위로 나누어 구성했습니다.
- Header
- 로고, 블로그, 문의, 회원가입, 언어 선택을 상단에 모아 두었습니다.
- CTA
- SIGN UP과 Contact us 버튼, 신청하기 버튼을 주요 섹션마다 반복했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PCMenu · 블로그, 문의, 회원가입을 상단에 한 줄로 배치
MOMenu · 작은 화면에 맞춰 핵심 버튼 중심으로 간소화
-
Layout
PCLayout · 번호가 붙은 섹션을 넓은 화면에서 좌우로 배치
MOLayout · 한 열 세로 흐름으로 재배치
-
Typography
PCTypography · 큰 슬로건과 영문 섹션 라벨의 대비
MOTypography · 화면 폭에 맞게 글자 크기 조정
-
Image
PCImage · 서비스 화면 이미지와 앱스토어 평점 요소
MOImage · 모바일 비율에 맞춰 재구성한 서비스 이미지
