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 ...
Get Designed for Use, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
