The UI&UX tips collection (3)
21. 이미지로부터 색상을 가져와 적용하라
단순히 제품 이미지의 색상을 가져와 배경, 텍스트, 아이콘 등에 다양한 틴트와 셰이드를 적용하는 것만으로도 시각적인 재미를 줄 수 있고 디자인의 개성을 살릴 수 있다.
22. 행간은 폰트의 x-height에 맞춰서 적용하라.
폰트의 x-height가 다르면 행이 잘 분리되게 보이게 하기 위해 행간을 다르게 적용해야 한다.
두 폰트가 똑같은 크기인데도 x-height가 크게 차이 난다면 x-height에 맞춰 행간을 올바로 적용해야 한다.
예를 들면 시각적인 가독성을 확보하기 위해 Merriweather는 x-height가 높아서 큰 행간이 필요한 반면에, x-height가 작은 Mr Evas Sans는 작은 행간을 필요로 한다.
23. 가장 중요한 요소를 돋보이게 하라.
폰트 크기와 무게, 색상, 레이아웃을 조합하여 UI에서 가장 중요한 요소를 손쉽게 돋보이게 할 수 있다. 간단하면서도 미묘한 조정이 사용자 경험을 좀 더 좋게 만들 수 있다.
24. 폼 에러에 시각적인 도움 요소를 추가하라.
사용자가 어떤 형태의 폼을 채울 때 방금 수행한 액션 근처에 에러 메시지를 보여주는 것은 간단하지만 도움이 된다.
25. 모바일에서는 터치 영역을 충분히 제공하라.
모바일 앱을 디자인할 때에는 성공적으로 터치할 수 있도록 터치 영역을 충분히 크게 적용해야 한다.
텍스트로만 이루어진 버튼이나 링크에는 충분한 크기로 적용하기 어려울 수 있으므로 가능하면 아이콘과 레이블을 같이 적용하는 것이 좋다.
iOS와 Android에서 제안하는 최소의 터치 영역은 다음과 같다.
44 x 44pt for iOS
48 x 48dp for Android
26. 대문자로만 이루어진 타이틀은 소제목 같은 짧은 타이틀에만 적용하라.
타이틀을 모두 대문자로 적용하고 싶다면 타이틀이 매우 짧고 한 줄로 표현이 가능한지 확인하여라. 긴 텍스트를 대문자로만 표현하는 것은 좋은 생각이 아니다.
대문자로 된 타이틀은 Kicker(소제목)에만 적용하는 것이 가장 좋다. 보통 타이틀 위에 적용하는 소제목은 짧고 몇 개의 단어로만 이루어져 있다. 그리고 대문자로만 적용하기에 적합한 요소이다.
그리고 대문자로만 된 타이틀에 자간을 좀 더 주면 숨 쉴 공간이 생기면서 시각적으로 보기 좋아진다.
27. 밝은 색상의 텍스트와 이미지는 대비를 충분하게 주어라
밝은 색상의 이미지 위의 밝은 텍스트는 잘 보이는지 항상 확인을 해야 한다.
단순히 텍스트 밑에 약간 어두운 반투명 배경을 적용하는 것만으로도 텍스트와 배경 사이의 대비를 충분히 확보할 수 있다.
그리고 텍스트 색상을 매번 변경하지 않고도 배경 이미지를 밝고 어두운 배경으로 쉽게 변경할 수 있다.
28. 제목에 완벽한 폰트들
디자인에 개성을 줄 수 있는 제목에 어울리는 세리프와 산세리프 상용 폰트들이다. fonts.adobe.com에서 찾을 수 있다.
29. 본문에 완벽한 폰트들
내가 길이가 긴 본문 텍스트에 사용했던 폰트들로 강력히 추천한다.
역시 fonts.adobe.com에서 찾을 수 있다.
30. 제목과 본문에 수직적인 리듬을 주어라.
수직적인 리듬감과 디자인의 텍스트 요소 사이에서 강력한 시각적 계층구조를 만들려면 여백을 계층에 맞게 적용하는 것이 좋다.
일반적으로 기사 목록에서 제목에 상단과 하단 여백을 동일하게 적용하여 제목과 본문이 잘 연결되지 않는 디자인을 많이 보았다.
이런 경우에는 항상 제목에 상단 여백을 더 많이 적용하고 하단에는 덜 적용하면 제목과 하단 콘텐츠 간의 연결이 더 강해지고 수직적인 리듬감이 생기며, 모든 항목 사이에 시각적인 계층구조가 생기게 된다.
31. 다운로드를 표시할 경우에 충분한 정보를 제공하라.
다운로드를 표시할 경우에는 미니멀한 디자인을 피해야 한다.
사용자를 위해 다운로드를 표시할 때에는 가능한 한 정보를 충분히 제공하고 사용자 친화적으로 만들어라.
이를 위하여 색상, 현재 진행 상황을 보여주는 퍼센트 수치 및 언제든지 다운로드를 취소할 수 있는 아이콘을 사용하라.
32. 제목을 짧고 간결하게 유지하라.
가능하면 제목을 짧고 간결하며 요점만 간단하게 유지하라.
예를 들면 'It's your style, and your way' 대신 'Your style. Your way'과 같은 문장을 사용하라.
제목을 짧고 강력하게 만들면 사용자가 정보를 훨씬 빠르게 소화할 수 있다.
33. 올바른 서체를 선택하여 디자인에 올바른 '목소리'를 제공하라.
텍스트를 적용할 때 서체의 종류에 따라 텍스트가 말하는 느낌이 달라진다. 크거나, 부드럽거나, 친절하거나, 격식을 차리거나, 진지하거나, 재밌게 만들 수 있다.
각 서체는 고유한 목소리를 가지고 있고, 작업 중인 프로젝트에 적합한 목소리를 찾아라.
서체를 많이 사용해보지 않았다면 어려운 작업일 수도 있지만, 유사한 프로젝트에서 영감을 받고 아이디어를 가져와 적당한 서체를 선택하라.
34. 본문 텍스트의 줄 길이를 적당하게 적용하여 가독성을 향상해라.
본문 텍스트의 줄 길이를 적절하게 하여 벨런스를 만들어라.
페이지의 한 칼럼의 한 줄에는 45~75자의 텍스트가 적합하며, 66자(문자와 공백을 모두 포함하여)가 가장 적합한 것으로 알려져 있다.
물론 폰트 크기와 줄 높이도 가독성에 영향을 미치지만 줄 길이는 45~75자 가이드라인을 유지하는 것이 적당하다.
원문 출처 : https://uxdesign.cc/the-ui-ux-tips-collection-volume-one-f69f0969ed17
