What is a web design prototype?

A prototype is a working website that establishes functionality without any design. They are simple black and white website outlines that allow clients to understand functionality before design. Our research shows that having clients approve functionality before design, allow The Web Showroom’s clients to better grasp the website design process, especially for complex e-commerce and directory sites.

Why do web design  prototypes?

In short, we prototype because it works. You'd be hard pressed to find a builder, architect or landscaper that'd embark on a major project without some kind of floor plan, blueprint or schematic and website design is no different. Having a prototype allows us to take your anticipated functionally, organise it and present it in an easy to understand format.

The benefits of website prototyping

It shows the site architecture visually

Seeing your website take shape in front of you is infinitely better than seeing it on traditional wireframes or storyboards. Placeholder elements for call to action buttons along with the main navigation headings, banners, images, content etc also make it easier for you to develop a visual hierarchy for the home page and other pages.

Feature showcase

Getting to see the features in action is another great benefit to prototyping. Seeing how modules like Ecommerce and Directory perform when given real-world requests enables you to evaluate the process to see if any changes need to be made. Even simple elements like a gallery or animated banner can be represented in the prototype to show how they present on screen.

Focus your objectives, both site wide and per page

A prototype does not display design elements, because eliminating them better enables clients to focus on the overall objectives and functionality of their site. Put design aside for the time being and ask yourself some questions - Is the content relevant and visible? How much content do you have? What are the areas of the site you want to push/promote? Are key elements above the fold? Are your contact details clearly stated? Is your website's purpose clear from the second you land on the home page? Can you find what you’re after with a minimum of fuss?

It helps us as web designers

Designers love to think ahead to the time when they can get stuck into Photoshop, and prototypes aid that process greatly. Being able to briefly 'crystal ball' potential styles, techniques and trends that might suit your site saves time at the design stage.

Saves time

Adding the process of prototyping might seem like an extra process but The Web Showroom - and indeed the web design industry as a whole - has found that without prototyping the timeline for a project actually increases.  Giving dedicated thought to the site’s functionality, navigation, site structure, user flow and content at the very beginning makes for a solid foundation for the site to sit on – then it’s just a case of us wrapping a great design around it.

What doesn't a web design prototype show?

Graphics/design

A prototype won't show graphics - they're unnecessary distractions that are best saved for when your project enters the design phase. Placeholder graphics to illustrate elements like call to actions, animating banners and slideshows are used but even then they are black and white to maintain focus on the page’s objectives.

Exact Layout

Whilst the prototype can shows a site’s components they are by no means laid out exactly - a prototype's prime purpose is to focus on the functionality of the site and establish its site structure. A more exact placement of elements comes down the track when the project progresses to the design stage.

Prototyping a Web Design

Prototyping is a valuable part of the web design process and with projects becoming increasingly complex, it's critical that the functionality of your site is nailed down before a designer even thinks about opening Photoshop. At the end of the day we find that the more thought that goes into the prototype often gets rewarded with the project finishing ahead of time, on budget and to specification.

Without turning into Jeremy Clarkson, think about prototyping in terms of a sports car. A sports car could be wonderfully designed and beautiful to look at but if the chassis is made of breadsticks its performance is going to be less than fantastic. Effective prototyping benefits you, your website designer not to mention your users who - when the site goes live - will thank you for creating a user experience that was simple, enjoyable or in a best case scenario, worth talking about.