본문 바로가기
디자인/디자인 꿀팁

[디자인꿀팁] Web, App UI 여백 사용 꿀팁

by 개자이너 2023. 9. 1.
반응형

럭셔리한 디자인의 비결 : 여백

여백을 잘 사용한 디자인은 가독성이 좋기 뿐만 아니라 럭셔리함을 느끼게 한다. 그래서 대기업의 홈페이지나 고급화장품의 브로슈어 디자인 같은 경우 화려하지 않은데 압도감을 느끼게 하는 디자인이 많다. 그들의 공통점은 여백을 적절하게 또는 과하게 사용했다는 것이다. 별 것 넣지 않아도 느낌있게 적절히 여백을 사용을 할 수 있는 능력이 진짜 디자인 고수라고 느낀다.

 

https://www.youtube.com/watch?v=YNDhbNQo_io 

디자이너의 디자이너이신 마디아님 께서 올려주신 실무 여백 특강을 분석해보자!

여백이란?

각각 오브젝트 사이의 공간 값을 말하며 중요한 디자인 요소 중 하나이다. 

여백의 역할
  1. 집중해야 할 곳을 알려준다.
  2. 시선 분산을 막아준다.
  3. 여백을 활용한 그룹핑을 할 수 있다.
  4. 편안한 UI 서치에 도움을 준다.

모바일에서의 여백은 보통 4의 배수로 규칙을 정하곤 한다. 실무에서 4/8/12/16/24/32... 를 가장 많이 사용했다. 

조금 더 심화된 여백규칙 스터디를 위해 애플의 여백 규칙을 참고하면 좋다. 자간과 이미지의 간격에 황금비율을 사용했다고 한다.

 

https://yozm.wishket.com/magazine/detail/531/

 

UI 디자인에 여백을 활용하는 8가지 팁 | 요즘IT

훌륭한 UI 디자인이라는 것은 수많은 디자인 요소들부터 페이지 전체에 이르기까지, 그리고 아주 작은 부분에서부터 커다란 부분에 이르기까지 인터페이스의 모든 부분에서 여백을 신중하게 잘

yozm.wishket.com

https://brunch.co.kr/@ebprux/46

 

여백의 미를 고려한 UX 법칙

UX 디자인 배우기 #15 | Today UX 아티클 TheInteraction Design Foundation에 게재된 Mads Soegaard의 글 Thepower of white space를 소개하고자 합니다. 많은 요소가 인터랙티브 디자인의 구조와 레이아웃을 형성하는

brunch.co.kr

https://brunch.co.kr/@ebprux/610

 

UX 디자이너가 알아야 할 여백의 힘

UX 디자인 배우기 #131 | Today UX 아티클 오늘은 여백의 힘 에 대해 애기하고자 합니다. Nich Babich의 원문을 번역한 글입니다 여백(whitespace)란 페이지에 있는 요소들 사이 혹은 그 주변에 있는 빈 공

brunch.co.kr

 

반응형

댓글