프로그래머가 주위를 놀라게 한 와이어 프레임을 만드는 방법

센스는 들어 가지 않습니다, 그렇게 Balsamiq Wireframes를 사용하면 돼!

Balsamiq Wireframes (이후 Balsamiq)는 웹 및 앱 디자인 청사진을 그리는 도구
직관적으로 사용할 수 있으므로 학습 없이 바로 시작할 수 있다.

Balsamiq Wireframes for Desktop 에서 다운로드

Sitemap 만들기

헤더 메뉴에서 SiteMap을 선택하고 드래그 앤 드롭하면 Sitemap이 생성됩니다.


Sitemap을 더블 클릭하면 편집 모드가 되어 편집하면 Sitemap이 갱신된다.

와이어 프레임 생성

헤더 메뉴에서 항목을 선택하고 드래그 앤 드롭하여 조립합니다.
WEB, 앱에 필요한 아이템은 대체로 갖추어져 있다.
아래는 일례, 꽤 직관적으로 만들 수 있으므로 건간 트라이 앤 에러한다.

내보내기

메뉴 -> File -> Export에서 PNG, PDF 형식으로 내보낼 수 있다.

기타

Balsamiq의 디폴트에서는 외형이 Sketch 같은 레이아웃이지만
Project Information보다 외형을 깔끔한 것으로 변경할 수 있다.
개인적으로는 Sketch 쪽이 맛이 있어서 좋아한다.