코드는 나만의 비밀 다이어리가 아니야

더보기

이 포스트는 유명 랜딩페이지 디자인 분석 에서 학습한 기준점에 따라 배달의 민족 랜딩페이지를 분석한 글이다. 

배달의 민족 랜딩페이지: https://www.baemin.com/

배달의 민족 랜딩페이지 섹션별 디자인:

더보기

1.비주얼 컨셉

- CSS의 관점에서

브랜드 이미지를 각인시키기 위해 전체적으로 배달의 민족 앱 아이콘 색인 CMYK 65:0:29:0 (민트색) 으로 디자인하였다. 

색감을 최소한으로 사용함으로써 깔끔한 브랜드 이미지를 각인시켰다. 

자체제작한 폰트를 사용해 브랜드의 독창성을 강조하고, 일관된 헤더 사이즈와 왼쪽에 위치한 글의 구조로 깔끔함을 더했다. 전체적인 색감은 메인 로고와의 통일성을 잘 지켰다. 

또한 중간 하단에 '스크롤' 이라는 문자를 손글씨로 명시함으로써 더 많은 정보를 볼 수 있도록 친근하게 유도했다. 

오른쪽 중단에는 섹션(페이지) 의 총 갯수를 점으로 표현해 섹션의 이동에 따라 페이지의 위치를 시각적으로 알 수 있게끔 하고있다. 

상단 header는 sticky로 고정해 어느 section으로 이동해도 다운로드 버튼 (랜딩페이지의 궁극적 목표) 을 누를 수 있도록 만들었다. 

첫 섹션에선 다른 섹션들과 다르게 음식사진을 배경으로 함으로써 식욕을 자극, 사진 바로 하단에 다운로드 qr코드를 배치하면서 앱 사용을 유도했다. 

Catching phrase '공복에 떡볶이가 그리울 때' 또한 유저의 공감을 이끌어낸다.

글을 최대한 짧게 쓴 점 또한 가독성을 높인다.

2. UI 디자인적 완성도

전체 background 색상을 배달의 민족 상징색으로 설정했고, 그 위에 배달의 민족 자체 제작 폰트로 텍스트를 올린 형태이다. 큼지막한 헤딩의 크기는 적절하게 사용되었지만 부가설명을 위해 헤딩 밑이 작은 글씨로 쓰여진 글의 가독성이 떨어지는 단점이 있다. 

각 섹션마다 배민의 주요 기능들을 하나씩 소개하는 맥락으로 제작하였다. 

깔끔함을 위해서인지, 사용한 UI 컴포넌트가 많이 없다. 

CTA 목적 하나만 달성하기 위해서 애니메이션도 많이 넣지 않았다. 

반응형 웹 기법을 사용하였다. 어떤 창의 크기라도 디자인이 일관되게 깔끔하게 배치된다. 

컴퓨터보다는 폰으로 접속을 더 많이 한다고 판단한것 같다. 반응형 디자인이 폰 사이즈에 맞춰져있다. 

앱 다운로드나 클릭할수 있는 버튼들에 hover 기능을 붙였으면 더 좋았을 수도 있는데 붙이지 않은 모습이 보인다. 

왜인지 모르겠다. 

이건 공부해봐야할거같다. hover을 굳이 쓰지 않은 이유가 있나?

썼다면 유저 인터렉션 효과도 좋았을텐데 싶은 디자인이다. 사실 뭐가 버튼인지 모르겠다.

숨긴 버튼 찾기 이런건가...? 노린걸까...?

3. 컨텐츠의 내용과 맥락

딱 필요한 양의 컨텐츠만 담고있다. 

배달의민족 앱의 주요 성능들을 설명하였는데, 각 성능을 필요로 하는 사람들이 많이 모일거같다. 

하지만 앱 기능의 설명을 보충해주는 사진등이 있었다면 더 효과적이였을거 같다. 

전체적으로 사용자의 개별 체이지들에 대한 체류시간을 최소화할수 있게 만든 디자인이였다. 

이해하기 쉬운 깔끔한 레이아웃에 짧은 문구들이 효과적이였다. 

하지만 스크롤 시간은 생각보다 많이 걸렸다. 

스크롤을 내렸을때 바로 내려가지 않고 0.5초 정도의 딜레이가 있어보였다. 

다소 유저 입장에서는 답답함을 느낄 수도 있을거같다. 

유니콘 기업들의 랜딩페이지, 또는 웹사이트의 첫 페이지의 공통점에 대해서 디자인의 관점으로 분석해보았다. 

https://docs.google.com/spreadsheets/d/1kgtRAZQYZh5iIjf-FzfkiOXCY_5T0EkcASX_dyx2Dds/edit#gid=0

찾을때마다 추가할예정) 랜딩페이지 분석을 위해 IT기반 유니콘 기업들의 랜딩페이지와 홈페이지 url을 엑셀로 정리했다. 

UI 디자인 분석의 기준점

디자인 분석의 기준점으로는 다음과 같은 요소들을 두기로 했다. 

1. 비주얼 컨셉

2. UI 디자인적 완성도

3. 컨텐츠의 내용과 맥락

구글링하면서 찾은 리플러스 디자이너분께서 포스팅해준 글을 참고했다. 

https://brunch.co.kr/@clay1987/258

비주얼 컨셉 분석할 시 생각해야 할 것들

• 색상과 사진, UI에 들어간 애니메이팅이나 연출이 유저에게 어떤 영향을 줄까?
• UI요소의 레이아웃은 어떻게 배치하였고 이는 효과적인가?
• 일반 유저의 입장에서 이 사이트를 볼때 첫인상

UI 디자인적 완성도 분석시 생각해야 할 것들

• 개별 요소들이 적절하게 쓰여졌나?
• 주요 컨텐츠를 설명하기위해 어떤 UI를 사용했나?
• 개별 요소들의 비례나 크기, 색상 사용은 적절했나?
• 컨텐츠를 읽는데 UI가 제대로 도움을 줄 수 있었을까?
• 메뉴와 컨텐츠의 맥락 순서

컨텐츠의 내용과 맥락 분석시 생각해야 할 것들

• 적절한 내용과 설명을 담고있는가?
• 기술적으로 너무 어려운 내용은 아닌가?
• 사용자에게 얼마나 효과적으로 설명되었는가

배달의 민족 랜딩페이지 분석:

https://diatomicc.tistory.com/73

새로운 랜딩페이지 분석 시에 업데이트할 예정.