웹 사이트 와이어프레임

Website wireframe
사용자 프로파일 보기에 대한 와이어프레임 문서

웹 사이트 와이어프레임은 페이지 개략도 또는 화면 청사진이라고도 하며 [1]: 166 웹 사이트의 골격 프레임워크를 나타내는 시각적 안내서입니다.와이어프레임이라는 용어는 골격 프레임워크를 사용하여 3차원 모양과 [2]볼륨을 나타내는 다른 필드에서 가져온 것입니다.와이어프레임은 특정 목적을 최적으로 달성하기 위해 요소를 배치하기 위해 작성됩니다.목적은 대개 비즈니스 목표와 창의적인 아이디어에 의해 결정됩니다.와이어프레임은 인터페이스 요소 및 네비게이션 시스템을 포함한 웹 사이트 콘텐츠의 페이지 레이아웃 또는 배열과 함께 작동하는 방식을 [3]: 131 나타냅니다.와이어프레임은 기능, 동작 및 콘텐츠의 [1]: 167 우선순위에 중점을 두기 때문에 일반적으로 타이포그래피 스타일, 색상 또는 그래픽이 부족합니다.다시 말해,[1]: 168 그것은 보이는 것이 아니라 스크린이 하는 일에 초점을 맞춘다.와이어 프레임은 화이트보드의 연필 도면 또는 스케치일 수도 있고, 다양한 자유 소프트웨어 또는 상용 소프트웨어 애플리케이션을 사용하여 제작할 수도 있습니다.와이어프레임은 일반적으로 비즈니스 분석가, 사용자 경험 설계자, 개발자, 비주얼 설계자 및 상호작용 설계, 정보 아키텍처 및 사용자 연구에 대한 전문 지식을 가진 사용자가 만듭니다.

와이어 프레임의 주목점:

  • 사용 가능한 기능의 범위
  • 정보와 기능의 상대적 우선 순위
  • 특정 종류의 정보를 표시하는 규칙
  • 다양한 시나리오가 디스플레이에[1]: 169 미치는 영향

웹 사이트 와이어프레임은 기본 [3]: 131 개념 구조 또는 정보 아키텍처를 웹 사이트의 표면 또는 시각적 디자인에 연결합니다.와이어프레임은 웹 사이트의 서로 다른 화면 템플릿 간의 기능과 관계를 확립하는 데 도움이 됩니다.반복적인 프로세스로 와이어프레임을 작성하는 것은 디자인 개념의 실용성을 측정하면서 페이지의 신속한 프로토타입을 만드는 효과적인 방법입니다.와이어프레임 작업은 일반적으로 "플로우차트나 사이트 맵과 같은 고급 구조 작업과 화면 설계"[1]: 167 사이에서 시작됩니다.웹 사이트를 구축하는 과정에서, 와이어 프레임은 사고가 [4]: 186 구체화되는 부분입니다.

와이어프레임은 모바일 사이트, 컴퓨터 애플리케이션 또는 인간과 컴퓨터의 [2]상호작용을 수반하는 기타 화면 기반 제품의 프로토타이핑에도 사용됩니다.

와이어 프레임의 사용

와이어프레임은 다양한 분야에서 사용될 수 있습니다.개발자는 와이어프레임을 사용하여 사이트의 기능을 보다 명확하게 파악하지만 설계자는 와이어프레임을 사용하여 사용자 인터페이스(UI) 프로세스를 푸시합니다.사용자 경험 설계자와 정보 설계자는 와이어 프레임을 사용하여 페이지 간의 탐색 경로를 표시합니다.비즈니스 분석가는 와이어프레임을 사용하여 화면의 비즈니스 규칙 및 상호 작용 요건을 시각적으로 지원합니다.비즈니스 이해관계자는 와이어프레임을 검토하여 설계를 [1]: 167 통해 요건과 목표가 충족되는지 확인합니다.와이어프레임을 작성하는 프로페셔널에는 비즈니스 분석가, 정보 설계자, 인터랙션 설계자, 사용자 경험 설계자, 그래픽 설계자, 프로그래머 및 제품 [2]관리자가 포함됩니다.

