UI디자인 텍스트, 크기조절 보다 굵기,밝기 조절로 하자 / 요소간 구분시 테두리,선 말고 여백, 배경색, 쉐도우 활용 / 버튼 디자인도 계층 존재

원문 : 실용적인 7가지 디자인 팁
http://koreawebdesign.com/practical-tip-7-for-designer-and-developer/
10분 만에 더 나은 UI 디자인 만들기
https://brunch.co.kr/@gilberthan/32

UI 디자인 시 텍스트 강약 조절은

• 크기 조절보다 굵기 조절이나 밝기 조절로 하라.
• 굵기는 2단계, 밝기는 2~3단계 사용하기
• 통일감을 주기 위해 굵기(폰트 웨이트), 밝기(색)는 미리 가이드로 잡아두기
• 컬러 배경에서는 무채색 텍스트 사용 자제, 컬러톤에 맞는 텍스트 사용 (투명도 빼기)
• UI 디자인 시 요소 간 구분을 줄 때

 

왼쪽은 4개 텍스트 사이즈, 오른쪽은 2개 텍스트 사이즈와 굵기, 밝기 활용
1. 메인 콘텐츠 - 굵고 진한 색 (#000 사용금지)
2. 서브 콘텐츠 - 진한 회색
3. 부가 정보 - 옅은 회색

UI 디자인 시 요소 간 구분을 줄 때

• 테두리, 선 사용 자제 - 효과 좋은 방법이지만 너무 많이 사용하면 답답함
• 그밖에 박스 쉐도우도 있고 (그림자 길이, 넓이 등에 따라 계층 가능, 따라서 통일된 가이드 필요)
• 배경색을 다르게 하여 면 분할하는 효과도 좋고
• 여백으로도 구분할 수 있음 - 다만 일관성 있는 간격 가이드를 준비해야 함

 

 

UI 디자인 시 버튼 디자인도 버튼별 계층이 존재합니다.

주 버튼 : 자주 누르는 버튼, 눌러야 하는 버튼은 고대비 배경색으로 작업
부버 튼 : 일반적인 버튼, 버튼임만 알려주면 됨, 테두리나 대비가 낮은 배경색으로 작업
기타 버튼 : 있어야 하지만 잘 안 쓰는 버튼, 존재는 하지만 안 써도 되는 버튼으로 간단하게 텍스트 혹은 밑줄로 작업
비활성화 버튼(안 눌러지는 버튼) : 비활성화 버튼은 회색으로 하지 말고, 디자인 투명도를 내려서 작업

반드시 위 규칙대로 작업을 하는 것이 아니라
위 규칙처럼 계층 가이드를 정하고 작업을 하는 것이 중요