3 Step Prototyping Process - Explained

I haven’t had time to produce an official presentation on the 3 Step Prototyping Process but as a rough guide it is along the lines of the following:
http://www.hostpipe.co.uk/what-we-do/website-augmentation -> scroll down to the section about the process.
Before we start the process the design brief consists of:
  • the customer providing us with 6 links to websites which they like
  • naming specific features of those sites they like (colours, fonts, features, imagery etc)
  • having sight of their brand guidelines (which should include details of their colour schemes, logos and fonts)
  • looking through our preferred theme websites and choosing a maximum of 2-3 themes that they like and list them in order of preference.
The theme sites we use are:

  1. Wrap Bootstrap - https://wrapbootstrap.com
  2. Theme Forest - http://themeforest.net/
  3. W3 Layouts - http://w3layouts.com/
Once we have that information we start the 3 Stage Prototyping Process which consists of:
Stage 1 Prototype – Home Page Above the Fold
Essentially we apply the 7 second rule at this stage, the prototype is not functional, it represents what the user will first see when they land on your website for the first time. It will encompass your:
  1. Logo/branding
  2. Colours-schemes
  3. Fonts
  4. Hero shot (main banner image)
  5. Strapline/call-to-action
  6. Navigation


Stage 2 Prototype – Rest of Homepage
Once Stage 1 is signed off and we know that the core message and branding is accurate, we move down the home page implementing the requested home page features down through the footer ensuring that all calls to action are explicit and that the rest of the page is aligned with the branding etc from Stage 1. Again, this layout is not functional, you cannot click through to any other parts of the site, but it represents what the end user sees when they scroll down the home page for the first time.
Stage 3 Prototype – Rest of Site
After Stage 2 is signed off we can start work on the rest of the site, we create 4-5 sub page layouts for the user to see (this usually includes a couple of content page layouts, a contact page and a blog page and blog sub-page).
Only once stage 3 has been signed off do we then start to actually integrate these layouts with the CMS. Because we request sign off at each stage it means that when we built the site there should be no further “finessing” during the build process so that ultimately we can concentrate on delivering a finished website to the customer. You may have guessed it at this stage that the Prototyping process replaces the traditional web design/wire-framing route of knocking stuff up in Photoshop first. What you actually end up with a working prototype of the website, which is already hand coded with HTML5/CSS3 ready to implement into the CMS.
The critical thing, THE MOST IMPORTANT THING to emphasise is, that we are not just implementing themes! We are actually still hand-coding the sites so that quality of build is not compromised. Design quality is not lost because the client is engaged regularly throughout the process and it is a graduated process to evolve a website. Building websites nowadays is no longer about creativity it is a science - a bit like evolution!
Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk