Wireframing and Prototype

What is wireframe

Wireframe is a part of the interface design process,  where you ignore any aesthetic related processes. that mean you are concerned with the layout of objects, rather than the color and shape of these objects,

so you can use it like a map or story board of your application session

 

what is the difference between it and prototype ?

        Most of time the two terms are used interchangeably, and its not the big deal, as in essence they have the same meaning

However wireframe is used more often with the visual design related processes, while prototype is used with coding and part of the project testing

When to use Wireframe

         You use wireframe after you have defined your project requirements and want to visualize the user interaction with your app idea,  or define the major components interface and how its connected to each other in the whole system.

wire-frames also used as a meaning of communication between developer and users, so you can make a usability test. before digging into the real design process

What is the best methods for wireframing or prototyping

           There are a lot of useful methods and it depends on the designer preference, for me i prefer a wireframe software for easy editing like grafio, other people prefer papers and sketches to have a full control. 

here is a summary of the wireframe common methods

1. paper
2. power point or keynotes
3. visio
4. fireworks software

as you can see, you can use any combination of methods you are comfort with.

if you still confused about the wireframe concept, stay tuned for the next post, i will show you a sample of my app wireframe. and how you can visualize user interactions with your app.

salam,

M.Aleem