: Foreground-Background Perception of a Logo I am designing a logo for my website. The following is what I have now: For most people, this logo is perceived as a trinity-type of white shape

@Lengel450

Here's my entry (and a variation) to illustrate three asymmetrical minimalist flat blue linear trillium "leaves" on a suggestion of a white background (shown against a white background).



I believe the relevant Gestalt perceptual law/principle is Pragnanz.

Vote Up Vote Down

@Sent7350415

Make the blue part to have a proper 3D look. This is extruded and the viewing angle is few degrees off. The result is usable also in BW.

Vote Up Vote Down

@Pierce403

I find it somewhat hard to imagine the 3 blue "petals" as the foreground. I'm having trouble working out which one is in front of which one, and that keeps niggling and messing with my belief that they might form a consistent whole. However, the blue circle is easy to see as a background. It makes perfect sense on its own, if you remove the foreground. And the lines make perfect sense as a foreground, so there's no reason to see them as a background.

This is reversed for Lauren Ipsum's flower: each shape makes sense as a petal of a flower, but the blue shapes taken together don't make much sense as a set of gaps between lines, whereas the lines are simpler to describe as gaps than as lines. The lines could be a foreground, but they don't quite line up where they expect them to. If they're a background, they make perfect sense.

I can see two basic ways to make your blue regions seem like a foreground. First, you could use a different colour for the parts where two circles overlap. This would create a visible interaction between the three circular regions, so that it was clear they were regions. It would also preserve the symmetry of the logo. But you would have to be careful to make sure the 4 inner regions don't become the foreground.

Secondly, you could make the white lines seem more like a background. I think any pattern of lines will make some sense as a foreground. But I think it's possible for the lines to make more sense as a background than as a foreground. One way to do this would be to make each of the intersection regions, between each pair of petals, slightly smaller. Then each long edge of such a region would not quite line up with the corresponding edge of the centre region. Also, the thickness of each line would vary in a specific way. It would be easy to describe the varying thicknesses and not-quite-lining-ups as the gaps between the seven blue regions. But if you tried to describe the way the lines changed thickness, it would be difficult. This would make the white lines seem more like a background image, because it would be simpler to conceptualise them as gaps than as lines.

Lastly, you could change the border of your logo so it isn't a perfect circle. The arc describing the outside of each outer region doesn't have to be centred at the centre of the circle. You could draw any other circle through the two corners of the region, and you would still get a symmetrical image if you made the same change to all three outer regions. This would make the overall blue shape make less sense as a background.

Vote Up Vote Down

@Speyer780

If you want the three top shapes to be flower petals or leaves, don't make them ambiguous.

Right now it has additional arcs (if I'm understanding your "three" correctly, and I may not be) and everything is the same color and shape. So change that.

(Sorry for the crude graphic; I'm pre-caffeinated:)



I removed the lower arc line so you have four distinct pieces rather than seven. That makes the "top three" clear. I colored them differently, making them even more distinct. I then reduced the size of the left and right petals.

That will unambiguously make this image "three blue leaves/petals on a white background." Tweak as needed for your corporate requirements, obviously, but this is the direction I think you need to aim for to get what you're asking about.

Vote Up Vote Down

@Caterina889

You could use a slight offset shadow.... pushing the blue forward...



You could add a gradient to the blue, place some darker colored strokes along a few edges to indicate a light direction and add a global highlight to the blue...



There is no "typical" perception to these sorts of items. Many will see the white shapes... and just as many will see the blue shapes. It's an old convex/concave dilemma. The only way you can ensure a specific perception is via other objects or interaction via light/shadow.

Vote Up Vote Down

@Ravi4787994

Remove the blue fill from the circular shape and add a blue stroke.
Take the 3 leaves and change the stroke on these from white to blue.
Make sure all the shapes are using the same weight (thickness). Or you could choose to have the outer ring a bit thicker.
With minimal adjustments then you should have a no-fill, stroke-only logo, similar to one below.

Vote Up Vote Down