반응형
와이어프레임
비주얼 디자인이 시작되기 전에 흑백으로 제작되어 UX/UI 디자인의 방향을 잡는 역할을 하 며 페이지나 화면에 보여지는 요소들을 정하기 위해 그려지는 일종의 ‘프로토타입’이라고 할 수 있다. 피드백과 함께 이루어지는 작업이기 때문에 한번에 완성도를 높이기보다 반복적 작업을 진행하는 것을 염두 해 두고 작성해야 한다
정의
대략적인 스크린 디자인을 일컫는 것으로, 각 페이지와 기능 간의 관계와 구조를 제안하 고 시각화하는 것이다. 이러한 와이어프레임은 인터페이스 디자인에서 기본 안내서로 사 용한다. 즉, 와이어프레임은 인터페이스의 기본 요소를 담은 레이아웃을 그림 등으로 표현 한 것으로, 기획서나 스토리보드 등의 UI 디자인을 의미한다. 가벼운 스케치와 인터랙티브 프로토타입 사이에 위치한다고 본다.
- 개별적인 페이지 혹은 템플릿이 구조적인 관점에서 어떻게 보여야 하는지를 정의한다.
- 사이트의 정보구조와 시각 디자인 및 정보 디자인의 특성을 모두 가지고 있다.
- ‘페이지’라고 불리는 상대적으로 좁은 2차원 공간에 포함될 콘텐츠와 정보구조를 설명한다.
- 콘텐츠 요소를 어떻게 그룹핑 할지, 어떻게 배열할지, 어떤 요소 그룹들이 높은 우선 순위를 가질지 결정하며 화면설계 작업을 진행한다.
- 화면 설계의 종류다양한 완성도의 수준에 따라 지니는 각각의 장단점을 항상 염두에 두게 되면, 화면설계 는 정보구조 설계 프로세스에서 커뮤니케이션과 협업을 위한 매우 강력한 도구가 된다
<낮은 완성도의 화면설계 /h4>
어떤 그래픽 요소나 실제 콘텐츠가 담겨있지 않다. 이 화면설계는 시각 디자이너가 페 이지의 글로벌, 로컬, 컨텍스추얼 내비게이션 요소에 집중할 수 있도록 해준다.
중간 완성도의 화면설계
세부사항들이 잘 표현되어 있다. 이 화면설계 콘텐츠, 배열, 내비게이션의 몇 가지 측 면을 보여주기 위한 목적으로 만들어졌다.
<높은 완성도 화면설계/h4>
실제 페이지 모습과 매우 흡사하다. 이 화면설계는 대부분의 인포메이션 아키텍트가 그래픽 디자이너의 도움 없이도 이미지를 사용할 수 있다는 것을 보여준다. (
반응형
댓글