와이어프레임은 정보 아키텍처와 비주얼 디자인을 연결하기 때문에 공동 작업이 될 수 있습니다.이러한 프로페셔널한 역할의 중복으로 인해 충돌이 발생할 수 있으며, 와이어 프레임은 설계 프로세스에서 논란이 [4]: 186 되는 부분이 됩니다.와이어프레임은 "맨 뼈"의 미학을 의미하기 때문에 설계자는 와이어프레임이 실제 화면 [1]: 168 배치를 얼마나 가깝게 묘사해야 하는지를 평가하기 어렵다.경합을 피하기 위해 사용자 요건을 이해하는 비즈니스 분석가가 기본적인 와이어프레임을 작성한 후 설계자와 협력하여 와이어프레임을 더욱 개선하는 것이 좋습니다.와이어 프레임의 또 다른 어려움은 와이어 프레임이 정적 표현이기 때문에 대화식 세부 정보를 효과적으로 표시하지 못한다는 것입니다.현대 UI 디자인에는 패널 확장, 호버 효과, 회전목마 등 2-D [1]: 169 다이어그램에 어려움이 있는 다양한 장치가 포함되어 있습니다.

와이어 프레임의 주요 장점은 어떤 인터페이스에서도 민첩하게 반복할 수 있다는 것입니다.이는 종종 가용성 테스트라고 불리는 프로세스를 통해 발생하며, 사용자는 인터페이스와 상호작용하여 사고 과정에 대해 소리내어 생각하거나 보다 구조화된 질문에 답할 수 있는 기회를 제공받는다.사용자와의 각 시험 후 사용자 경험 연구자는 인터페이스와의 공통적인 상호작용을 식별하고 데이터를 합성하고 그에 따라 [5]재설계할 수 있습니다.

와이어프레임은 일반적으로 충실도가 낮기 때문에 변경은 매우 쉽고 비용 효율적입니다.와이어프레임의 포인트는 인터페이스 내의 기본 구조의 높은 수준의 상호작용 패턴(일명 임계점)[5]의 설계를 포착하는 것입니다.이것에 의해, 설계자는 신속히 작업할 수 있게 되어, 그룹 멤버가 공동으로 작업해, 다음의 반복 작업에 「스프린트」를 실시하는 민첩한 환경에 최적입니다.

와이어 프레임은 세부 수준이 다를 수 있으며 충실도 또는 최종 제품과 얼마나 유사한지에 대해 두 가지 범주로 나눌 수 있습니다.

저충실도

대략적인 스케치 또는 빠른 목업과 유사하므로 저충실도의 와이어프레임을 빠르게 제작할 수 있습니다.이러한 와이어프레임은 직사각형과 라벨을 사용하여 콘텐츠를 [4]: 185 표현함으로써 보다 추상적이기 때문에 프로젝트 팀이 아이디어를 전달하고 보다 효과적으로 협업할 수 있도록 지원합니다.더미 콘텐츠, 라틴 필러 텍스트(lorem ipsum), 샘플 또는 심볼 콘텐츠는 실제 콘텐츠를 사용할 [1]: 175 수 없는 경우 데이터를 표현하기 위해 사용됩니다.예를 들어 실제 영상을 사용하는 대신 자리 표시자 직사각형을 사용할 수 있습니다.

저충실도 와이어프레임은 프로젝트에서 팀 커뮤니케이션을 용이하게 하기 위해 사용할 수 있으며 프로젝트의 [6][7]초기 단계에서 사용됩니다.

고충실도

고충실도 와이어프레임은 실제 웹 페이지의 디자인과 더 가까운 수준의 세부사항을 포함하고 있어 작성에 시간이 [4]: 185 오래 걸리기 때문에 작성하는 데 시간이 더 오래 걸립니다.

