웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
kimdirector is Creative Web & Mobile UI/UX Planner and Designer
WEBDESK
Web Plan Report
HOME WEBDESK Webplan Report
와이어 프레임에서 시각적 계층을 전달하는 방법
Posted by kimdirector | 2020.05.28 | Hit : 537
와이어 프레임  디자인  색상 
목록보기이전보기
색상 사용은 디자인에서 시각적 계층 구조를 전달하는 가장 좋은 방법 중 하나입니다. 그러나 와이어 프레임에서는 최악의 상황 중 하나입니다. 많은 설계자들은 계층 구조를 전달하기 위해 와이어 프레임에서 색상을 사용해야 한다고 생각합니다. 시각적 무게를 표시하기 위해 색상을 사용하는 경우 최종 디자인의 선명도가 떨어질 수 있습니다.
 

 
계층적 선명도를 흐리게 하는 색상
 
다른 모든 것은 흑백이므로 와이어 프레임에서 색상이 지정된 요소의 무게를 쉽게 볼 수 있습니다. 그러나 해당 와이어 프레임을 모형으로 변환할 때 해당 요소의 선명도가 같은지 알 수 있는 방법이 없습니다 .
 
모형에는 다른 색상이 경쟁하기 때문입니다. 와이어 프레임의 색상 요소가 더 이상 명확하게 나타나지 않습니다. 다른 페이지 요소에도 색상이 있으면 시각적 가중치가 줄어 듭니다.
 
 
색상 사용의 또 다른 위험은 많은 디자이너가 시각적 계층을 표시하는 기본 방법으로 색상에 의존한다는 것입니다. 와이어 프레임에서 요소를 색상으로 쉽게 표시할 수 있습니다. 그러나 시각적 계층이 없으면 얼마나 명확합니까?
 
디자이너가 다른 계층적 속성을 무시할 때 색상은 명확성을 위해 버팀목이 됩니다. 디자인 부족을 보완하기 위해 색상을 사용하지 마십시오. 디자인에는 명확한 계층 구조가 없어야 합니다.
 
많은 사이트에 색맹 사용자가 있기 때문에 색을 사용하는 것이 항상 효과적인 것은 아닙니다. 모든 사용자가 요소의 무게를 명확하게 하려면 디자인에 다른 속성이 포함되어야 합니다.
 
 
시각적 계층의 다른 특성
 
와이어 프레임에 색상을 추가하면 시각적 계층 구조의 강도를 측정하기가 어렵습니다. 색상이 다른 계층적 속성을 가리기 때문입니다. 색상을 피하면 해당 속성이 두드러집니다. 모형에서 색상의 시각적 무게가 사라지지만 이러한 속성은 그대로 유지됩니다.
 
크기
모든 요소의 크기가 같아야 하는 것은 아닙니다. 요소가 클수록 더 많은 관심을 끌게 됩니다. 크기가 작동하려면 요소가 주변의 다른 요소에 비해 커야 합니다.

 
모양
강조 표시하려는 페이지에 컨텐츠가 있을 수 있습니다. 당신은 색상과 크기에만 국한되지 않습니다. 모양을 사용할 수도 있습니다. 내용 주위에 상자를 배치하거나 선으로 구분하면 영역이 중요하다는 것을 알 수 있습니다.

 
놓기
사용자는 특정 패턴으로 페이지를 스캔합니다. 다른 것보다 더 주목을 받는 페이지 영역이 있습니다. 중요한 부분에 중요한 내용을 넣을 수 있습니다. 접힌 부분과 위쪽 및 왼쪽을 따라 사용자의 눈이 가장 많이 고정되는 위치입니다.

 
역색
색상은 계층적 선명도를 모호하게 하지만 역색은 추가할 수 있습니다. 대부분의 와이어 프레임은 밝은 배경에서 어두운 색을 사용합니다. 대부분의 사이트에서 종종 중립 배경색을 사용하기 때문입니다. 그러나 색상을 반전시키면 어두운 배경에 밝은 색상이 적용됩니다. 이것은 특정 색상을 제안하지 않고 색상을 전달하는 효과적인 방법입니다.
 
 
특정 색상을 제안하면 시청자가 해당 색상이 디자인의 나머지 부분에 어떤 영향을 미치는지 궁금해 할 수 있습니다. 그것은 와이어 프레임에서 원하는 것이 아닙니다. 당신은 그들이 구조와 레이아웃에 집중하기를 원합니다.
 
강한 색 채우기가 필요한 인터페이스 요소에는 역색을 사용해야 합니다. 버튼, 메뉴 및 알림은 사용자가 상호 작용하기 때문에 시각적으로 명확해야 합니다. 그러나 그렇게 하지 마십시오. 모든 요소가 밝게 표시되면 계층 구조가 손실됩니다.
 
 
와이어 프레임 패턴
 
시각적 계층 구조를보다 쉽게 전달할 수 있는 와이어 프레임 툴킷이 있습니다. 우리가 디자인한 와이어 프레임 툴킷을 얻을 수 있습니다 :  와이어 프레임 패턴 . 각 UI 패턴은 색상을 사용하지 않고 시각적 무게와 선명도로 설계되었습니다.
 
 
색상이 없는 시각적 계층
 
시각적 계층이 색상없이 명확하지 않으면 디자인에 충분한 특성이 사용되지 않습니다. 색상없이 시각적 계층 구조를 전달할 수 있을 뿐만 아니라 필요합니다.
 
그렇게 하면 구조와 레이아웃의 선명도를 측정할 수 있습니다. 색상없이 선명하지 않은 와이어 프레임은 강력한 계층 구조가 없는 와이어 프레임입니다. 색상을 추가해도 문제가 해결되지 않으며 더 나은 디자인입니다.
 
자세한 내용은 원문을 확인하시기 바랍니다. 본내용은 번역한 내용으로 의역이 있을 수 있으며, 추가적인 설명이 포함되어 있으니, 참고하시기 바랍니다.
Posted by kimdirector | 2020.05.28 | Hit : 537
Origin https://uxmovement.com/wireframes/how-to-communicate-visual-hierarchy-on-wireframes/
Tags 와이어 프레임  디자인  색상 
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webplan&no=286

COMMENT
목록보기이전보기
WEBDESK
Webdesign Report
Web Plan Report
Inspiration
Web Development
Recommend Site
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile Work IT Information Web Identity Work Everyday Mobile Life Webdesign Web Development Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site  ETC. Work  Artwork  Typography Work
Tags
CIP OS 스마트워치 본명조 PSD 트렌드 테크놀로지 폰트 플래시 스크립트 디자인 미래 프로그램 UX 설문 웹표준 학습지수 O2O 일러스트 사진 원격 데스크톱 HTML5 파이어폭스 폰트 스타일 프로세스 디자인 아시아 서비스 레이아웃 pxd 미래 워드프레스 iOS 중소기업 디지털 속도 메인화면 로고 홈페이지
Recommend Tags
디자인 씽킹 퍼스널 브랜드 사용자 경험 서비스 디자인