Learn about more visual design elements

So far, you’ve learned about the importance of typography, color, and iconography in mockups. As you continue to design your own mockups, it’s also important to understand the most basic visual design elements, like lines, size, shape, and images. Here’s a bit of good news: You don’t have to be artistic to use these elements as you design. So let’s check out each one!

• Lines: A line is a straight figure connecting two points in space. In the world of UX design, lines can be used to differentiate sections of an app, connect two related ideas, or add emphasis to certain parts of the design. For example, you may choose to place a line below header text to draw additional emphasis to titles.
• Size: The size of an element is in relation to other elements and factors that affect the design. Size is an especially important consideration when designing an app for a mobile phone screen size, which is pretty small. The size of elements can determine how users experience your design, for better or for worse. For example, a button that’s too small can frustrate users or cause them to tap the wrong part of your design.
• Shape: Shape is defined as lines around a self-contained space that includes length and width. Shapes have a place in almost every app design, whether you use rectangles, squares, circles, or another shape. For example, to view more information within an app, there is often a circle with a plus sign (+) inside, which indicates that users can click the shape to expand a menu and learn more. Alternatively, to close out of a window in an app, app designs often use a circle with an X inside.
• Image: In UX design, images are used to tell stories, make an impact without words, and add visual emphasis. Images can be static, like pictures and illustrations, or moving, like animations and GIFs. Either way, you should include images that are relevant to the story you want to tell with your design and that are relevant to the users you’re designing for. For example, if your app for home repair services is addressing a specific problem that many users face, like a clogged gutter, it might be effective to include an image of a clogged gutter in your designs to drive emotional impact.

Putting it all together

As you continue to design your own mockups using visual design elements, keep in mind these two things:

Visual appeal: Consider how the content of your designs will be experienced by users in the real world. Are your lines connecting or dividing the right design elements? Are any shapes accidentally overlapping? Did your image upload correctly to Figma? You’ll want to review your work with a heightened attention to detail, specifically looking for elements of your designs that might not be the most visually appealing.

Accessibility: As you design mockups, think about how users with various accessibility needs might react to the elements you include. For example, do headers stand out from the information placed below, by using lines or another visual design element? And, do all of your images have alternative text? Ensuring that your designs are accessible for everyone is critical to making your work a success!

As you continue to apply visual design elements in your mockups and beyond, reference this short guide from Usability.gov about visual design basics. It covers the elements you’ve learned in this part of the course and more!

Sources: Google UX Design Professional Certificate

Coursera | Create High-Fidelity Designs and Prototypes in Figma