Designed for Use, 2nd Edition

Mock-ups

Wireframes tell you about the layout of a screen. Mock-ups add the decoration, or visual details: shadows, textures, images, transparency. This is how you want the screen to look based on your current knowledge. Compare the mock-up in the preceding figure (on the right) with the wireframe (on the left).

Adding visual details is not just about making your product look pretty. Of course, the goal is for the end product to look good, but visual design can also give the user hints about the functionality of your product. User interface designers often call these affordances. If you’ve missed it, I’ve talked about this back in ​Principle 7: Affordances​. For now, here are some examples of affordances: textures to let the user know that he ...