D. Agency - Knowledge Tonic

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.


Social Media Dimensions - Facebook

Facebook image dimensions. Prepare your profile image, cover photo and more with this handy quick start guide to get your account looking professional.

If you’re setting up social media, you’ll want to know what sizes all your profile pictures, banners and photos need to be for a professional polished presentation and to ensure you have a great looking social network to bolster both your company web presence.

Below we take a look at how the various zones on a Facebook profile can be used for both personal and company purposes.

Personal Facebook

Personal Facebook Example

Company Facebook

Facebook is a great way to promote your business and it’s completely free. A dedicated account can be set up solely for your business and you can use the various image areas creatively to really push your brand, products & services and connect with your audience.

Facebook is a great way to directly engage customers & fans alike. It allows people to publically ‘like’ aspects of your page, which in turn, generates a positive impact on others.

A Facebook page is not designed to replace a company website but it can work in parallel with it. Use it to promote products & services, relay news & events, and volunteer bonus insights into the way you work for a transparent and trusting relationship.

Perhaps product/service tutorials or video diaries or help guides will help customers make decisions. You don’t have to give away all your trade secrets but it’s a great platform for informal education. It’s entirely up to you but give your audience a reason to keep coming back. Every step of the way you can direct people back to your main website and funnel people to your specific goals and calls to action.


Company Facebook Example

inFUSed Group Wins Four Enterprise Challenge Awards Including Overall Company of The Year

inFUSed Group Wins

inFUSed Group, the company created by students from Ferndown Upper School as part of The Enterprise Challenge achieved a virtual clean sweep at the 2013 final award ceremony this week.

The company, led by young Managing Director Dom Keeyley and his team, achieved success in the following categories:

  • Overall Company of The Year 2013 
  • Sales & Marketing Award
  • Finance Award
  • Managing Director Award

inFUSed Group was set up with sponsorship funding from mwa Digital and sixteen other businesses in the region.

A regional business leader mentors each group of students throughout the process and recognition also goes to Danny Godfrey, CEO at Renewable Energy Company The Warmer Group who inspired the students to success.

We would like to congratulate everyone who contributed to the cause and of course hats off to Dom and his board of budding entrepreneurs’ for a great achievement.

What is ’The Enterprise Challenge’?

The Enterprise Challenge is an initiative to help develop an entrepreneurial culture in local Schools with the intention of enhancing employability for our next generation.

Managed by the Enterprise & Skills Company in association with local businesses, the Enterprise Challenge is open to Years 10 and 11 in school, and Years 12 and 13 out-of-school.

Students are given the opportunity to make and sell real products to real people for real money using a company they have formed with the assistance of a local business mentor.

The project lasts for 16 weeks and concludes with a competition to find the ‘Company of The Year’, where students need to make presentations to a judging panel consisting of local business professionals.

The outcome is designed to nurture the skills required for success in education, employment, lifelong learning and personal development.

What does the program consist of?

As part of the process of creating a business, students appoint directors, name and brand their company, and decide on how to raise starting capital.

The newly formed company designs and manufactures an innovative product or products to sell at local Christmas trade fairs, defining their companies’ success by creating opportunities and meeting deadlines.

Students will also be responsible for the marketing, finance, sales and IT of the company.

Post Christmas, teams work towards a final company report (reflecting final accounts) and a professional 5-minute PowerPoint presentation.

Each company will compete against the other student companies in the Enterprise Challenge to win the coveted Bournemouth University ‘Company of the Year Award’, as well as many other sponsored trophies.

The program concludes with a dazzling showcase of talent judged by prominent local business people.

inFUSed Group Wins

The 15 Column 1200px Grid System

A logical approach to planning & prototyping your new, responsively designed website.

1200px Grid System

Grids have always been an important planning element for designers. They know that a well gridded layout can help ease a user’s cognitive load and help them scan a page with far greater efficiency than one that is chaotic and misaligned. With responsive website design (RWD) now firmly embedded in the industry, determining a workable grid system has never been more important.

In this article we’ll take a look at the 1200px Grid system.

Why 1200px?

All modern monitors (mostly wide-screen) support at least 1280 x 1024 pixel resolution. In January 2010 76% of the computers where using a resolution higher than 1024 x 768 px.

1200 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 40, 48, 60, 80, 120, 150, 200, 240 and 400. This makes it a highly flexible base number to work with.

