웹디자인의 완성도를 올려 줄 8가지 체크리스트

조그마한 디테일이 웹사이트의 완성도를 좌우합니다. 이 글은 웹디자인의 디테일을 떨어트리는 사소한 실수를 다루려고 합니다. 아직 디자인 경험이 충분하지 않다면, 웹사이트의 완성도를 높여줄 8가지 체크리스트를 배워보세요

*아래 예시들은 원글 작성자에게 피드백을 요청한 웹 사이트입니다.

1. 템플릿의 부적절한 활용

템플릿은 여러분의 작업시간을 단축해주지만, 디자인의 통일성이 떨어질 수도 있습니다.

템플릿을 사용하면서 생기는 공통적인 문제는 여러분이 준비한 로고와 통일성이 떨어진다는 점입니다. 로고의 컬러가 웹사이트 어디에도 찾을 수 없거나, 사이즈가 안 맞아 엉성해 보이는 경우가 많습니다.

템플릿을 사용했을 때는 반드시 디자이너의 재가공이 필요합니다. 템플릿이 깔끔하더라도 템플릿의 기본 스타일을 쓰지 않길 권합니다.

2. 타이포그래피 대비 이슈

타이포그래피에서 보이는 자주 보이는 문제는 제목과 본문 폰트 차이가 별로 없다는 점입니다. 사이즈와 굵기를 조절한다면 간단하게 해결될 것입니다. 이렇게 가공해주면 사용자들이 순서대로 볼 수 있는 위계가 생길 것입니다.

3. 한 페이지에 똑같이 가공된 UI

위의 예시처럼 한 페이지 비슷한 크기와 색깔을 가지고 있는 CTA(행동유발)버튼이 있다면, 사용자는 헷갈릴 수밖에 없습니다. 가장 좋은 방법은 UI를 최소화하는 것이지만, 그것이 어렵다면 크기나 색상을 다르게 가공해서 차별을 주는 방법이 좋습니다.

4. 그리드와 여백

여백은 적당히 유지하되, 너무 많이 떨어지지 않도록 해야 합니다. 그러므로 애매하면서 어려운 부분이지요. 하지만 간단한 방법으로 정리할 수 있는데요. 첫 번째로 모든 요소가 따로 그룹 지을 수 있는지 확인합니다. 그다음에 그 그룹끼리의 여백이 적당한지 체크하면 어렵지 않을 것입니다.

5. 전문성 없는 문구

문구를 쓰는 것은 어렵지만, 여러분의 의도를 웹으로 정확하게 전달하기 위해서는 필수입니다. 특히 여러분이 어떤 제품을 판매하신다면, 문구가 쉽고 정확한지 지인들에게라도 검수를 받아야 합니다.

6. 가독성 이슈

아무리 문구가 좋더라도 그것을 읽을 수 없다면 무용지물이겠지요. 행간, 폰트, 대비 등 가독성을 위해 하나하나 신경 써야 합니다.

저를 비롯한 작은 글씨를 선호하시는 분들이 있습니다. 하지만 라이브가 되는 다양한 환경을 고려해서 조금 크게 작업할 필요가 있습니다. 이 이슈는 모바일에서 더욱 문제가 되는데요. 모바일 디자인을 하실 때는 테스트 기기에서 보면서 작업하는 것을 권유 드립니다.

7. 일관성 없는 디자인

디자인에서 일관성은 매우 중요합니다. 온라인 콘텐츠에서 오프라인 콘텐츠까지 하나로 묶어주면서, 고객들이 여러분의 브랜드를 인지하는 데 큰 힘을 발휘합니다.

하지만 그전에 여러분의 웹사이트부터 일관성이 잘 지켜졌는지 확인해야 합니다. 로고의 키컬러가 다른 곳에서도 똑같이 적용되었는지요? 요소의 여백이 그때그때 다르지 않나요? 혹은 선의 색상이 매번 다르지 않았나요?

물론 예외의 상황도 있겠지만, 이 부분은 퍼블리셔와 함께 스타일가이드를 잡으면서 소통하면 어느 정도 해결될 것입니다.

8. 유행이 지난 디자인

스큐어모픽 디자인은 유행이 많이 지나버렸습니다. 그라데이션, 그림자, 질감 등 3d 효과로 밀도를 올리기보다는 플랫디자인을 시도해보세요.

아주 뻔한 얘기들이지만 아직도 많은 사이트가 지켜지지 않고 있습니다. 여러분들도 위의 8가지 체크리스트를 가지고 더욱 완성도 있는 웹사이트를 만들어 보세요.

출처: designmodo

by 원숭이 발자국