정윤선 디자이너님이 'Common webpage design mistakes'를 번역 및 가공한 글
원본 : 웹사이트 제작 서비스 Tilda Publishing에서 작성한 글
정보를 어떻게 하면 더 오롯이 전달할 수 있을까에 대한 방법에 대한 아주 담백한 글이다. 같은 이야기를 하는 것들끼리 규칙적으로 묶어 주고, 일관된 표현 방식을 유지하고, 뭐든 과하게 하지 말고... 그런 이야기들을 한다. 포인트는 여백, 규칙, 일관성, 간결함. 예시는 상세페이지로 들고 있지만, 디자인 영역 전반에서 통용 가능하다고 생각한다.
아래는 번역본의 요약본. 주의해야 하는 것들에 대해 이야기한다.
랜딩페이지
1.
콘텐츠가 논리적인 정보들의 단위로 나누어지지 않은 것
* 정보 사이 패딩을 120-180px 정도로 설정할 것
2.
정보 덩어리들 사이 간격을 불규칙하게 만드는 것
3.
사용자가 내용을 정보의 덩어리로 나누기 어려울 정도로 패딩이 너무 작은 것
* 최소 120px
4.
배경이미지와 텍스트의 대비가 낮지 않도록 할 것
* 이건 웹 접근성에 관한 부분과도 상통하는 듯하다.
5.
한 페이지 안에 너무 많은 스타일 지양
* 보통 동일 서식 + 굵기 or 색상으로만 강조
6.
색상 배경을 너무 좁은 부분에만 적용하는 것
7.
좁은 공간 안에 너무 긴 텍스트가 들어가는 것
8.
텍스트가 너무 많은 것
9.
텍스트를 이미지의 의미 있는 부분 위에 중첩하는 것
10.
시각적 계층 구조를 잘못 사용하는 것
* 중요한 것을 중요하게, 일관된 표현 방식으로
11.
연결된 정보가 분할되어 보이는 것
12.
제목이 너무 크고 긴 것
13.
버튼 테두리 스타일의 잘못된 사용
14.
너무 많은 색상 사용
15.
오버로드된 메뉴
텍스트 위주 페이지
1.
깜지형 텍스트의 나열
2.
헤드라인이 이전 단락과 다음 단락 사이, 동일한 거리에 배치되는 것
* 헤드라인이 시각적으로 어느 단락에 대한 수식인지 명확하게 보이도록 할 것
3.
논리적인 순서가 없는 것
* 대조를 활용해 여러 수준의 텍스트를 시각적으로 구분하고, 계층 설정하기. 노션처럼!
4.
블록 위-아래의 다른 패딩
* 2번과 같은 맥락이지만, 상반된 것을 주문
5.
캡션이 이미지에 너무 가깝게 배치
6.
부제목과 텍스트 사이의 공간이 적은 것
7.
스탠딩 아웃 요소가 본문과 너무 가깝게 배치
* 눈에 띄게 만들기 위해서 본문과 75-120px 정도 떨어지게 설정
8.
낮은 대비 요소
* 큰 핵심 문구를 일반 텍스트보다 10-15px 크고 굵은 글씨로 만들기 + 1.5~1.8배 사이즈
9.
좁은 텍스트 블록의 색 배경
* 그럴 바에 블록을 없애고, 텍스트 키우고 패딩을 줘서 강조
10.
두 개의 전체화면 이미지 사이에 빈 공간
11.
너무 많은 디자인 악센트
12.
너무 많은 타이포그래피 스타일
13.
긴 텍스트 가운데 정렬
14.
헤드라인이 이미지와 너무 가깝게 보이는 것
* 60px 이상의 여백
15.
불필요한 이탤릭체의 사용
16.
블록이 페이지 중앙이 아닌 다른 위치에서 나타나는 것
