top of page

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


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


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


Determines the intended functionalities of the product.


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

Designing a Wireframe


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.



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

Wireframing Basics​

 Tools:  Figma  |  XD  |  Sketch  |  Axure

bottom of page