어떻게 와이어프레임을 만들어야 하는가

왜 와이어프레임이 필요할까?

• 유저가 목적지에 도달할 때까지 얼마나 효율적으로 플로우를 짜는가와 함께 사용성에 앞서 미래 예측 가능

 

• [ 기획자와 디자이너가 와이어프레임을 만들 때 고려해야 할 것 ]
• 기획자 : 페이지/기능/콘텐츠 기준으로 배치 <-> 디자이너: 사용성과 시각적 요소에서 고민

 

와이어프레임에 들어가기전 알아야 할 게슈탈트 이론

• 게슈탈트 이론 : 형태나 모양을 볼 때 인지하는 방식을 설명

 

• [ 게슈탈트 이론 속 UI디자이너를 위한 핵심 ]
• 유사성의 원리 : 색/크기/모양 유사한 것들을 묶는 것 -> 사람의 구분이 더욱 쉬워짐
• 근접성의 원리 : 이웃해있는 요소들과 그렇지 않은 요소 구분 (그룹핑)

• 공통 영역의 원리 : 박스안에 요소를 같은 정보로 보는 것

• 연속성의 원칙 : 연속성을 띄는 물체에 대해 연관성 있다 생각

• 게슈탈트 이론을 활용한 와이어프레임 제작

1. 우선순위와 배치 고려 
2. 배너영역/비주얼 영역 고민
3. 간략한 관찰 후 인사이트 도출
4. 디자인보다는 콘텐츠별 그룹핑 집중

 

 

 

ui kit를 활용한 와이어프레임

1. 커뮤니티에서 wireframe free ui kit 검색
2. 필요한 아이콘/컴포넌트 가져오기
3. frame  원하는 프로토타입 선택
4. 통으로 복사할 경우 분리가 어렵기 때문에 일부분씩 가져가서 진행

* 와이어프레임의 경우 디자인을 입히는 과정이 아니기 때문에 대략의 위치만 잡는다 생각

👌 영상 시청 후 느낀 점

- 와이어프레임 제작시 기획자에게 전달받은 기능명세서/ 필요 콘텐츠를 토대로 각각 영역의 그룹핑, 효과적인 레이아웃 배치를
  고려해 ui키트로 빠른 제작을 하면 되겠다 생각

[ 고려할 점 ]

-다른 디자이너와 협업시 어떻게 와이어프레임을 제작해야 할까 라는 궁금점도 생김 -> 각각 파트를 나누어서 진행한 이후 서로 피드백을 주며 와이어프레임을 제작해 나가면 빠르게 해낼 수 있지 않을까..?
-ui키트로 제작할 때에는 아이콘은 기존 무료 ui kit를 사용하고 이후 플랫폼의 컨셉에 맞춰 제작