UX Design

Rapid Prototyping as part of user-centred design

A Rapid Prototype is a functional Website model with working navigation, images, graphics, text and even Meta information for Search Engines like Google. Prototypes offer many advantages over Wireframes, which are static non-functional outlines of Web pages.

Why Develop a Rapid Prototype?

Here are 10 good reasons why Rapid Prototypes provide a logical route for planning, scoping, accurately costing and building a Website:

  1. A prototype can be built in a fraction of the time it takes to build Web pages from a static Wireframe
  2. Prototypes allow you to test different page layouts and quickly agree on the most effective version
  3. Prototyping throws up details that are often “assumed” in Wireframing, and allows teams to remove these potentially costly assumptions in favour of agreed functional requirements
  4. Prototypes have working navigation so UX (User Experience) teams can test versions and agree on the most customer friendly navigation routes and interactive elements
  5. Prototypes confirm functional requirements in great detail and make it easy to favour or dismiss CMS platforms based on technical merit. Great if you’ve got a designer who claims he can build your multi-template, interactive booking Website with integrated checkout and sophisticated client area in WordPress!
  6. Some Prototyping programs print a detailed technical specification and this allows you to secure design & build quotes on an accurate like-for-like basis with zero assumption or potentially fatal interpretation
  7. Changes to designs are quick to establish in a Rapid Prototype so you can remove potentially costly reworks down the line
  8. Unlike Wireframes, which can scare people off because you have to think quite hard about how the concept will work in a real site, Rapid Prototypes are customer friendly, even for the most technophobic of clients
  9. Most Prototype programs are Web based so multiple team members can access the content, add notes or directions, then monitor the results
  10. Prototyping at the front end of a project will guarantee to save you time and money down the line

Prototyping typically goes through 4 stages, and this is duplicated when creating Responsive Design versions of the main Website that are intended for Smart Phones:


Sketch Designs

Some experienced UX Designers will plan the main pages of a Website as a hand drawn sketch first.

These people are experienced enough to get layouts on paper, backed up by supporting materials such as audience profiling, persona creation, focus groups, hypercard stacking and experience maps.

Rapid Prototyping - Initial Sketch Designs


Low-Fi Version

The Low-Fi (Low-Fidelity) version of the Prototype has the navigation set up and templates for the main pages. These pages are usually made up of grey blocks and subtle notes to indicate what is going where.

The Low-Fi version will be created in full scale, with working navigation, and will cater for the requirements of Responsive Design if specified.

Straight away, client and agency team members can begin collaborating.

Rapid Prototyping - Low-Fi Version


Med-Fi Version

The Low-Fi version is duplicated in a flash and we now start to add graphical elements using stencils and widgets.

Complex features such as pop-up interactions can be added so clients can start to get a real feel for how design and functional elements will play out.

Rapid Prototyping - Med-Fi


Hi-Fi Version

The Hi-Fi (High Fidelity) version is as real as the proposed Website.

Hi-Fi Prototypes include design compositions, real images, buttons, graphics, real text and even the information you need for SEO. They can also include custom components made with HTML, CSS or JavaScript.

Ideas are shared and discussed, feedback can be pinpointed and incorporated, buy-in can be approved from stakeholders and the best news of all is that everything is available from a single login protected repository, so there’s no trying to keep track of Email threads and attachments across several different locations.

Rapid Prototyping - Hi-Fi

Below: Comparison between Med-Fi and Hi-Fi version of a smart phone plan

Rapid Prototyping - Med-Fi to Hi-Fi for Smart Phone


So Why Bother With Rapid Prototyping? Isn’t This Just Adding To the Cost?

