Wireframe & Mock-up
The name is based on a literal frames made of wire. It will allow you to view the basic layout of a website, its contents, or navigation system. A Mockup is a useful tool if you want to test graphics and design as well.
You will needonline tools or pen and paper
Time60 minutes and more
Difficulty2 – mockups are more demanding than wireframes
- 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)
- Clear up whether you want to model functionality or visual aspects of the website.
- You can find a number of tools and apps for creating wireframes and mockups. However, paper and pen can do the job, too.
- When modeling, make sure that your design follows the general principles of information architecture, content strategy, and your knowledge of users.
- The model should be real-like so that your users can imagine the final outlook of a given product or service.
- Test the models with real users or take advantage of the models for a team work.
- 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)