Figma / Basics of Figma / 2.5 Wireframes
2.5Wireframes
Wireframes 만들기
Wireframe
Wireframe은 전반적인 디자인 구조를 표현하는 것이다. 스케치보다는 디테일하고, 프로토타입 보다는 청사진에 가깝다.
Wireframe을 만듦으로 유저들이 어떻게 프로덕트를 탐색하고 사용할지 이해할 수 있으며, 디테일이 완전히 구현되기 전이기에 테스트하고 빠르게 피드백을 받아 수용할 수 있다. 즉, wireframe은 바뀌라고 있는 것이며 디테일을 도입하기 전, 개발을 시작하기 전 유저들, 클라이언트의 반응을 보고 보다 나은 프로덕트 개발을 시작할 수 있도록 도와준다. 또, 팀원들과 보다 명확하게 프로덕트에 대해 이해하고 align을 할 수 있다.
와이어프레임 만들기
- Keep it simple : 폰트, 이미지 등에 너무 시간 쏟지 말 것
- Ask yourself the important questions : 주고자 하는 비즈니스 가치가 어떤 것인지, 해당 페이지의 어떤 부분이 중요할지 등
- Consult your user flows and sitemap : 이전에 만든 user flow와 sitemap을 활용
- Tackle risky features first : 잘 모르겠는거, 리스크가 있는 것부터 먼저 해결한다. 프로필 페이지나 wishlist는 나중에 해도 충분하다.
- Bring your team into the process : 팀원들과 함께 만든다
