설계 과정에서 와이어프레임이 중요한 이유
게시 됨: 2017-01-29와이어프레임은 설계 프로세스 초기에 사용성 문제를 식별하는 빠르고 효과적인 방법입니다.
웹 디자이너라면 와이어프레이밍에 익숙할 것이며 저와 같은 사용자 경험(UX) 디자이너라면 종이와 연필로 손으로 와이어프레임을 만들거나 Proto.io 와 같은 디지털 도구.
이 기사는 와이어프레임이 설계 프로세스에서 중요한 역할을 해야 하는 이유 에 대해 더 자세히 알고자 하는 용어를 들어본 사용자를 위한 것입니다. 또한 관련 이해 관계자 및 고객과의 대화에서 이를 가장 잘 활용하는 방법도 다룰 것입니다.
"와이어프레임이란 무엇입니까?"라는 질문에 답하는 것으로 시작해 보겠습니다.
나는 페이지의 뼈대와 같은 와이어프레임에 대해 생각하는 것을 좋아합니다. 이 골격은 페이지의 요소 간격, 콘텐츠의 우선 순위, 사용 가능한 기능 및 사용자가 사이트와 상호 작용하는 방법을 보여주는 페이지 인터페이스의 2차원적 묘사입니다. 또한 다양한 페이지 사이의 경로를 표시하여 정보 아키텍처를 디자인의 시각적 측면과 연결하는 데 중요한 역할을 합니다. 와이어프레임에는 의도적으로 색상, 그래픽 및 양식화된 글꼴이 없습니다.
시작할 강력한 스켈레톤이 없으면 기능이나 스타일과 같이 그 위에 올려 놓는 모든 것이 실제로 가능성이 없습니다.
새 집을 짓는 과정을 생각해 보십시오. 집 구조의 청사진보다 벽의 색상과 소파의 패브릭과 같은 인테리어 디자인에 모든 에너지를 집중한다면 그것이 그 목적을 달성 할 것이라고 생각합니까? 아마 그렇지 않을 것입니다. 집의 기본 구조보다 인테리어 디자인부터 시작하는 것은 직관적이지 않습니다.
와이어프레임에 포함되어서는 안 되는 것은 무엇입니까?
와이어프레임을 단순하게 유지하는 것이 정말 중요합니다. 이는 위에서 언급한 것처럼 와이어프레임의 요점이 페이지에 요소가 배치되는 방식과 사이트 탐색이 작동하는 방식을 보여주는 것이기 때문입니다. 색상이나 이미지가 너무 많으면 독자가 레이아웃 및 탐색 요소에 집중하지 못하게 할 수 있습니다. 골격의 단순한 시각적 표현을 묘사하는 목표를 달성하려면 색상, 이미지, 그래픽 및 양식화된 글꼴의 사용을 제거하거나 줄여야 합니다.
다음 사항에 유의하십시오.
당신을 위해 추천 된:
메타버스가 인도 자동차 산업을 어떻게 변화시킬 것인가?
인도 스타트업에 대한 반 영리 조항은 무엇을 의미합니까?
Edtech Startup이 인도 인력의 기술 향상 및 미래 준비를 돕는 방법...
이번 주 새로운 시대의 기술 주식: Zomato의 문제는 계속되고 EaseMyTrip은 Str...
인도 스타트업, 자금 조달을 위해 지름길 선택
디지털 마케팅 플랫폼 Logicserve, INR 80 Cr 자금 지원, LS Dig...
- 색상을 회색, 흰색 및 검정색으로 유지하십시오.
- 일반 글꼴을 사용하십시오. 이것은 사용자가 타이포그래피 스타일에 주의를 산만하게 하는 것을 방지하는 데 도움이 됩니다. 그러나 글꼴을 통해 정보의 계층을 표시하는 것은 여전히 중요하며 글꼴의 크기와 "일반", " 기울임꼴 " 또는 "볼드" 여부를 변경하는 것만으로 표시할 수 있습니다.
- 고도로 양식화된 그래픽과 이미지를 피하십시오. 대신 사각형과 사각형을 자리 표시자로 사용하고 상자 중간에 "x"를 추가하여 이미지가 배치될 위치를 표시하는 것이 좋습니다. 상자 중앙에 재생 버튼으로 삼각형을 사용하여 비디오가 배치될 위치를 표시하기 위해 동일한 작업을 수행할 수도 있습니다.
와이어프레임을 사용하는 5가지 주요 이유
와이어프레임은 고객이 설계 프로세스 초기에 고객이 생각하기를 원하는 것에 집중하도록 하는 훌륭한 도구입니다.
와이어프레임은 고객과 이해 관계자가 색상과 이미지에 주의를 산만하게 만들 기회를 주지 않으면서 디자인 구조를 안내할 수 있는 좋은 방법입니다. 미팅의 목표가 고객이 페이지에 있어야 하는 요소와 이러한 요소가 사이트에서 어떻게 작동할 것인지에 대해 생각하게 하는 것이라면 색상, 이미지 및 양식화된 페이지를 제거하기만 하면 훨씬 더 간단해집니다. 그런 다음 사이트 탐색 및 페이지 요소 할당에 대한 고객 및 이해 관계자로부터 피드백을 쉽게 수집할 수 있습니다. 빨간색이 클릭 유도문안 버튼으로 "그들에게 효과가 없는" 방법에 초점을 맞추는 대신. 웃기게 들리지만 많이 발생합니다!
와이어프레임을 사용하면 페이지의 기능을 매핑하고, 문제를 조기에 포착하고, 나중에 수정하는 시간을 절약할 수 있습니다.
많은 디자인 요소가 포함된 충실도가 높은 모형보다 와이어프레임을 변경하는 것이 훨씬 덜 고통스럽습니다. 충실도가 높은 모형을 다시 작업해야 하는 경우 변경하는 데 훨씬 더 많은 시간이 걸립니다. 디자인 프로세스 초기에 와이어프레이밍을 통해 페이지의 기능에 대해 생각하는 데 시간을 투자하면 매우 만족할 것입니다. 확실히 시간을 잘 보내고 매우 효율적입니다.
즉, 기능을 조기에 매핑하면 개발 단계에서 자주 발생하는 앞뒤의 양을 줄일 수 있습니다. 웹 애플리케이션에 비해 와이어프레임에서 함수를 다시 작성하는 것이 확실히 더 쉽습니다.
와이어프레임을 사용하면 클라이언트를 더 잘 알 수 있습니다.
당신은 당신의 클라이언트와 더 많은 시간을 보낼수록 행동과 동기의 패턴을 보기 시작할 것입니다. 시간이 지남에 따라 피드백을 통해 얻은 지식은 미래에 그들과 가장 잘 협력하는 방법과 그들과 함께 시간을 가장 생산적으로 만드는 방법에만 영향을 미칠 것입니다. 와이어프레임은 또한 고객이 집중하도록 하는 좋은 방법입니다. 고객은 최종 제품에 대해 생각하기 시작하는 것이 흥미롭기 때문에 5단계 앞으로 나아가기를 좋아합니다. 그러나 클라이언트가 디자인의 기능과 구조에 대해 생각하는 데 방해가 되는 기회를 제거하는 것은 매우 보람 있는 일입니다.
와이어프레이밍은 피드백을 수집하고 결함을 조기에 파악하기 위한 훌륭한 도구입니다.
효율성이 당신의 목표라면(대부분 그럴 가능성이 높습니다.) 와이어프레이밍이 시작되어야 합니다. 시간이나 돈의 제약으로 인해 곧바로 고화질 목업 디자인을 시작해야 한다는 압박감을 느끼는 경우가 있을 수 있습니다. 초기에 양질의 피드백을 수집하지 않으면 나중에 더 힘들고 시간 소모적인 수정 프로세스를 만들어 모든 것이 훨씬 덜 효율적일 수 있음을 기억하십시오.
와이어프레임은 공간 제약을 드러내고 페이지의 요소 계층 구조를 설계하여 콘텐츠의 우선 순위를 지정하는 좋은 방법입니다.
초기에 페이지의 계층 구조를 시각화하고 공간 제약 조건을 시각적으로 표시할 수 있는 기회가 있으면 나중에 페이지 스타일 지정을 시작하고 콘텐츠를 채울 때 많은 시간을 절약할 수 있습니다. 이해 관계자로부터 와이어프레임에 대한 피드백을 수집하고, 받은 피드백을 기반으로 와이어프레임에서 빠르게 이동하고, 피드백을 다시 수집하고, 의도한 목표에 도달할 때까지 반복해야 합니다.
결론
와이어프레임은 사용성을 전면에 내세우고 이를 사용하는 것은 페이지 레이아웃과 페이지 요소의 기능을 설명하는 강력한 방법입니다.
설계 프로세스 초기에 와이어프레임을 사용하면 귀하와 귀하의 고객이 사용 편의성, 변환 경로, 요소 배치를 객관적으로 살펴보고 결함을 조기에 지적하는 데 도움이 됩니다. 이 모든 것이 직관적이고 기능적이며 즐거운 제품으로 이어집니다.
[이 게시물은 Proto.io 블로그에 처음 게재되었으며 허가를 받아 복제되었습니다.]