[TIL] Day45 #Figma

Beanxx·2022년 6월 28일

TIL

목록 보기

45/120

2022.06.28(Tues)

[TIL] Day45
[SEB FE] Day43

선(wire)으로 틀(frame)을 잡는다는 뜻,
제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적

➰ wireframe 품질 수준 - fidelity

Low Fidelity Wireframe (Lo-Fi Wireframe)
- 손으로 빠르게 그린 수준
- 작성하는데 시간이 많이 들지 않아 수정 및 새로운 의견 반영 easy
- 아이디어 구체화 및 큰 그림 잡을 때 good 👍
Middle Fidelity Wireframe (Mid-Fi Wireframe)
- Lo-Fi를 통해 아이디어가 어느정도 구체화되어 확정된 후에, 보기 좋게 다듬어준 와이어프레임
- 해당 페이지가 어떻게 작동하게 될지 예상 가능
High Fidelity Wireframe (Hi-Fi Wireframe)
- 와이어프레임을 완성본에 가깝게 작성한 것
- 목업에 가까운 형태
- 작성하는데 시간도 많이 들고, 수정도 어렵 → 보통 Hi-Fi 수준까진 제작 X

실제 제품과 거의 흡사하게 구현한 것으로, 페이지 이동 & 상호작용 가능
개발에 들어가기 전 단계에 작성하며, 흡사하게 제작했는지에 따라서 Fidelity Level 분류

➰ prototype 품질 수준 - fidelity

Low Fidelity Prototype (Lo-Fi Prototype)
- 구체적인 내용이 작성되지 않은 상태에서 간단한 상호 작용과 페이지 이동 정도만 테스트 가능
- User flow 상에서 빠지거나 어색한 기능 및 페이지가 없는지 빠르게 검토 가능
- Lo-Fi는 테스트에 적합하진 않음
Middle Fidelity Prototype (Mid-Fi Prototype)
- Hi-Fi 처럼 완성도는 높진 않지만, Lo-Fi 보단 최종 결과물에 가까운 프로토타입
- 사용성 테스트를 위해선 적어도 Mid-Fi 수준으로 작성해주는 것이 좋음
High Fidelity Prototype (Hi-Fi Prototype)
- 최종 결과물과 거의 유사한 수준으로 만든 프로토타입
- 디자인 거의 확정 / 실제 제품과 거의 다름없이 작동하므로 사용성 테스트 가능
- 개발 비용이 들어가기 이전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 효과 👍

🙌 Summary