Website Design and Prototypes

Producing a Website: The First Step is to Prototype

Many amateur web developers may not think about the need to design their websites ahead of time. However, the best web designs are often produced from prototypes produced either before or during the coding of a website. Designing a website prototype is not too difficult and many clients may want one to provide feedback on a web development project. 

Designing a prototype need not entail actually creating a working website or an interface. Many developers create a non-working design that lays out the website in a purely visual sense. Based on this prototype, developers can receive feedback and make changes to the design. A prototype also allows the developer to design the website interface from an artistic or visual design angle which can be more intuitive than merely creating a web interface in HTML or XHTML code alone. 

Making a prototype is easy and almost everyone probably has some tool or application that can be used to produce one. Applications such as Microsoft Office, Photoshop, Visio, and many freeware programs can be used to produce prototype designs. Some developers have even used Microsoft Access to design web interfaces. While there are specific prototype tools available, a web developer does not need to expend too much money to create a prototype. A non-functioning web design can be illustrated quickly using Photoshop or even Microsoft Paint. Other prototype design tools can include WYSIWYG Web design programs and illustration applications. 

During my first year in graduate school, I had to help design a web interface for a system analysis class. In order to proof the design, I used Photoshop along with a WYSIWYG web design program to develop a working prototype. While the prototype was not an actual web site, the menu bars would work by displaying menu choices. The prototype could also allow anyone to test the input boxes to see how well the design would work for someone entering information into the website. Based on the prototype, it was possible to test the web design and then redevelop it for better interaction.

Prototypes are a great way to test a web site design to see if potential clients or customers will find it both usable and satisfactory. Some developers create prototypes of just a section of a web page such as a navigation menu or an image to test one element. Other developers may even produce multiple prototypes to show different possible designs and then a client can choose the most preferred design.

To create a prototype, a developer generally needs to show the visual elements or representations of those elements on a prototype display. This means that a developer needs to show all or some of the elements that visitors would see if visiting the website when finished. However, this does not mean that a prototype has to appear finished or even well design. Many prototypes use simple lines and boxes without extra images to show just the structure of a page or interface.

Most webpages have common elements that can be included on a prototype. These elements can include a navigation menu or bar, links on the side, the site logo, one or more content areas, and some type of site information placed on the web page. Other elements can include input boxes, menus, page controls and even accessibility functions. While control boxes or menus need not be functional, some developers may have functional elements in a prototype. Deciding on whether the prototype should appear as a rough design, a functional design, or even a near finished design, can depend on the developer and client. Many clients may view a finished prototype design as an unchangeable system and may not wish to make changes that are needed. 

For many web developers, a prototype can be an excellent aid in producing a more professional and appealing web site. Many professional websites have very visually appealing layouts that are first designed in some form of a prototype model. Prototypes can help developers see any problems in the web interface or layout that should be changed before the site is coded or is finalized.

Some of the best web design tips aren't found in a book, or even the classroom; they're online! Consider learning web development online with the best website tutorials for CSS, Flash, Dreamweaver, SQL, PHP, XML, and so much more.

At TopTenREVIEWS We Do the Research So You Don't Have To.™