Accent Color - 실용적인 색, 배경색들과 대조되는 색상, 보통 밝은 색을 사용하며 강조를 위해 사용한다.
Tint Color - 어떤 요소가 활성화되었는지 보여주는 색상 변화. 예를 들면 버튼 눌렀을 때 좀 더 밝은(어두운) 색으로 변했다가 손가락 떼면 원상복귀.
스케일의 원리는 상대적인 크기를 사용해 구성 내에서 중요성과 순위를 나타내는 것
다른 말로 하면, 중요한 요소는 덜 중요한 요소보다 사이즈가 더 크다. 왜? 크기가 크면 눈에 더 잘 띄기 때문이다.
즐거움을 주는 디자인은 3개 이상의 사이즈를 사용하지 않는다고 한다.
페이지에서 어디를 보아야 할지 안내하여 중요도에 따라 디자인 요소에 주의를 기울이도록 하는 것.
스케일 ,값, 색상, 간격, 배치 및 기타 다양한 신호의 변화를 통해 구현한다. 만약 현재 페이지에서 무엇을 보아야 할지 명확하지 않다면 그 디자인 레이아웃은 명확한 시각적 위계를 가지고 있지 않은 것임.
중요 요소에 밝은 색을 활용하고, 덜 중요한 요소에는 무드 톤의 컬러를 배치하는 것이 대표적
설계 요소의 만족스러운 배열, 또는 비율을 의미한다.
화면 중앙을 기준으로 하나의 축이 있다고 했을때, 양쪽으로 동일하게 컨텐츠가 분포하고 있다면 균형이 잡혀있는 것이다. 이 축은 수직일수도, 수평일 수도 있다.
무게를 잰다고 생각하자. 축을 기준으로 한쪽엔 큰 컴포넌트, 다른 쪽엔 작은 컴포넌트가 있다면 균형이 잡혀있다고 생각하지 않는다.
디자인을 할 때 상상의 축을 기준점 삼아 레이아웃을 그리는 것이 균형상태를 체크하고 이해하는데 중요하다.
🧡 어도비색상 팔레트
💚 Radix 색상 팔레트
https://www.radix-ui.com/colors/custom
컴포넌트 갤러리
목업제작 사이트
https://mockuphone.com/type/all/
머터리얼 디자인
아이콘 모음집
애플 HI 디자인 가이드
UX디자인 모음 사이트
https://www.gdweb.co.kr/main/index.asp
framer - web publishing 사이트
https://www.framer.com/@metalab/
허브형
방사형
비대칭(다이나믹한 이미지)
비대칭
사용자에게 일부 영역의 디자인을 강조해서 전달할 때 자주 사용되는 원칙이다.
대비는 서로 비슷한 위계나 컨텐츠를 가진 요소들이 서로 다르다는 사실을 전달하기 위해 시각적으로 서로 다른 요소들을 병치하는 것을 말한다.
대비를 위해서는 대상을 시각적으로 구분할 수 있도록 한다. (사이즈, 컬러 등을 활용)
대표적으로 UI에서는 레드 컬러를 중요한 것을 삭제시킬때 등장한다.(ios등)
인간이 이미지를 어떻게 이해하는지 연구하는 게슈탈트 심리학에서 비롯되었다.
인간이 어떻게 여러 요소로 구성된 복잡한 이미지를 단순화 시키고 구조화시키는가? 인간은 복잡한 이미지를 각기 다른 종류의 요소로 인식하는게 아니라, 무의식 중에 구조화된 시스템으로 이해하고 그것을 하나로 이해한다.
즉, 게슈탈트의 원리는 인간이 어떻게 개별 요소로 구성된 이미지를 하나의 전체로 엮어내서 이해하는지를 설명한다.
https://brunch.co.kr/@dhlee702/13