Monday 20.1 – Me-Fi Prototyping

We will continue in the MacLab, Astra building 4th floor, room 403.

On Monday we will finish projects’ paper prototypes and move to prototyping with computers. We suggest to use

For alternatives and more info, check this post.


A wireframe shows the hierarchy of the objects, such as headings, paragraphs, images, videos, buttons and menus as well as the main features of the app, page or service. The purpose of a wireframe is to give a quick overlook of the importance and position of various objects, and to help to assess whether or not something is missing or is out of place.

A simple low-fidelity wireframe usually lacks specific visual treatment – objects are pictured as boxes , lines and areas in white, black and shades of grey. General symbols, such as “play”, “settings” etc. can also be applied. Such approach makes the layout quite robust and easy to modify. Wireframing is an useful tool for the development process – when the structure is set, development can begin simultaneously with the user interface design and copywriting.


Example of a page and a wireframe (


Medium fidelity prototype

Me-fi prototypes differ from high fidelity prototypes in their “unfinished” look.  The purpose of such visualisations is to test (again) the logic of the layout, interaction and behaviour as well as the content – copy, titles, labels, menus… In case copy is not yet available, placeholder texts such as “lorem ipsum” are commonly used instead.

Developers might program simple prototypes, just to express the interaction between views. This can be done from scratch or for instance with a help of libraries like jQuery, CSS Blueprint or Bootstrap or APIs. However, all project are different so there is no standardised approach.

Graphic designers tend to use stencils and desktop design softwares such as Photoshop, Illustrator or Fireworks + UI packs. Connections between views can be done in Fireworks or images could be saved and interconnected with online applications such as InVision. Another approach is to use desktop or online application which is especially dedicated to creating mockups and prototypes, such as ProtoShareJust in Mind and Balsamiq.


Wireframe with interactions. (From ProtoShare)

Schedule for the 2nd week:

  • Monday – prototyping
  • Tuesday – design + prototyping
  • Wednesday – design + testing
  • Thursday – wrapping up
  • Friday – presentations