Wireframing

Wireframe is the lo-fidelity structure of an interface, focusing on space allocation, prioritisation of content, functionalities and intended behaviours.

Connect

Connects the AI to its visual representation, showing paths and links between all the screens of a product.​

Clarify

Clarifies all the way all the informations displayed interact within each other, in a consistent manner throughout the whole product.

Determine

Determines the intended functionalities of the product.

Prioritise

Sets the hierarchy and the prioritisation of the content displayed in the product.

Designing a Wireframe

Lo-Fidelity

No strong colors used, usually shades of gray. Generic font used to determine headers. Boxes are used in place of big chunk of content, like text boxes. Different kind of boxes are used for images or icons, usually identfied by crossed ( X ) boxes. Smaller boxes are used to display buttons or menus.

 

Hi-Fidelity

Slightly more detailed work, still not as detailed as a prototype. More colors can be used to identify specific content, or call to action buttons.

illustration - wireframe.png
Resources

Wireframing Basics​

 Tools:  Figma  |  XD  |  Sketch  |  Axure