Wireframing

Wireframing is a representation or outline that is useful for helping you, your developers and designers think and communicate about the organization of the product you’re building.

It is helpful because you are able to see the patterns and some of the UI elements and how they would work together. I learned that it’s best to keep things simple to make sure users are able to understand the UI elements and other functions of the app.

There are multiple ways to create wireframes and one of the easiest way is to sketch it out on a piece of paper and others are digital ways. Some of the free to use Wireframing tools are: Frame Box which is to make basic and simple projects and very easy to use for someone starting as a new designer. Gliffy, this is a very easy to use tool for not only creating wireframes but many other things. Lastly, iPhone mockup which gives you images that you can export as PNGs or shared as URL among a team to work on digitally.

Here is an example of one of my very early work creating wireframe on Sketch:

Umair Jeelani

UX/UI Designer