Monday, May 14, 2012

Developing Better Software With Wireframes

powermockup
                           As a developer, you probably know the importance of specifying requirements to the success of a project. If you dive right into the implementation stage without a clear understanding of the needs and expectations of the end users,
you expose the project to a great risk of failure. To avoid unpleasant surprises, it is necessary to ensure that all parties are on the same page before any coding occurs. Misunderstandings are much easier to fix early in the process before anything is set in code.


                                           A simple yet effective way to discuss and visualize requirements is through wireframes. A wireframe is a block diagram that demonstrates the layout, content, and functionality of a user interface (UI). You can think of wireframes as blueprints that show the placement of UI elements, such as headers, navigation menus, and content areas. Wireframes are typically created in grayscale (or at least with minimal color) and kept free of design features such as drop shadows or rounded corners. This helps avoid premature discussions about visual design details in the early stages of the process when the focus should be on structural and functional issues rather than design. Most people involved in a development project benefit from wireframes. They give business users a better idea of the proposed solution, provide designers with a starting point for creating the final visual layout, and offer developers a clear picture of how interactions work and what they will have to code.


                                           While it is perfectly fine to sketch wireframes with pen and paper, at some point you may find yourself looking for a software solution. Personally, I do my wireframing in Microsoft PowerPoint because it is straightforward to use, has several powerful features (vector shapes, various import formats, export to PDF, etc.), and makes it easy to exchange wireframes with clients and coworkers. PowerPoint is also perfect for presenting a set of wireframes in the form of a storyboard. You can even build simple interactive prototypes by linking slides together. The only drawback to using PowerPoint is its lack of ready-to-use templates for UI elements such as buttons, drop-down boxes, or scroll bars. However, this gap can be filled with PowerMockup, a library of wireframe elements and icons for PowerPoint


                                PowerMockup adds an additional panel to the PowerPoint window from which you can drag and drop items onto a slide. The current version includes almost 90 UI elements and more than 100 icons, which can easily be searched by name or keyword. In addition, you can extend the library with custom items and categories. Simply select a shape, perform a right-click, and click “Add to Stencil Library” in the context menu. Custom categories can also be exported to a .pmst file and exchanged with others.


Labels: ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home