Purposes of wireframing

Although some teams consider the wireframing stage non-essential and skip it, wireframes work like bridges between the initial ideation process and the final product. Wireframing helps designers collect numerous concepts and ideas together, notice inconsistencies or technical constraints, and prevent costly redesign or code-rewriting.

Wireframes are much cheaper than complete high-level prototypes. The level of wireframe complexity is up to you. They can be sketched with pen and paper, drawn in drag-and-drop software, or even be made clickable to simulate some of the major interactions.

The main goal is to focus on functionality, not looks, and effectively communicate design ideas.

The simplest app wireframes should reflect:

• Content hierarchy
• Placement and dimensions of UI elements
• Space distribution
• Possible user actions
• App features
• Navigation and transitions between app pages