단순하거나 충실도가 낮은 도면의 경우 종이 프로토타이핑이 일반적인 기술입니다.이러한 스케치는 단순한 표현이기 때문에 동작을 설명하기 위한 주석(주석)이 유용합니다.[1]: 194 보다 복잡한 프로젝트에서는 컴퓨터 소프트웨어를 사용하여 와이어프레임을 렌더링하는 것이 일반적입니다.일부 툴에서는 플래시 애니메이션을 포함한 인터랙티티와 HTML, CSS, JavaScript 등의 프런트엔드 웹 테크놀로지를 통합할 수 있습니다.

고화질 와이어 프레임에는 더 많은 실제 컨텐츠, 특정 타이포그래피 선택 항목 및 이미지 치수에 대한 정보가 포함됩니다.저충실도 와이어프레임과 달리 고충실도 와이어프레임에는 실제 이미지가 포함될 수 있습니다.색상 선택 항목은 포함되지 않지만 다른 색상 값을 그레이스케일로 [6][7]표시할 수 있습니다.

와이어프레임 요소

웹 사이트의 골격 계획은 정보 설계, 내비게이션 설계 및 인터페이스 설계라는 세 가지 요소로 나눌 수 있습니다.페이지 레이아웃은 이들 컴포넌트가 모이는 장소이며 와이어 프레임은 이들 [3]: 131 컴포넌트 간의 관계를 나타냅니다.

정보 설계

주요 기사:정보 설계

정보설계는 정보를 이해하기 쉽게 배치하고 우선순위를 정하는 프레젠테이션입니다.정보설계는 명확한 의사소통을 위해 정보를 효과적으로 표시하기 위한 사용자 경험 설계 영역입니다.웹 사이트의 경우 정보 요소는 사용자의 [3]: 126 목표와 작업을 반영하도록 배치해야 합니다.

내비게이션 설계

내비게이션 시스템은 사용자가 웹 사이트를 통해 페이지를 이동할 수 있는 일련의 화면 요소를 제공합니다.내비게이션 설계는 사용자가 사이트 탐색에 사용할 수 있는 옵션을 이해할 수 있도록 포함된 링크 간의 관계를 전달해야 합니다.웹 사이트에는 글로벌 내비게이션, 로컬 내비게이션, 보조 내비게이션, 상황별 내비게이션 및 사용자 정의 내비게이션과 [3]: 120–122 같은 여러 내비게이션 시스템이 포함되어 있는 경우가 많습니다.

인터페이스 설계

주요 기사:사용자 인터페이스 설계

사용자 인터페이스 설계는 사용자가 시스템의 [3]: 30 기능과 상호작용할 수 있도록 인터페이스 요소를 선택하고 배치하는 것을 포함한다.목표는 사용성과 효율성을 최대한 높이는 것입니다.인터페이스 설계에는 액션버튼, 텍스트필드, 체크박스, 옵션버튼 및 드롭다운메뉴가 있습니다

「 」를 참조해 주세요.

레퍼런스

  1. ^ a b c d e f g h i j Brown, Dan M. (2011). Communicating Design: Developing Web Site Documentation for Design and Planning (2nd ed.). New Riders Press. ISBN 978-0321712462.
  2. ^ a b c Angeles, Michael (September 25, 2014). ""Wireframes"". Konigi Wiki. Archived from the original on 2018-05-05. Retrieved 2011-03-25.
  3. ^ a b c d e f Garrett, Jesse James (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders Press. ISBN 978-0321683687.
  4. ^ a b c d Wodtke, Christina; Govella, Austin (2009). Information Architecture: Blueprints for the Web (2nd ed.). New Riders Press. ISBN 978-0321600806.
  5. ^ a b https://wtf.tw/ref/holtzblatt.pdf[베어 URL PDF]
  6. ^ a b "Low-fidelity vs. High-fidelity Wireframes - Steadfast Creative". Steadfast Creative. 2016-09-13. Retrieved 2018-02-06.
  7. ^ a b "Wireframes: Low-Fidelity vs. High-Fidelity". Dupont Creative. 2016-11-27. Retrieved 2019-07-08.