ICS 125: How to make HTML mockups
Why make HTML mockups?
- Mockups are sketches of some aspect of a system that has not
been built yet. Usually it is the UI that is mocked-up, but other
aspects can be mocked-up as well. E.g., performance, or weight of a
physical product.
- Usually a "mockup" is a model that does not work and never will.
Eventually, you will set the mockup aside. In contrast, a
"prototype" is a simple model that partly works, and it could evolve
into a full system. Or, you could set the prototype aside and start
over.
- Mockups are a tool for requirements gathering and validation
- They help you put vague ideas into concrete form, so that you can revise them.
- They help all team members understand how the eventual system will work
- Stakeholders (e.g., customers) can understand and give feedback on mockups
- Mockups can sometimes evolve into prototypes
- UI Mockups can be done using paper-and-pencil, GUI builder, or HTML. I recommend HTML:
- You can easily cut-and-paste between the mockup and your notes or documents.
- You don't have to be an artist. It is easy to have readable text.
- You can easily model screen flow and fake behavior.
- Stakeholders can evaluate an HTML mockup over the Internet.
- If you are building a web-site, the mockup can become a
prototype fairly directly.
Why not to make an HTML mockup?
- If you don't know who the users are or what their needs and
tasks are, then you should focus on that first.
- Customer don't usually pay money for mockups. All the time
spent on mockups is a cost that does not directly generate revenue.
But, it can indirectly lower costs or generate revenue.
- Some UI's could be mocked up better using a GUI-builder or
paper-and-pencil.
How to make an HTML mockup
sample use cases templateexample software testing plan templateProject plan template