the markITeer

Creating a web mock-up

Posted by the markITeer on July 31, 2007

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

8 Responses to “Creating a web mock-up”

  1. What you call a prototype is the same as building wireframes?

  2. Kenny said

    Strong stuff indeed. Especially the “assigned too” feature is nice.

  3. markITeer said

    @Serge: Wireframes are basically prototypes with little to no visual design elements (‘prototype’ is a more generic term). The example I created for EmailGarage could indeed be called a wireframe.

  4. how do em invent a mock website??
    can u help me?

  5. Peter said

    It’s been quite a while since this article been written and theres whole breed of new inexpensive tools (justproto, balsamiq, iplotz, justinmind, etc.)

    I encourage you to try our tool
    Its simple, easy and has couple of unique features e.g. real time collaboration, IE support etc.
    We have a FREE TRIAL

  6. Peter Severin said

    Yes, there are many new generation tools that greatly simplify the development of mockups and wireframes. One of them is WireframeSketcher which is a plugin for Eclipse-based IDEs such as Aptana, Zend Studio, RadRails, MyEclipse, Flex Builder and others:

  7. Hello !, useful publication…. I publish on this blog because you probably could be able to help me. I know, it’s not the exactly exactly place to publish but … I want to have a 100percent free hosting company that accept Perl. Do you believe that I can find a trusted link or better a good free hosting list or something like that… etc… for what I wish ? just 1 thing: Do you know totally free ads free hosting ?? How have you built your blog ? Bye

  8. wp themes said

    wp themes…

    […]Creating a web mock-up « the markITeer[…]…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: