비디자이너를 위한 5분 가이드
디자이너가 아니라도 기획 일을 하는 사람이라면 자신의 사이트, 앱 등을 보면서 무엇이 문제가 있는지 더 좋은 디자인이 어떤 것인지 알아야할 수 밖에 없다. 미디엄에 올라온 비디자이너를 위한 짧은 5분 가이드를 소개한다.
디자인을 배울 수 없다고 생각한다면 그룹 너바나에서 드럼을 맡고 있는 데이브 그롤(David Eric Grohl)이 한 말을 기억하라.
I never took lessons to play the drums. I never took lessons to play the guitar. I just sort of figured it out. I think that if you’re passionate about something and you’re driven and you’re focused, you can do anything you want to do in life.
"나는 드럼을 치기 위해 배운 적이 없다. 나는 기타를 치기 위해 배운 적도 없다. 나는 그것을 어떻게 해야할지 알아냈다. 내 생각에 무엇인가에 열정을 가지고 있고, 당신이 그것을 주도하고 집중한다면 당신은 인생에서 하고 싶은 모든 일을 해낼 수 있다."
1. 많이 비교하라.
배경과 폰트색은 눈의 피로를 유발하지 않아야 한다. 일반적으로 흰색 배경의 검은 색 텍스트가 가장 읽기 쉬운 경향이 있다. 밝은 회색, 노란색과 녹색을 멀리 하라. 만약 당신이 읽는 것을 가늘게 뜨고 보아야 한다면 당신이 문제가 있다는 것을 알게 된다.
2. 검은 색보다 덜 진한 검은색이 읽기에 쉽다.
순수한 검정색보다 #333333 RGB(51,51,51)을 사용하라. 순수한 검정색은 글자에 집중하기 어렵다.
3. 중요한 콘텐츠가 먼저이다.
가장 중요한 정보를 먼저 배치하여, 앱이나 웹사이트에서 주요하게 사용하도록 명확하게 지원하라.
중요한 콘텐츠는 확대하거나 스크롤, 탭하지 않고 볼 수 있어야 한다.
유명사이트에서 괜찮은 시각적 계층 구조의 몇 가지 예를 볼 수 있다.
- Instagram (위)은 사용자가 게시한 사진, 비디오에 명확한 초점을 맞춘다.
- Pinterest (오른쪽, 아래)는 아래 멋진 Grid 아래 검색창을 맨 위에 고정하여 시각적 계층 구조를 만든다. Pinterest가 페이지의 첫 번째 항목으로 검색창을 넣는 것은 매우 의도적이다.
검색은 앱의 핵심 기능이며 사람들은 Pinterest를 사용하여 발견하고 탐색한다.
두 개의 예제를 더 살펴보자
- Spotify (아래, 왼쪽)는 명확하게 앨범 아트 및 노래 제목을 먼저 보여주고, 플레이어 조절은 2번째로 노출한다. 플레이어 조절이 두번째라도 Spotify는 빨리감기와 되감기 보다 재생 및 일시정지 버튼에 더 많은 비중을 부여한다.
- Instagram과 매우 유사하게 보이는 페이스 북 (아래, 오른쪽)은 친구의 콘텐츠를 앞 쪽과 중앙에 둔다.
4. 모든 것을 정렬하라
좋지 않거나 이상한 것을 고치는 가장 빠른 방법은 정렬이 되어 있는지 확인하는 것이다. 디자이너가 "그리드"사용의 필요성에 관해 이야기 할 때, 그들은 팀에게 잘못된 정렬에 대한 문제를 경고 하려는 것이다.
정렬을 고치는 것은 앱이나 웹 사이트를 가장 쉽게 개선 할 수 있는 방법 중 하나이며, 앱이나 웹 사이트를 즉시 10 배 더 멋지게 만들 수 있다.
From: https://developer.apple.com/design/tips/
미디엄(Medium) 사이트의 다른 정렬의 예를 살펴보자.
Medium.com에서 수정한 웹 레이아웃이다. 어떻게 보이나?
이 레이아웃에 대해 아무 느낌이 없는가?
힌트 : 왼쪽 가장자리의 정렬을 확인하라. 어떻게 보이는가?
왼쪽에서 잘못된 정렬로 인해 발생하는 시각적 흐름을 강조했고, 오른쪽에서는 모든 주요한 콘텐츠 블록을 정렬했다.
