Here I am looking at how to wire frame correctly 

Wireframes are simple block diagrams that show the placement of elements in a user interface and demonstrate the intended layout and functionality of a solution. They are typically free from graphic design features like colors, typography or actual images and try to answer the following questions instead:(Wulf 2012)

• What elements will be displayed in the UI?
• How will the elements be organized?
• How will the interface work?
• How does the user interact with the application / website?

What differentiates wireframes from other UI design tools, such as screen mockups, is their intentional lack of detail. While screen mockups simulate the look and feel of a user interface almost like a screenshot, wireframes help focus the conversation on the conceptual questions that should be addressed first.(Wulf 2012)

How to Create Wireframes

To produce a wireframe, you don’t necessarily need any software. Personally, I like kick-starting the creative process by drawing rough sketches on paper. I rapidly scribble different layout variations, pit them against each other, and throw away the sketches that don’t work. Instead of a sharpened pencil or a fine-tipped pen, I usually do my first wireframe sketches with a Sharpie marker. Its thickness forces me to stick to the really important building blocks of user interface and keep out minor, less relevant details.(Wulf 2012)

After getting a basic idea of how to structure the interface, I then refine my wireframes on screen. Compared to the paper-based approach, using a wireframing software tool has several advantages:

• It makes it quick and painless to reorganize existing wireframes and iterate on them.
• It provides templates for typical UI elements, such as buttons, grids, and drop-down menus.
• Digital wireframes can be easily shared with others in order to work collaboratively and maintain consistency across the team.
• Many wireframing tools include features for turning wireframes into interactive prototypes.(Wulf 2012)

My wireframe tool of choice is Microsoft PowerPoint. This may sound surprising, considering there are numerous tools specifically dedicated to creating wireframes. However, I think using PowerPoint has several advantages:

• By its nature, PowerPoint is presentation software. This makes it a great tool for presenting the navigation flow and creating clickable prototypes.
• Using PowerPoint encourages business users and other nontechnical project stakeholders to participate in the design process because they can work in an environment with which they are already familiar.
• It is possible to embed PowerPoint slides into Word documents, while keeping them fully editable. This is a small, but useful feature that comes in handy when documenting the requirements or writing other specs.(Wulf 2012)

However, one area where PowerPoint falls short is its lack of ready-to-use wireframe elements and icons. To fill this gap, my company and I have decided to develop PowerMockup, a wireframing add-on for PowerPoint. PowerMockup integrates itself into the PowerPoint window and provides a library of approximately 200 UI elements and icons that can be dragged and dropped onto a slide. One particularly useful feature of PowerMockup is the ability to add custom items to the library and exchange them with other team members.(Wulf 2012)

I think PowerPoint and PowerMockup make quite a good team for creating wireframes. However, wireframing is not about tools; it is about exploring ideas and encouraging communication. That means you should always use the tool with which you are most comfortable and that does the best job.(Wulf 2012)

Wulf, A. (2012). Wireframes: A Great Way to Start Development Projects. Available: http://www.infoq.com/articles/wireframes-start-development-projects. Last accessed 1st oct 2012.

http://www.infoq.com/articles/wireframes-start-development-projects