sungyup's.

Figma / Basics of Figma / 2.5 Wireframes

2.5Wireframes

Wireframes 만들기

Wireframe

Wireframe은 전반적인 디자인 구조를 표현하는 것이다. 스케치보다는 디테일하고, 프로토타입 보다는 청사진에 가깝다.

Wireframe을 만듦으로 유저들이 어떻게 프로덕트를 탐색하고 사용할지 이해할 수 있으며, 디테일이 완전히 구현되기 전이기에 테스트하고 빠르게 피드백을 받아 수용할 수 있다. 즉, wireframe은 바뀌라고 있는 것이며 디테일을 도입하기 전, 개발을 시작하기 전 유저들, 클라이언트의 반응을 보고 보다 나은 프로덕트 개발을 시작할 수 있도록 도와준다. 또, 팀원들과 보다 명확하게 프로덕트에 대해 이해하고 align을 할 수 있다.

와이어프레임 만들기

  1. Keep it simple : 폰트, 이미지 등에 너무 시간 쏟지 말 것
  2. Ask yourself the important questions : 주고자 하는 비즈니스 가치가 어떤 것인지, 해당 페이지의 어떤 부분이 중요할지 등
  3. Consult your user flows and sitemap : 이전에 만든 user flow와 sitemap을 활용
  4. Tackle risky features first : 잘 모르겠는거, 리스크가 있는 것부터 먼저 해결한다. 프로필 페이지나 wishlist는 나중에 해도 충분하다.
  5. Bring your team into the process : 팀원들과 함께 만든다
variants
여러개의 컴포넌트들을 서로 쉽게 변환하기 위해 variants로 합칠 수 있다