Mockup Web App & Storyboard Template

A web browser user interface template and storyboard outline to describe a user journey for a feature or function

[su_lightbox type=”image” src=”http://s3-eu-west-2.amazonaws.com/media.iotmethodology.com/wp-content/uploads/2019/01/09061547/THUMBNAIL-Mockup-Web-App-Storyboard-www.iotmethodology.com-v1.0.jpg”]A preview of the tool[/su_lightbox]

Type
Technical tool – helpful for capturing ideas for web application design and usage

How many people can use it?
2 – 3 people focusing on a specific scenario

Setup
Download and print

Tags
Prototyping, storytelling, User Interface design, User journeys

Related tools
Mockup Mobile Template, Mockup Desktop app Template, Storyboard Template, Mobile App Screens

Download Email
Facebook
LinkedIn
Twitter
[su_tooltip style=”bootstrap” position=”south” content=”This is free to mix up and reuse!”]Creative Commons License[/su_tooltip]

What is it?

A web app interface frame to sketch a User Interface how an application might work. This template also includes a storyboard outline to indicate how using this app helps contribute to the solution.

Using a collection of the web app mockup templates helps to provide an overview of different features an app might provide.

Why use it?

Visualising a solution helps you to workout the finer details and uncover how exactly a solution might work. It also makes talking to other much easier with a visual aid.

Ultimately these early mockups can be converted into wireframes and design by a development teams and provides a good starting point for gathering requirements.

When should it be used?

By the time you have a solution in mind, and assuming it requires some technological wizardry, there’s probably going to be an app involved. When there’s a specific feature, function or display required using a desktop screen – use this template.

How to use

Take a template and pens and sketch out what the user interface might look like, how the data will be visualised and how specific controls might appear and indicate what they do in the real world.

Hints

You don’t need to be a User Experience expert or artists to use this, a basic sketch and some description can go a long way to helping others understand.

If there’s no need for a desktop user interface in your solution, simply don’t use it. There are also many other UI Mockups included such as Mobile, Web browser and Smart watch interfaces.