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 Figure 9, A sample wireframe (left) and mock-up (right) (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: ...
Get Designed for Use 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.
