Storyboarding actually is done in movies a lot.
Figure: Movies are expensive to produce, so directors do story boards first and then the product designer, costume designer, lighting people etc all know what they need to do to reproduce for each scene. There are five primary types of mock-ups:
- Hand drawn Mockups
- Wireframe Mockups
- Developer HTML Mockups
- Designer HTML + CSS Mockup
- 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.
Figure: A 'Hand drawn mockup' example. It should recommended to do with customer, however doesn't deal with any styling/color issues, so Photoshop Mockups are still needed.
- 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
Figure: Wireframe mockup example - not recommended as it completely thrown out. Tip: The tools to develop a wireframe depend on your skillset and the front end technology chosen. For example use:
- 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
Figure: Developer HTML Mockup example - not recommended as it is a bad starting point from a 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
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 Photoshop 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)
Figure: Designer Photoshop Mockup example - recommended as quick to change, when changes happen More information – Add notes at the bottom
Wireframes should include numbers and notes at the bottom, explaining features and/or indicating priority.
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.
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
Here are some more hot tips on mock-ups:
- Avoid the thought of a "throw away" prototype. An example of a throw away 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 initialled, 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 initialled, then page by page approval over email is the 2nd best option.
- Mockup work should be to the clients account
- A tip I picked up from Tom Howe was 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.