# Prototyping / Wireframing

I create wireframes to demonstrate the hierarchy of elements on any given page of a product. Using information gathered during the research and content strategy creation we sketch out the screens to prove what content is supposed to be there and how it’ll be arranged.\
\
Wireframes created during the definition stage are utility-only, with a limited number of graphic elements. We use them to guide the team on the development of the project and how well the UI will be used to achieve the goals of the project. These wires can then be used as the basis of your functional prototype to test with users.&#x20;

#### Prototyping

Prototypes are one of the most critical steps in the design process. The goal of a prototype is to test our ideas before sinking lots of time and money into the final product.

Prototyping is essential for resolving usability issues before launch. It can also reveal areas that need improvement. Once a draft of your product idea is in the hands of real users, you’ll finally see how they want to use the product. You can then go back and adjust your initial guesswork.

![](https://2285135475-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCaTkHjrGWPG7uK8yHM%2F-MFhh_J14aCvmy8cNyF1%2F-MFhi-Ou8CVYXhmM8Pea%2Fprototype.gif?alt=media\&token=00f7ab9c-056a-48e7-83d9-5f1e0a12cc43)

The actual form of the prototype can be paper or HTML and desktop. The fidelity of the prototype doesn't have to be high-fidelity, but as long as it gives you new insights into how people will naturally use the product, it doesn’t matter whether it is paper, low-fidelity, high-fidelity, or HTML.

Prototyping is inexpensive, fun to make and can be kept as a reference for future iterations. There’s no one, best process for prototyping, but some are better than others. Below are some examples of lo-fi digital prototypes:

* [Book Umrah Mobile Low-fi](https://xd.adobe.com/view/919f6ee5-71d4-4d56-81a7-5070aacafa2e-c4cc/?fullscreen)
