ICS 125: How to 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.

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.