Gestalt Principle: Figure / Ground

When we look at something we try to determine what is important and needs our focus, figure, and what is not important and we can ignore, background. Another way to say this is foreground (figure) and background (ground). If you’ve done art you might have also heard of positive space (figure) and negative space (ground). 

In a non-design context, if you’re walking through the city you will look around and try to distinguish between those things that are important to you (street signs, building numbers, hazards and obstacles on the sidewalk…) and those that are not important (people on the other side of the street, buildings that are blocks away…). 

In web design, we want to emphasize the page content and do it in a way that people can easily see what’s important. While there are many tools that we can use to help do this there are a few core techniques.

1. Color and Contrast. Making the figure and ground different colors that contrast with each other is a foundational way to separate them. 
   1. CSS Properties: color, background-color
   2. Contrast Ratio tool. https://contrast-ratio.com This site by Lea Verou allows you to enter your foreground and background color and gives you a number to show you if there is enough contrast.
2. CSS Box Model. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model This allows you to control the space between elements and give borders to elements. The following CSS properties
   1. padding
   2. margin
   3. border
3. Shadow. Adding Shadows to elements is a way to make that object appear closer to the viewer than the objects around it and therefore part of the figure.
   1. box-shadow CSS property.
   2. This tool lets you create the shadow visually and then copy the CSS to put in your file: https://www.cssmatic.com/box-shadow Note, the style now is to use very minimal box shadows, often with 2px blur and 2px offset.
   3. text-shadow CSS property. Don’t use this a lot and only use on large text (headings).
4. Images and Background Images. Images are a great way to draw people’s attention and establish the figure. Background images can be used for the ground, but make sure that you are modifying the images so they fade into the background
   1. img element for figure images
   2. background-image CSS property for ground images.

This page on the MDN covers and has links to the various properties that control backgrounds and borders: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders