For
many businesses, summer holidays are a period of slightly less stress
and slightly more time to spare. Time to for example think about
redesigning the old website. Traditionally, one would start with a good
brainstorm, unleashing (hopefully) everybody’s wildest fantasies and
ideas. But soon after, the difficult task of making these dreams
reality will soon pop up and somebody will have to create a first
sketch of the website.
This is where web mock-ups come into the picture. A web mock-up is basically a sketch or an early layout of a website. In theory, the difference with a prototype is
that a prototype is ment to function, even if not fully so, whereas a
mock-up is only ment to look like the finished product. But when
speaking about a simple website, the two terms can be used
interchangeably.
The aim is to quickly concretize ideas without too much hustle. This
way, you can test and get feedback even in the early stage of
conception. This feedback can than be incorporated back into the
mock-up, until it reaches the point where everybody’s happy and
designers and developers can take over to create the real thing.
In
practice, a web mock-up will look like a number of boxes representing
different elements on you pages such as banners, content blocks,
navigation etc. No design, no functionality. The only ‘functionality’
that will be really there is the linking between the different pages so
the flow of the website can be tested. As an example, I created a small
mock-up for a part of the new EmailGarage website. Check it out here.
In prototyping terms, this way of working is also known as ‘rapid
prototyping’ which stands for converting abstract ideas as soon as
possible into real, concrete proposals which can be iterativaly
enhanced using tester’s feedback. Rings a bell? Yep: this is indeed
what you can also find in the web 2.0 ‘Getting Real‘ phylosophy.
So how do we do it? What tools are there to create such mock-ups?
Basically, you could catalogue the tools that are most commonly used for creating web mock-ups into 3 main categories:
1. tools for the real prototyper
2. tools for the designer
3. tools for the webbuilder
Category 2 and 3 require specific skills: in category 2 we can find
tools such as Adobe Photoshop or Fireworks, which can be used to create
grapically perfect-looking layouts. In category 3 we can find the real
web-building tools like Adobe DreamWeaver which can be used to create
fully functional and picture-perfect websites. Although both types
clearly have their merits in the development process of web sites, they
are not appropriate for creating web mock-ups.
Below you can find a comparison table of some commonly used (and abused) tools. I tested them on a number of different criteria:
- support for master pages:
can you create e.g. a basic navigation frame that is automatically put
on all pages without having to copy it to every page? If not you would
have to make a correction to the navigation structure of your mock-up
on each and every page, instead of just once on the master page.
- support for links on the master page:
a number of tools offer support for master pages, but the links put on
the master page are lost when you create the final HTML.
- support for page scrolling: does the tool support pages that are longer than one screen?
- support for page notes: the ability to add notes to a page
- support for element annotations: the ability to add extra information to page elements
- export formats: which formats are supported for exporting your web mock-up.
- support for navigation tree: can you create a navigation tree for your mock-up, or are all pages on the same level?
- users: what category of users does the tool address?
- platform: on what platforms can the tool be installed?
- pricing: what does it cost?
Although rather costly, I very much like Axure RP Pro 4.
It’s simple user interface and enhanced functionalities allow you to
create really quickly good web mock-ups (see also the example above).
That’s it.
Happy prototyping!
links : Denim, ConceptDraw WebWave, Axure RP Pro 4
