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.