Join Jim Babbage for an in-depth discussion in this video Understanding rapid prototyping, part of Fireworks CS4: Rapid Prototyping.
As websites and applications become more and more complex and clients become more sophisticated in their expectations of deliverables, it becomes very important to map out and demonstrate the interactive process and user experience before the project hits the coding stage. Prototypes give you and the client a chance to work out both logical and cosmetic issues without impacting the time spent in actual production of the website or application. Prototyping can also avoid the great expense and difficulty of changing a finished software product. Now, a prototype mainly simulates a few aspects or features of a final application.
For example, the process for filling out an online form may only be demonstrated with a small sampling of products rather than the company's entire database. It usually begins in an even more simple manner like we have here in this wireframe. Where different pages or different structures are mapped out in a very, very simplistic manner, just to give the client a sense of the flow and function of the site. Now the term rapid prototyping is pretty self-explanatory. In fact, it's become one of the buzzwords these days. The ability to create what is for the most part, a functional yet disposable mockup is key to a smooth, time-efficient workflow.
In a nutshell, the project spec is created, preliminary requirements are agreed to, a simple working model of the project, like this wireframe for example, is designed to visually show the users how their requirements will behave when they're implemented in a finished system. From there we can move into mockup where we actually see visual design elements, color schemes, a range of different layouts and so on to give the client a sense of how the actual project will look, not just function. Fireworks has several strengths in this area. Programmatic elements used to create or mimic interactivity such as rollovers or database searches, etcetera, can be created inside of Fireworks and then eventually properly coded in the desired application language.
And all this talk about disposability isn't to say that the graphics can't be repurposed, because Fireworks is a powerful graphics application and not just a pure prototyping application. The graphics can be sliced, optimized and repurposed for the final project, be it a website, an RIA or a desktop Flex application. The whole idea here is speed. The client tells you the requirements and you build the prototype for their review and feedback early in the development cycle. Changes can be made quickly based on client feedback and a new prototype can be generated. In this course, we'll be exploring different prototyping options in Fireworks by examining and working with wireframes, storyboards and completed prototypes.
- Using screen-sharing applications for review and feedback on prototypes
- Emulating a Spry accordion panel with the Grid auto shape
- Storyboarding wireframes to make them more realistic
- Adding navigation and design variations to elicit comments
- Building multi-page mockups and adding interactivity
- Inserting rollover states in prototypes
- Using Flex skins in final mockup sets