To create successful designs, you’ll need more than just typography, color, and iconography. 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.

Grids are a great way to create an effective layout. Grids are lines that are evenly spaced to help you design consistently and manage spacing of elements. To learn more on using guides and grids in XD here. Check out this reading 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. There are 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 exmaple, 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.

Finally, as you determine how to arrange elements in your mockups, you will need to consider the use of negative space. 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.

Good luck!