Review

Review foundational elements of visual design

This is a very exciting part of the course because you’re about to design mockups for your responsive website. This is when your designs will start to look like a real product!

As you begin to design mockups, remember the importance of the foundational elements of visual design. On a basic level, the term visual design in UX refers to how a product or technology appears to the user. If you’ve been taking the courses of the certificate program in order, in the last course, you learned about three foundational elements of visual design: typography, color, and iconography.

We won’t cover these foundational elements in this course because we assume that you learned about them in the previous course. If you need a refresher, check out this video that introduces the foundational elements of visual design.

After that, you can revisit videos and readings that detail each of the three foundational elements of visual design that were covered, including:

• Typography is the practice of arranging text and typefaces, also known as fonts, to make language legible, readable, and visually appealing. Typography can help add hierarchy to your designs, make text easy to read, and add visual style. For more information, review this video about typography in UX design, this video about the importance of typography, and this reading about working with type in mockups.
• Color is one of the most impactful visual design elements. As you design, think about the messages or emotions that certain colors communicate, how people understand color, and how colors mix, match, or contrast with one another. For example, red attracts a lot of attention, while blue communicates serenity, calmness, and peace. To learn more about color, review this video about using color in UX design, this reading about working with color in mockups, and this reading about accessibility considerations for using color in design.
• Iconography refers to the images or symbols associated with a subject or idea. Think of the icon for power on your computer — it’s probably a circle with a line, but most people know that this icon means power! When created effectively, icons limit wasted text space, catch the user’s attention, and are an easy way to transition to another page or location. For more information about iconography, review this video about iconography in UX design and this reading about working with icons in mockups.

Remember, for the best user experience, we recommend that you complete the courses of this certificate program in order to effectively complete your design projects and to learn the information required to successfully land a job as an entry-level UX designer. If this information is unfamiliar, you can return to complete Course 5 of the program: Create High-Fidelity Designs and Prototypes in Figma. Good luck!

Review how to arrange elements in mockups

You’ll need more than just typography, color, and iconography to create successful designs! You also need to plan layouts, which are ways to arrange elements on a page. The goal of layouts is to present information in a logical way, making the important elements stand out. You learned about common website layouts earlier in this course, including single and multi-column layouts, the grid of cards layout, featured image layout, and more.

To create an effective layout, you can utilize grids. Remember, grids are lines that are evenly spaced to help you design consistently and manage spacing of elements. You learned about using grids in Adobe XD earlier in this course. Or, if you’ve been designing your responsive website in Figma, you can check out this reading from the last course of the certificate program about creating grids in Figma.

As you create mockups, it’s also important to think about the way the elements are contained. Containment uses visual barriers to keep designs neat and organized. In the last course of the program, you learned about four methods of containment:

Dividers: A method of containment that uses single lines to separate sections of a page. In this example of an inbox, there are dividers separating each message within the inbox.

Borders: A method of containment that uses continuous lines that often form shapes, like squares or rectangles, to break up sections of a page. In this example, there are clear pink borders around the sizes for this blouse and a black border around the size that has been selected.

Fill: A method of containment that assigns colors to borders and shapes. On this app you can see a button at the bottom with an icon in the middle. Behind that icon is a filled, yellow circle.

Shadows: A method of containment that creates dimension in combination with borders or fill. On this app, when a movie is selected, a shadow appears below it to better telegraph the movement of the section. Below you will also see an image that shows how the depth of a shadow can change the perspective of the element.

If you’d like to learn more about using containment in your mockups, check out this video from the last course of the program about using containment in layouts.

Finally, as you determine how to arrange elements in your mockups, you will need to consider the use of negative space. Remember, negative space is the area that surrounds an object within an image. It’s the gaps between the elements in the design or the space that’s not being used. To learn more about negative space, review this video about using negative space in layouts and this reading about using negative space from the previous course of the program.

Review visual design principles

In the previous course of the certificate program, when you created mobile app designs in Figma, you refined and improved your mockups using visual design principles like emphasis, hierarchy, scale and proportion, and unity and variety.

If any of these terms are unfamiliar, we recommend that you return to the previous course of the program and complete Week 2, which is all about applying visual design principles to mockups.

Or, if want a quick refresher about these visual design principles, check out these videos and readings from the previous course of the program:

• Revisit this video about emphasis in UX design and this reading about using emphasis in mockups.
• Revisit this video about hierarchy in UX design and this reading about using hierarchy in mockups.
• Revisit this video about scale and proportion in UX design and this reading about using scale and proportion in mockups.
• Revisit this video about unity and variety in UX design and this reading about using unity and variety in mockups.
• If you want to take your mockups one step further, you should also consider reviewing this video about applying Gestalt Principles to mockups and this reading that introduces additional Gestalt Principles.

Sources: Google UX Design Professional Certificate

Coursera | Responsive Web Design in Adobe XD