Unless you are planning a very simple Website with basic functionality, Rapid Prototyping can save you a fortune and even protect your project from potential failure in a number of areas.

  • Prototyping represents about 15%-20% of project cost but here are 5 top ways in which Rapid Prototyping will save you time, stress and money in the end:
  • A specification derived from a Rapid Prototype will help you rule out a CMS platform that might not be powerful enough or scalable enough to manage your life cycle requirements
  • Use the specification as part of your RFP (Request for Proposal) and benchmark vendor quotes accurately – none of this one price of £5k, one of £20k and one of £50k, all for supposedly the same service. Help your vendors quote on known factors with assumption taken out of the equation
  • Helps you agree on changes before the system goes to production, so you can cut out Feature Creep and Change Requests. These beauties drive more projects into financial dispute and relationship breakdown than any other event
  • Speeds up the planning and development process so you actually save money overall
  • Removes the headache and stress that is commonplace in projects that don’t use Rapid Prototyping.


About the author:

Philip Allen is the Studio Director at D. and a UX and Drupal Design Consultant. He works hands-on with every project that comes through the agency and champions the case for discovering the truth behind the way users need to interact with Websites.

If you’d like to talk to Phil, get in touch via the Contact Us page or give him a ring on UK: 0844 544 9553 or INTL: +44 (1) 202 546762.


Innovative HTML5 for One Page Websites

Why scroll down a web page when you can rotate, slide, fade and animate you way through the info?

HTML5 has brought a raft of innovative controls to help designers and developers manipulate objects on a web page. Now that modern browsers are finally getting a better grip on the fundamentals of web pages, it’s letting us creative types run free in designing a richer user experience.

One page websites are still exploring the limits of the effects they can use and often the user will be left to explore in a playful manner. Often the effects come as a surprise easing the user into a unique way of browsing a particular site so you’re never quite sure if you’ll end up navigating sideways down-ways, up-ways or slant-ways.

Sometimes the effects can be a little overpowering – almost to the point that the subject content becomes secondary but time will tell how well the better effects fair. It’s safe to say, the lions share of creativity in HTML5 is so far reserved for the promotional and information genre of website but we look forward to seeing these promising effects making the leap to powering eCommerce in a fresh new way.

La Moulade (Commercial)

HTML5 Effects, One Page Websites - La Moulade



Cadillac ATS Vs The World (Promotional)

HTML5 Effects, One Page Websites - Cadillac ATS Vs The World



Auxiliary Design (Agency)

HTML5 Effects, One Page Websites - Auxiliary



Lead Motion (Commercial)

HTML5 Effects, One Page Websites - Lead Motion



Ballantyne (Promotional)

HTML5 Effects, One Page Websites - Ballantyne



How does it work?

A new framework of controls became available with the introduction of HTML5 – and modern browsers are now natively compatible with these changes. Whilst older browsers can be made to comply, to a degree, with javascript workarounds, the modern browsers, which are also designed with mobile devices in mind, really let it sing.

Designers and developers can now control elements of a web page in a much more dynamic way so that specific objects can be animated, faded, rotated, scaled, moved, zoomed and so on.

These sort of effects were previously only typically achieved with the likes of the Flash plug-in but now a lot of this capability is hard-baked into the modern HTML language. Great news for all those mobile devices that restrict the use of Flash.


Creative:  Innovative and inspiring new ways to catch user’s attention in an ever competitive and expanding Internet

Commerce:  Strong potential across the board in the way we navigate generally and even to enhance how we shop online with more intuitive shopping controls/filters as well as more slick basket & checkout processes.

Education: Fast, engaging and interactive walk-throughs for otherwise lengthy and dull information.

Standardisation: A new set of tools to help allow all developers to ensure the fancier elements of an online experience become standard – and not the exception.


Graceful Degradation:  Yep, the usual. Waiting for everybody to catch up and get themselves a browser update! Until then, developers will be tearing their hair out for workarounds and fixes for those older browsers.

Too much bling?:  Some sites, heavy in effects and creativity, can sometimes outwit their own audience by designing something that is so unexpected, that it is missed completely. Hidden navigation has always been a gamble for a designer but with so much going on in some one page websites, there’s a good chance some elements of your audience will become disorientated and even distracted by the effects themselves. Hmm, lets not blame the tools though.


More examples:







Free Updates

Stay informed on our latest news!

Subscribe to Free Updates feed



Latest tweets