콘텐츠
사이트에 대한 모든 계획이 완료되고 초기 생각이 해시되면 디자인 및 구조에 대한 구체적인 아이디어를 모아야합니다. 결국 Photoshop (또는 브라우저가 적합 할 경우 브라우저)에서 작업하고 픽셀 단위의 완벽한 디자인을 정교하게 제작하는 시점에 도달 할 것입니다.하지만 먼저 디자인 할 내용을 설정해야합니다.
이 기사에서는 축소판, 와이어 프레임 및 그레이 박스에 대해 설명합니다. 우리는 그들이 우리의 워크 플로에 어떻게 들어 맞는지 그리고 그들이 어떤 목적을 제공하는지 볼 것입니다. 이 기사는 와이어 프레임 프로세스에 대한 소개와 관련 주요 결정에 대한 개요로 제공되어야합니다.
Photoshop으로 바로 이동하지 않으시겠습니까?
솔직히, 그것은 당신이 일하는 것을 선호하는 방식에 달려 있습니다. 모든 사람에게 적합한 단일 프로세스는 없으며, 한 번에 디자인을 망치는 것만으로도 본능을 신뢰할 수 있습니다. 그럴 경우 더 많은 힘을 얻을 수 있지만 의심 스럽습니다. 우리 대부분은 아이디어를 정리하기 전에 약간의 구조가 필요합니다.
나는 본질적으로 프로세스의 사전 디자인 단계를 건너 뛰고 목업을 위해 Photoshop CS6와 같은 방식으로 바로 이동하는 많은 디자이너를 알고 있습니다. 그들은 만족스러운 디자인을 찾아 고객에게 제공 할 때까지 픽셀을 밀어 붙입니다. 때로는 작동하고 디자인이 승인되고 표시되어 배송됩니다. 때로는 그렇지 않습니다.
스케치 나 와이어 프레임없이 훌륭한 디자인을 만들 수있는 디자이너는 내부 의사 결정 프로세스가 빠릅니다. 디자이너는 첫 번째 아이디어를 사용하거나 즉시 아이디어를 신속하고 단호하게 수락하거나 거부 할 수 있습니다. 실제로 그들은 제가 요약 한 것과 동일한 과정을 거치고 있으며 내부적으로 만 수행합니다. 어느 쪽이든 빈 Photoshop 캔버스를 공격 할 때 프로세스가 계속 발생합니다.
경고 : 일반적으로 이러한 문제를 내부적으로 해결하려면 많은 경험이 필요합니다. 명확한 프로세스에 의해 제공되는 구조가 디자인의 모든 측면에 필요한주의를 기울이는 데 도움이 될 수 있다고 생각합니다.
구조와 형태
디자인의 구조를 언급 할 때 두 가지를 이야기하고 있습니다. 디자인은 페이지별로 시각적으로 구성되어야합니다. 레이아웃은 파싱하기 쉬워야하며 콘텐츠는 사용자가 무엇이 중요한지 보조적인지 알 수있는 방식으로 구성되어야합니다.
그러나 페이지의 콘텐츠를 구성하는 것 외에도 Google의 디자인은 사이트의 나머지 부분을 액세스 가능하고 쉽게 구문 분석 할 수 있도록해야합니다. 사용자에게 자신의 위치, 방금 한 작업, 원하는 다음 정보에 도달하는 방법에 대한 피드백을 제공해야합니다.
나는 그것이 보이는 정보 (페이지에 보이는 정보)와 숨겨진 정보 (현재 페이지에없는 모든 내용)에 구조를 부여하는 것이라고 생각합니다. 둘 다 똑같이 중요하며 최고의 디자인은 둘을 혼합하는 방법을 찾습니다.
와이어 프레임
“클라이언트 서비스를 사용하면 클라이언트를위한 결과물 인 와이어 프레임을 개발해야 할 때도 있고 그렇지 않은 경우도 있습니다. 그렇게하지 않아도 가끔은 계속 개발 하겠지만 스스로를 위해서 ... 매번 모든 일을하는 한 가지 방법이 있어서는 안된다고 생각합니다.” — 댄 루빈
좋아. 지금은 우리가 좋은 일을 할 때입니다.
와이어 프레임은 콘텐츠 계층 구조, 일반 레이아웃 및 기능에 중점을 둔 초저 충실도 (단순 : 선, 상자, 텍스트) 디자인입니다. 와이어 프레임은 색상, 질감 또는 이미지를 제외해야합니다. 대신 디자인 요소가 만들 수있는 시각적 혼란없이 콘텐츠와 상호 작용을 구성하려는 순전히 구조적인 문서입니다.
일부 회사에서는 UX 디자이너와 인터페이스 디자이너가 같은 사람이지만 항상 그런 것은 아닙니다. 대행사 또는 팀 내에서 작업하는 경우 와이어 프레임 작업은 다른 사람에게 맡겨 질 것입니다. UX를 수행하는 사람은 누구나 작업 할 수있는 와이어 프레임 스택을 건네 줄 가능성이 높으므로 해당 사용자와 솔직하게 이야기하여 자신에게 적합한 세부 수준의 와이어 프레임을받을 수 있도록하는 것이 좋습니다.
와이어 프레임을 얼마나 자세하게 만들어야합니까?
와이어 프레임에 들어가는 세부 수준은 주관적인 결정입니다. 와이어 프레임의 깊이는 의사 결정 프로세스가 인터페이스 디자이너에게 얼마나 남아 있는지, UX 디자이너가 얼마나 많이 제어하는지에 따라 달라집니다. 상세한 와이어 프레임은 UX 디자이너가 이미 레이아웃 및 콘텐츠 계층에 대해 강력한 선택을하고 있음을 의미합니다. 그러나 종종 와이어 프레임은 '석재'문서가 아니기 때문에 인터페이스 디자이너는 최종 목업을 만들 때 콘텐츠를 이동할 수있는 여유가 있습니다.
아래 이미지에서 알 수 있듯이 와이어 프레임 세부 정보는 페이지의 콘텐츠 양이나 콘텐츠 유형의 영향을받을 수도 있습니다. 몇 줄의 텍스트와 몇 개의 큰 이미지가있는 홈페이지에는 자세한 와이어 프레임이 필요하지 않습니다. 페이지에는 요소가 거의 없으므로 계층 적으로 신중하게 구성 할 필요가 없습니다.
반면에 여러 열의 콘텐츠, 특집 기사, 소셜 미디어 피드 및 비디오 클립이있는 뉴스 사이트의 홈 페이지는 사전 계획이 필요합니다. 바쁜 웹 사이트에서는 구조가 필요하기 때문에 와이어 프레임에 더 많은주의를 기울여야합니다.
종종 와이어 프레임의 품질은 와이어 프레임이 사용되는 방식에 따라 달라집니다. 어떤 경우에는 와이어 프레임을 사용하여 매우 구체적인 레이아웃과 계층 구조 결정을 내릴 수 있습니다. 다른 경우에는 와이어 프레임이 디자이너가 디자인을 만들 때 참조 할 수있는 일반적인 가이드 역할을합니다.
매우 낮은 충실도의 와이어 프레임은 레이아웃을 디자인 할 때 많은 유연성을 제공 할 수 있지만 종종 기능의 세부 사항과 디자인의 구조적 필요성에 대한 단서를 거의 제공하지 않습니다. 고 충실도 와이어 프레임은 페이지의 세부 사항에 대한 많은 정보를 제공 할 수 있지만 디자인 선택에 푹 빠져있는 느낌을 줄 수 있습니다. 아래 예에서 알 수 있듯이 설계가 와이어 프레임을 정확히 따를 필요는 없습니다.
와이어 프레임은 최종 디자인에 대한 일종의 속기입니다. 따라서 공통 요소에는 단순화 된 표현이 있습니다. 이미지는 선이 교차하는 사각형으로 표시됩니다. 양식은 맨 윗줄에 제목이있는 상자입니다. 가로 탐색 요소는 제목이 균등하게 배치 된 긴 상자입니다. 텍스트는 ... 글쎄, 텍스트입니다. 하지만 강조하겠습니다. 멋진 것은 없습니다! 아래 이미지에서 볼 수 있듯이 와이어 프레임은 최종 디자인이 어떻게 보이는지와 거의 관련이 없습니다.
와이어 프레임을 작성할 때 다음 네 가지 질문을해야합니다.
- 페이지에 어떤 콘텐츠가 있어야합니까?
- 콘텐츠의 다른 부분은 서로 어떤 관련이 있습니까?
- 어떻게 배치 될 수 있습니까?
- 사용자는 콘텐츠와 어떻게 상호 작용해야합니까?
그게 다입니다. 글꼴과 이미지에 대해 생각하고 있다면 자신보다 앞서 나가고있을 것입니다. 내용과 구조에 집중하십시오.
이 문서는 SitePoint에서 발행 한 Giovanni DiFeterici의 The Web Designer ’s Roadmap에서 독점적으로 발췌 한 것입니다. 이 192 페이지의 풀 컬러 책은 초기 영감에서 완성 된 디자인에 이르기까지 모든 단계를 다루므로보다 전문적인 웹 디자이너가 될 수 있습니다.
책을 주문하기 전에 등록하여 무료 샘플 장을받을 수 있습니다.
