A blog sharing resources and inspiration for designers

  • Jul 03 / 2013
  • 1

How and why to make a clickable prototype

Resources, Tutorial, Web Design

proto

When I say clickable prototype I’m talking about a series of flat pages/designs which have basic functionality to let you click through to each page.

When I was first asked to create a clickable prototype I was totally against it, I didn’t want to waste the time which I was allocated for design on creating this clickable HTML file which I didn’t think was even necessary. I’ve since been proven very wrong, I now see a clickable prototypes as an essential tool in the design process to inform the design, help the client understand how the site will work, assist the developers is knowing how you picture the site working, and filling any holes that exist.

There have been countless times that you design a site and then towards the end of the project you realise there are pages which haven’t been created yet, developers will ask ‘where is the Terms page?‘, ‘what does this pop-up look like?‘, so many little elements that you sometimes skip over in design. The prototype helps fix this by showing you exactly what hasn’t been designed yet so you can address it earlier and do it properly instead of rushing to finish those pages in the little remaining time that you have.

To put it simply, the process that I’ve been following has been this:

  1. Clickable wireframes
  2. Look and feel/clickable designs
  3. Development

The first clickable prototype would include wireframes of the site. A wireframe is simply a blueprint of the website, it’s a visual guide (usually black and white) that represents the framework of the website and the hierarchy of content. Here’s an example of a wireframe:

wireferame1

After the wireframes have been approved we move on to design. There’s an initial mood-board and experimental stage when you create your look and feel for the site and work with some typography, buttons styles, colours etc to get a basic style created. I’ll create another post detailing my methods for this soon. Once you have a sweet direction created, you start to design the pages of the website. At the start you won’t have all of the pages designed, but it’s still valuable to update the prototype with your designs.

At this stage the prototype might have one homepage design, and two remaining pages still in wireframe stage:

design-wireframes

Having your design in the prototype lets you check that all the buttons are there, all the things like pop-ups & footer links which are often overlooked actually exist and are in an accessible position, and that everything is consistent across different pages. Showing the client at this stage also helps them understand the progress and even allows approval page by page which makes the whole process run smoother and quicker.

Creating the clickable prototype

Step 1 – Save all your wireframes/designs as flat images

Make sure these image files can be viewed online, I usually just use png or jpg files since they are pretty universal and can be seen on most devices. Save them all into a folder and name them properly so you can easily find what you’re looking for, when you start working with more complicated sites the file naming becomes very essential.

Step 2 – Create a HTML document for the first page

I use dreamweaver for this step but feel free to use whatever program you prefer, I find dreamweaver to be easy and quick for what we need to do here. Create a blank HTML file.

tutorial_1

Step 3 – Insert the image file for that page

tutorial_0

Step 4 – Create the Title of the page

There is box called ‘Title’ which appears at the top of the program, click on the input box and change it from Untitled Document to the name of the page, for example ‘Website – Home’.

tutorial_2

Step 5 – Set the margins to 0

We want to set the margins to 0 so there’s no space around the edges of the page, this helps show the most realistic view of how the site will look once built.

Right click on the page and select page properties, enter 0 pixels into all the margin boxes for top, left, right, bottom.

tutorial_3

Step 6 – Save your work

Save the page with a corresponding filename. At this stage you should have a folder structure like this if we’ve set up the home page:

  • index.html
  • website_home.jpg
  • website_about.jpg
  • website_contact.jpg

TIP – Name the homepage of your site as ‘index’, when someone enters the main directory of the URL without having a specific page in the URL, the web browser automatically points you to the index page. This is helpful so you can simply tell people to goto your main URL like halaska.com.au instead of halaska.com.au/my_website_homepage.html

Step 7 – Set up the Hotspot links

In Dreamweaver click once on the image, this should bring up the image properties box. Select the rectangle hotspot tool from the Properties panel and then draw a box around your navigation button or whatever element you want to link up.

tutorial_5

Enter the link to the page you wish the hotspot to goto, we are going to link our a page called website_about.html.

tutorial_6

Leave the Target field empty unless you want the link to open in a new page within the web browser. You would only really want to do this if you are linking to an external Terms and conditions page or if you have another link which goes somewhere like youtube etc. The main focus should be to keep the user on your page, but if you do want it to go externally you can select ‘_blank’ from the dropdown.

tutorial_7

Repeat the above steps for every other element on the page which you want to link up. The things I usually link up are the navigation, footer links, text links, buttons, and images if need be.

tutorial_8

Step 8 – Set up the remaining pages

You could manually set up every page like above, but if your pages use a similar layout it’s usually beneficial to just duplicate the HTML page you just created and rename it. In our example we are renaming the file to website_about.html. Open the page up in Dreamweaver and click on the image, a ‘SRC’ field will show the location of the image in the Properties panel, change the value to be ‘website_about.jpg’ instead of ‘website_home.jpg’.

tutorial_9

Update the page title and move the hotspots around to match the positioning of those elements on your page if needed. To do this just click on the hotspot, make sure the ‘Pointer hotspot tool’ is selected in the properties panel and then drag the boxes around to the new positions.

Click on each hotspot and update any links that need to change, for example since we are on the About page, we would need to set up a hotspot to take us back to the home page.

TIP – You can select multiple hotspots and then copy and paste them onto other images in other pages, this is helpful down the track when you may change something like the navigation menu and want to quickly apply it to multiple pages.

Step 9 – Test it

Open the home page up in your internet browser and test, test test. This is the time when you realise ‘oh crap, I forgot to design the pop-up for that link’, ‘Why do I have a back button on the homepage if it takes me no-where?’ or ‘where does this button take me? There’s no content created yet…we need to chase that up‘.

Step 10 – Upload it

You can upload the site files to either an internal or external server via FTP for review. You can either set up some sort of preview environment or just link to the specific page. For example I’ve uploaded my files to halaska.com.au/tutorials/clickable-prototype/

This link can be shared with client or just the internal team for them to review and see the progress as you go.

Step 11 – Updating it

If you’re just updating an existing page all you have to do is save over the existing image in the folder and then update any links/positions that might have change in the hotspots.

If you’re creating new pages just follow the same process as I went through above. If you’re deleting pages just remove them from the folder. When you add/remove pages make sure that you update all the links throughout every page so there are no dead links.

Make sure you version control your prototype before making any changes. The easiest way to do this would be to duplicate the whole folder and add a ‘v2′ or date to the folder name on your local machine. When uploading to the server you should just replace the items in the main folder so the preview link doesn’t change.

Step 12 – Test it again

 

Hopefully this tutorial has helped understand how to create a basic clickable prototype for your website. What happens after the prototype is approved will depend on how you’re getting it developed, bot nonetheless it’s going to help you design a website with a thought-out user experience and that will help the developers understand how it works. It’s also great for showing the team/client progress as you go.

I’ll post a follow-up tutorial on how to make a responsive clickable prototype soon, it sounds a lot harder than it actually is, so stay tuned!

 

Written by Chris Halaska

I'm Chris Halaska, a graphic designer from Sydney Australia. I work mainly in the digital space creating interactive experiences, apps, conceptual ideas, illustrations, animations and more. My work incorporates the best user experience merged with well-crafted designs to create a functional and visually pleasing product. You can view more of my work on my Portfolio, Dribbble, Behance or Twitter.

One Comment

  1. Peta Bellamy

    Nice one buddy! Couldn’t agree more. It takes out the guesswork and imagination of clients, who find it hard to visualise how the thing will hang together and the user experience of the site. I’m currently trying this with an app which has a complex set of user journeys. Wish ne luck!

    Reply

Leave a comment