The 1200px Grid System is based on the 960 Grid System of Nathan Smith.

Determining the Grid’s Complexity

Within the 1200px grid, we need to decide how may columns we will use to form the core language of our grid system. We need enough columns so that we still have a usable grid at the very smallest device sizes but too many columns can over complicate things and be counter productive.

For the purpose of this article, we will choose 15 columns across 1200px. This results in 60px wide columns, separated by 20px margins and capped by 10px gutters left and right.

That’s a happy compromise, which will flow out nicely as we continue to explore the grid across all the other device sizes...

Responsive Break Points

We now need to decide on what are called ‘break points’. A breakpoint is where our website will be re-styled when we change from one size range to another.

Here are some popular break point sizes.

Smart Phones (Portrait) 320px Wide (minimum)
Smart Phones (Landscape) 480px Wide
Tablets (Portrait) 720px Wide
Tablets (Landscape), Laptops, Small Monitors 960px Wide
Larger Desktops 1200px Wide (maximum)

There is an argument to say that just because desktop monitors are getting larger, users don’t necessarily experience websites at full-screen at such sizes so we need to consider these trends carefully and not over-engineer things. This is why we don’t produce breakpoint above and beyond 1200px.

The Responsive Grid

Within the breakpoints, we can simply determine the maximum number of our 60px columns that will fit into these size-ranges and this allows us to final produce a grid for each scenario.

Smart Phones (Portrait) 320px Wide (4 Columns)
Smart Phones (Landscape) 480px Wide (6 Columns)
Tablets (Portrait) 720px Wide (9 Columns)
Tablets (Landscape), Laptops, Small Monitors 960px Wide (12 Columns)
Larger Desktops 1200px Wide (15 Columns)

We now have 5 grids to help us plan our responsive website.

Use the grids to rapid prototype and collaborate with the client so that they can see well in advance exactly how their responsive website will play out across the devices and allow them to see the challenges that lay ahead!

Click here to view a working demo to better see how the grid adapts as you manually scale your browser up and down.


Related Links:

The 960px Grid System

The 12000px Grid System


How Working With Monkeys Can Help You Nail That Home Page Elevator Pitch

Networking - How to Prepare a Networking 1 Minute Pitch by Dee Clayton

"How to Prepare a Networking 1 Minute Pitch" by Dee Clayton

Constructing your Home Page Elevator Pitch can be a real challenge.

For those of you not familiar with the term, an Elevator Pitch is what you say in about 10 seconds when someone says, “What do you do?”

In a sales promotion or networking environment, this actually translates to, “What do you do and should I be bothered?”

The relevance to digital is of course your Elevator Pitch ‘should’ be what grabs a users attention when they land on your Website Home Page.

If you tackle this task without getting your foundations right, it can be a painful experience.

Everything you seem to want to say about your business has been done by your competition and nothing seems to really define why you are different.

It’s all too easy to slip into industry speak, cliché, gibberish, and in the case of one project I saw go live recently, the company bowed out completely and decided to tell people what it ‘didn’t’ do instead of what it did do.

I didn’t know whether to put that one down to a lack of faith, insecurity or just bad advice.

So in the absence of a full-blown persona creation and message strategy, I came across a great resource from an award-winning presentation skills and public speaking coach that could really help you.

Dee Clayton is the author of ‘Taming Your Public Speaking Monkeys’, a book written to help people deal with Public Speaking and become more engaging presenters.

She is also an ex-marketer, although in my book good marketing is a state of mind so once a marketer always a marketer I’d say.

Dee has always worked frontline on the agency side with big brands so she knows all about creating a value proposition and increasing purchasing intent.

Her latest freebie is a great guide called ‘How to Prepare a Networking 1 Minute Pitch’, and you can download it completely FREE right here.

You don’t even have to register or dump your Email address in to get it.

It’s a 4-page PDF document based on Four Simple Steps and examples along the way.

Although the guide is written to help with networking and yes you won’t keep new visitors to a Website glued to the Home Page for a full minute, its really easy to see how you can pull elements of your 1-minute wonder back into bytes for your Home Page Elevator Pitch.

Let me know if helps, and if you have problems with Public Speaking Monkeys, Dee is really good with that as well.



Free Updates

Stay informed on our latest news!

Subscribe to Free Updates feed



Latest tweets