본문 바로가기
UI,UX,접근성,기본개념 등

13가지 랜딩페이지 디자인 팁

by F.E.D 2022. 10. 30.

오늘은 랜딩페이지 디자인에 있어서 13가지 팁이 있는 좋은 글이 있어 소개 드리려고 합니다.

 

01. 텍스트가 있는 이미지에 색상 오버레이 사용

https://uxplanet.org/13-tips-for-improving-landing-page-design-849801372da4

02. 공간의 여백을 과도하게 사용하지 말 것

https://uxplanet.org/13-tips-for-improving-landing-page-design-849801372da4(이하 이미지 모두 동일, 출처 생략)

디자이너는 공간이 있는 디자인을 좋아하며 웹에서 더 많은 공간을 확보해야 한다는 의견을 항상 듣습니다.

그러나 함께 속한 요소 사이에 과도한 공간이 있으면 눈은 연결된 요소 위로 쉽게 흐르지 않고 더듬거리고 빈 공간에서 헤매게 됩니다.

03. 무리하게 장황한 워딩을 사용하지 말 것

웹사이트 분석을 본 사람이라면 누군가의 관심을 끌 시간이 매우 적다는 것을 알고 있습니다.

요점을 파악하세요.

04. 텍스트만 있는 레이아웃도 시각적으로 매력적이어야 합니다

랜딩 페이지의 텍스트 전용 섹션은 디자인하기 어려울 수 있습니다. 

특히 일러스트레이션, 아이콘 또는 사진을 사용할 기회나 리소스가 없는 경우에는 더욱 그렇습니다.

브랜드 색상과 타이포 그래피의 디테일과 통일성을 살펴보고 디자인을 향상시킬 수 있습니다.

05. 작은 아이콘, 큰 그림

아이콘은 훌륭하지만 적절성과 위치를 잘 파악해야 합니다.

크게 부풀리면 나쁜 예제가 됩니다.

제목이 있는 아이콘을 사용하는 경우 제목이 더 강조되기를 원할 것입니다.

06. 문자 자간을 아껴서 사용하세요

경험이 풍부한 타이포그래퍼가 아닌 경우 전체 대문자 제목에 자간을 줄이는 것이 좋습니다.

문장 대소문자 자간을 넓히면 가독성에 문제가 생길 수 있을 뿐만 아니라 서체 디자인의 자연스러운 리듬이 깨질 수 있습니다.

07. FAQ를 디자인할 때 한 라인의 글자 수를 살펴보세요

최적의 한 줄에 들어가는 글자 수는 공백과 구두점을 포함하여 45~75 사이입니다.

08. 가치를 보여주세요

이 예에서 실제 가치 제안은 거의 읽을 수 없는 자막에 숨겨져 있습니다. 

실사용자들의 얼굴을 추가해 사회적 증거에 진정성을 더할 수 있는 손쉬운 기회도 있습니다.

09. 사이즈가 작은 텍스트를 좋아하는 사람은 없습니다

10. 확률의 법칙을 적용하라

홀수의 요소로 디자인 될 때 더 많은 강조점을 부여할 수 있습니다.

만약 그것이 가능하지 않다면, 가장 약한 부분을 제거해버리세요.

11. 인지 과부하의 관리

가능한 경우 요소들을 잘 요약하고 줄이세요.

제목과 카피 사이의 크기 대비를 적용하고 시각적 계층 구조를 개선하고 레이아웃 사이의 공간들을 활용하여 사용자가 읽기에 차분한 환경을 만드세요.

12. 밝은 색상을 강조로 사용

배경색에서 밝은 색상을 사용하면 대비 문제가 발생하여 텍스트에 대한 기본 접근성 요구 사항에 잠재적으로 실패할 수 있습니다. 

버튼과 같은 작은 요소에서는 흰색 텍스트를 피해야 합니다.

13. 항상 회색 텍스트의 대비를 체크하세요

‍회색 텍스트를 사용하는 것은 텍스트 요소 간의 계층 구조를 만드는 데 널리 사용되는 기술입니다. 

그러나 이것은 종종 충분한 대비가 부족한 텍스트와 함께 심각한 접근성 문제로 이어집니다. 

온라인 도구를 사용하여 대비를 확인하고 보다 명확한 시각적 계층 구조를 설정해야 하는 경우 글꼴 크기의 대비를 높입니다.

 

 

 

 

출처 : https://uxplanet.org/13-tips-for-improving-landing-page-design-849801372da4

 

댓글