Typically mid to high fidelity, mockups reflect the design choices for color schemes, layouts, typography, iconography, the visuals of navigation, and the overall atmosphere of the product.
In the simplest terms, the anatomy of a UI mockup should be identical to the makeup of the page it represents. That means during the mockup phase, you should consider:
Content Layout — How the content is displayed, such as F-pattern or Z-pattern, cards or text. You should also consider the size of each piece of content, and how many you want to fit on the screen at a time.
Contrast — Use a color contrast tool to test the legibility of your text against your background. You can also use color contrast to increase the visibility of some elements like calls-to-action.
Color Usage — Colors evoke different emotions, and their effects change based on surrounding colors. You can check out the free ebook Web UI Design for the Human Eye (Vol.1) for more detail.
Typography — Mockups let you explore your typography size, font, style, and spacing, not to mention structural usage for consistency, like how to stylize captions. Mark Boulton gives some general typography advice.
Spacing — Negative space is not empty space to be filled — it is a powerful design element. An appropriate amount of emptiness improves user comprehension and legibility, and acts as a powerful tool in visual hierarchy. The more negative space around an element, the more the eye is drawn to it.
Navigation Visuals — By now the information architecture should already be finished, so you just need to consider how it will look. For example, if you have a pull-down menu or drawer, you can now dive into details like color, spacing, typography, and order.
By Jerry Cao