Grail Cup (Large preview)

Similarity, which is to be talked about is complied with by proximity. Similar products separated and in the positive space are grouped using narrow white space as you can see. This teaches the user to form their preferred item from the list of similar products. Moreover, the principle of closing comes into action among the list of items that are similar.
In this example, you can observe that closure is maintained intact with the principle of this figure-ground relationship. The bottles and the text that is daring behind are the figure, in which the background is soft pink. Where’s the closure? Watch the text supporting the bottles? You can’t see it entirely, but still know it’s’Kambucha’. Except for the initial’K’ and the final’A’letters are half concealed, which can be completed and the entire form starts to take shape and consequently, the significance. This, my friend, is!
Some sites also so as to give a sense that the figure is placed within the background, display the figure-ground connection by adding drop shadows to the figure. Here’s a screenshot from Seriously Unsweetened:

See the perfect continuation of design? Irrespective of the light and dark hue from the backdrop, the pattern is pretty much clear on the webpage. When you scroll down, you may notice the way the pattern and the change in a seamless and constant motion. The change in tones is negligible here and we all see is a pattern of lines and dots.
The text is your figure here in a large cursive font at the middle of the page, which makes it stand out as compared to the picture in the background. The white text above the grayscale image that is contrasting draws on the attention of attention, which makes the text observable over it. From another perspective, the background is blurred so that the text pops out as the figure. All of these aspects reveal that the text here is prioritized as the figure or the positive distance , whereas the blurry image is used as the negative space, hence strongly implying the idea of figure and ground.

In balanced compositions, the optimistic parts and space of the design work together and complement each whole that is aesthetically pleasing. Compositions, on the opposite, can lead to distress and communicate an story.
Let’s take our cue from the Crypton Trading website down below:

Here’s an example of closeness as exhibited in the navigation of this Mashable website:
Want to include something different? Do not forget to discuss your thoughts. We would really like to receive the comments!

Trellis (Large preview) (Picture source)

Now, we’ll take a closer look in the Basecamp net form which displays another ideal case for closeness in web designing:
To give you a clear idea of web design is influenced by the relationship, let’s talk about some examples in detail. Every one of these examples center on three main regions of the figure-ground connection : You may add explicit visual cues using comparison, boxes, and colors for your website design. These techniques are utilized to distinguish the color, size, and level of detail, to separate the material, and to add thickness to the respective object of focus.
Without further ado, let’s start.
We mentioned at the beginning that web design is all about developing a very simple user interface that helps you and your audience kill two or more birds with one stone, or in literal terms, helps boost the visual desirability of the site design as well as making it effective and easier to use — yes, with an incredible power over the use of distances.

Smashing Editorial
Questions like these can be answered with a transparent understanding of the basics. And as per the golden rule of thumb: simplicity would be your best coverage (we left that up because it fits! ).

Do not forget to check out the tutorials that are recommended that are related:
We are also going to discuss some web design examples with creative use and every Gestalt principle of spaces.
Which part of it jumps at you when you view this web page? If you ask me, it is the major text in white in the top right-hand with contrasting color and text, and the two boxes. The white text on the top is clearly the figure. (Notice how it is put over the darker image to be noticed.) The boxes down below are also part of this figure, due to the contrast they offer to the ground picture. The other element of the figure is the second comparison that is put within the boxes at the kind of text that is contrastive-colored.

  • It generates an easy-to-follow visual hierarchy;
  • Sets the focus of attention as well as reduces burnout;
  • helps establish the scale and allows the focus appear larger;
  • It improves page scan-ability;
  • Makes the stream onto the page appear natural;
  • It explains the connection between the visual elements without the need for additional aids;
  • It helps de-clutter the page;
  • Enhances the design and appearance of the webpage.

“The whole is other than the sum of the parts.”
In the midst of the areas, web design’s success and failure is determined more by the usefulness as well as the usability. Just think about that if you’ve got layout abilities, the efficacy and the web design’s presentation is going to be bothered. Content is king, if the distances are not used 28, but from an alternative point of view, the material will take its toll on your site.

Space — both positive and negative — plays a pivotal role in combining the design elements. Our eye is drawn by the usage of spaces into the most noticeable distance when the components are arranged in an orderly manner .