Mockups
What is a mockup?
Mockups are mid to high-fidelity static visual designs that represent the look and feel of user interface (UI) design. They demonstrate the basic content layout, color schemes, typography, white spacing, and user navigation. Mockups can be created using online visual design apps or software.
Benefits of mockups
Mockups provide you with a snapshot of your final product
Mockups are produced before development is started, and enable final iterations before coding the design.
Mockups stimulate collaboration and communication
When designers and developers gather to review mockups, they can discuss what is and isn’t working in the design, and propose final changes to the design before progressing the project into development.
Mockup revisions can be done quickly and easily
Before web development begins, it’s important to ensure all visual elements are properly placed and nothing is missed. Mockups are an easy way to illustrate this. Since mockups are typically from mid to high-fidelity designs, revisions can often be done relatively quickly without significant time and budget.
Anatomy of a mockup
Colour
Colour palettes should be demonstrated within a mockup and reviewed to ensure they are aligned with the client’s project goals and brand guidelines.
Typography
Typography refers to the font type, size, style, alignment, spacing, and indentions. Typography should be clean, clear, and easy to read within your mockup.
Layout
The content layout refers to how content is displayed on a screen – text, images, illustrations, and more. The layout should follow a strategic content hierarchy, where the most important information is presented first.
Contrasting elements
Contrasting colours are key to effective design. They can increase visibility and draw the user’s eye down the page or to key content such as a call-to-action.
White space
White space (or negative space) is an empty space not taken up with content (text, images, etc). White space is powerful, as it gives room for the eye to focus on content. A lack of sufficient white space can cause users to become overwhelmed and miss important aspects of the page.
Visual navigation tools
Visual navigational tools include toggles, sliders, headers, footers, arrows, and dropdown menus. They are critical to design and should always be included within a mockup to demonstrate the final user experience.
Related Terms
Brand Strategy
Brand strategy involves translating your technical offering into a clear value proposition and backing it up with a messaging framework and brand personality you can own.
Anchor Text
Otherwise known as link text, a link title, or a link label, anchor text can be described as clickable words or phrases within a hyperlink that connects two web pages.
Search Engine
Database tools that help users find content on the World Wide Web. Once a user enters a keyword or search query, search engines curate a list of the most relevant webpage URLs, images, or videos, known as the Search Engine Results Page (SERP).