Secret ingredients to quality software

Storyboarding - Do you conduct specification analysis by creating mock-ups?

Last updated by Brady Stroud [SSW] on 11 May 2021 01:26 am (3 months ago) See History

Complex documentation can waste time. Many user requirements can be best encapsulated in screen mock-ups. Spend more time on mockups compared with time on documentation.

Storyboarding is a technique taken from movie production.

movie storyboard
Figure: Movies are expensive to produce, so directors do storyboards first and then the product designer, costume designer, lighting people etc. all know what they need to do for each sceneSource: Woodsman Film Company

There are five primary types of mockups:

  1. Hand drawn Mockups
  2. Wireframe Mockups
  3. Developer HTML Mockups
  4. Designer HTML + CSS Mockup
  5. Designer Photoshop Mockups (recommended)

Often it's best to start with some hand-drawn ones to get started. Then if you have access to designers, complete a couple of full 'Designer Photoshop Mockups' for "look and feel" approval, then complete the balance as wireframes.

Hand drawn Mockup

'Hand drawn Mockups' are recommended to be done with the customer. Since it doesn't deal with any styling/color issues, 'Photoshop Mockups' will be needed after.

Hand Drawn Mockup
Figure: A 'Hand drawn mockup' example. Nice and quick for early concept design

Wireframe Mockup

A layout of how the controls will look is usually all that is needed initially, without worrying about images. An example of Wireframe Mockup

Tip: The tools to develop a wireframe depend on your skillset and the front end technology chosen. For example use:

  • Microsoft PowerPoint (ubiquitous)
  • Balsamiq
    c24602 WireframeMockup
    Figure: Wireframe storyboard mockup on Balsamiq
  • Adobe XD - preloaded with the most popular UI design blocks (recommended for web & mobile app design)

    Figure: Adobe XD prototyping

    Figure: Adobe XD Google material design UI kit


  • Sketch (Mac Only and for UX designers)
  • Moqups (HTML5 based App)
  • Photoshop (primarily for designers who already have the skills)
  • UXPin (more sophisticated, helps you create responsive designs)

Developer HTML Mockup

These are mockups done in the front end technology that will be used. Meaning it could be done as a Web/Windows Forms/Access UI with limited functionality:

An example of an ugly Developer HTML Mockup.

1d9b4a DeveloperHTMLMockup
Figure: Developer HTML Mockup example - not recommended as it is a bad starting point from an HTML view and refactoring later is harder (if even possible) + this reeks of Bodgy Brothers and doesn't do a very good sales job

Designer HTML Mockup

These are also mockups in a Web/Windows Forms with full CSS Styling and graphic designer enhancements:

An example of a pretty Designer HTML Mockup

11fe40 HTMLMockup
Figure: Designer HTML Mockup - not recommend because it is time-consuming to make changes (and change is all you do at the beginning of a project)

Designer Mockup

These are concept mockups produced by designers in Photoshop providing a guidance of the final look with full styling.

Warning: Don't go down the track of giving a customer a few concepts (on some projects we gave 2 or 3 completely different concepts by different designers). There becomes too much mixing and matching when they see them. Once the images are approved, then the designers slice them up and turn them into HTML (slicing is the exporting of each image).

1d6c03 PSMockup
Figure: Designer Photoshop Mockup example - recommended as quick to change, when changes happen

More information – Add notes at the bottom

Wireframes should include numbers (in orange circles) and notes at the bottom, explaining features and/or indicating priority.

wireframe with notes
Figure: This wireframe indicates priorities of features

Mock-ups notes should also include the business rules that apply to the page. If there are a lot of rules then it is acceptable to link off to a Microsoft Word document.

88215b Mockup 1
Figure: Good Example - This mockup states the validation and business rules that apply to the page

Don't use UML - it is virtually impossible to get clients to understand these.

Figure: Don't use UML diagram which clients can't fully understand

UML is not all bad. UML and other formal documentation methods can be useful for developers.

The overarching problem is it gets out of date, so it gathers dust (aka Technical Debt). A better way of getting documentation is to flesh out the classes and use the VS Dependency Graph or NDepend. A demo can be seen in the 2nd video "A Modern Architecture Review".

23f19c ndepend
Figure: Tools like NDepend can generate diagrams from your source code so there's no "Technical Debt"


Mock-ups and wireframes are far easier to understand.

For example, to communicate that “a customer has many phone numbers”, a storyboard/wireframe of how that relationship will appear in the user interface is highly more likely to be understood by the client.

The clear communication of the message is more important than the medium used to convey that message.

Here are some more hot tips on mock-ups:

  • Avoid the thought of a "throw-away" prototype. An example of a throwaway prototype is when you design screens in Access, but the application will be HTML. So design the screens you and the customer are happy with the technology you will be using, and then use them in the app.
  • It is best to have a designer and developer and customer working together.
  • Get the mock-ups physically initialed, especially if you are performing a fixed-price contract. Yes, paperless is great - but not in this case.
  • If you can't get mock-ups initialed, then page by page approval over email is the 2nd best option.
  • A tip I picked up from Tom Howe was to always add a client's branding into the mockup - it makes a big impression
  • Mock-ups should follow standard interface rules
  • Write the related business rules at the bottom of each screen - and turn into unit tests.
Adam CoganAdam Cogan

We open source. This page is on GitHub