This chapter introduces you to the concept of making wireframes of web site projects, and how to create them. The rest of this chapter looks at creating UI specs and prototypes. These three topics are important when designing a professional web site to allow you to keep the client and the rest of your team clear about how the design is progressing, and to be able to communicate requested changes.
This sample is taken from Chapter 3: "Wireframes" of the Glasshaus title "Usable Shopping Carts"
The most commonly used Wireframing tools are Microsoft Visio, Macromedia Dreamweaver, Adobe Illustrator, Macromedia Freehand and sometimes Macromedia Fireworks or Adobe Photoshop. I recommend using a tool that allows for easy changes and for quick production of the screens. Something like Visio or Dreamweaver will work very well, depending on the results you are looking for, and your learning curve:
* Visio will produce very rough Wireframes that are only viewable as a flat image, but they are easily updated, and can contain as many comments as needed. However, Visio is more complicated to use than, say Dreamweaver.
* Dreamweaver will produce actual HTML pages, with screen elements that are both realistic and semi functional - which is half way along the road to prototypes - make sure you keep it simple at this stage! We will get to prototypes later.
Whichever tool you choose to use, please remember what sort of output you need to create. For instance, if you are printing to paper and it must look good, you might want to use a page layout program such as Quark. On the other hand, if you want to share the Wireframes across the Internet, using an HTML creation tool or web compatible graphics program might be better. Visio has an advantage here - you can choose to optimize Visio diagrams for screen or print.
George Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. The most popular for its over high-quality Dreamweaver extensions and templates.
George is also the founder of Wappler.io - the most Advanced Web & App Builder
Comments
Be the first to write a comment
You must me logged in to write a comment.