원문 출처는 아래
https://www.justinmind.com/blog/website-wireframe-design-guide/
The complete guide to website wireframe design
The complete guide to website wireframe design
www.justinmind.com
Chapter
1. Low fidelity vs high fidelity wireframes: what's the difference?
2. Wireframes Vs Mockups: what's the best option?
3. What's the difference between wireframes and prototypes?
4. Information architecture: a UX designer's guide
5. You guide to space and layout in UI design
6. Beginner's guide to wireframing UIs: benefits & best practices
7. 20 inspiring web and mobile wireframe examples
8. Beginner's guide to UI sketching
와이어프레임; 높은 충실도 vs 낮은 충실도
충실도 수준은 웹 사이트 와이어 프레임이 실제 완성된 제품과 얼마나 가까운지에 관련됩니다.
UX 디자인의 대부분과 마찬가지로 흑백, 정답 또는 오답이 없습니다.
세부 정보를 추가하는 데 걸리는 시간과 프로젝트 초기에 이러한 세부 정보를 보유해야 할 필요성간에 적절한 균형을 찾는 것이 중요합니다.
충실도가 낮은 와이어 프레임은 화면에 각 요소의 대략적인 레이아웃 구성을 담고 있지만, 요소의 모양에 대한 세부 정보는 표시하지 않습니다. 대신, 화면이 영역이나 블록으로 나뉘어 질 수 있으며, 규모나 정확성에 거의 주의를 기울이지 않아도 됩니다. 짧은 시간안에 다양한 컨셉을 시도하고 비교하기 위해서는 이런 형태를 취하는 편이 좋습니다.
회의 중 또는 초기 정보 아키텍처 단계에서 화면을 스케치하고 제품 내에 변환 영역 / 요소의 배치를 표시하는 데 유용합니다.
충실도가 높은 와이어프레임의 경우는 회사와 디자인 팀에 따라 크게 달라지는 경향이 있습니다.
디자인이 취할 많은 상호 작용을 포함해 실제 이미지와 실제 콘텐츠를 사용합니다. 그러나 이 모든 세부사항을 만들고, 추가하고, 이 창작단계의 후속 단계에 더 적절하게 만드는 데에는 많은 시간투자를 필요로 합니다. 이런 높은 충실도의 와이어프레임과 프로토타입의 경계가 모호하지만, 이 두가지의 차이점에 대해 곧 살펴보게 될 겁니다.
충실도가 높은 와이어프레임으로 시작하지 않는것은 중요합니다.
이상적으로는 기본사항에 대한 정의가 가능한 낮은 충실도의 와이어프레임으로 시작해, 프로젝트의 구조적인 측면에 주의를 기울일 수 있도록 그 위에 구축해나가는 것이 좋고, 특별히 정보 아키텍처 (I.A. Information architecture)와 관련해 특별히 더 중요합니다.
