You will need

online tools or pen and paper


60 minutes and more


1–2 colleagues


2 – mockups are more demanding than wireframes

Use when...

  • you have materials for the design of a website or an app
  • you are unwilling to invest large amount of resources to the final version of the product before it is tested

Do not use when...

  • designing a material product or service (it is better to use other methods, e.g. 3D Model or Storyboard)
  • your budget does not allow you to create your own layout design (in such case, go to the web and choose one of the available ready designs)


  1. Clear up whether you want to model functionality or visual aspects of the website. 
  2. You can find a number of tools and apps for creating wireframes and mockups. However, paper and pen can do the job, too.
  3. When modeling, make sure that your design follows the general principles of information architecture, content strategy, and your knowledge of users. 
  4. The model should be real-like so that your users can imagine the final outlook of a given product or service.
  5. Test the models with real users or take advantage of the models for a team work. 
  6. Always adapt the service according to the ways users actually work with the models.

Keep in mind that...

  • you can also start with a paper and a pen
  • you do not have to reinvent again and again − the Web can provide you with lots of designs that are suitable for your purpose, you can draw some inspiration from them
  • when reading your webpage, the track of your user’s sight is going to follow the shape of either letter F or Z (so-called F-pattern and Z-pattern)

Find out more

In the design phase, you can use the following methods…

Download the book Service Design in Libraries

It includes detailed descriptions of case studies from both the Czech Republic and Norway.

Download the book  

Get the design methods card set

You will always have a ready help, which will tell you how to proceed, and which tools to prepare.

Get the card set