FORGOT YOUR DETAILS?

Graphic Design Quick Tip: Resolving shape conflicts

by / Wednesday, 12 March 2014 / Published in Quick Graphic Design Tips

I was working on a website design recently, and was reminded of this odd little topic of shape conflicts. They’re easy to fix, if you know what you’re looking at (and for), but sometimes you’ll look at something, scratching your head, wondering “What the?…”

Here’s an example of a shape conflict:

shape1

There’s a rectangle sitting inside a radius corner box. It looks weird. Even a non-designer would say it looks “off” somehow, they just don’t know why. Do you see it?

Well, here’s the issue:

shape2

 

The corners aren’t “compatible”. The curve vs the point are in conflict, mainly because you associate the shapes one to another because of their proximity. 2 different locations on your page, not as big an issue, though that becomes a question of style. Either way, these two images can live together. Let’s take a closer look at the “math”:

shape3

 

Above, I’ve highlighted the points at which the radius corner begins and ends. The problem is, they aren’t “sharing” the geometry. Here’s the adjustment:

shape4

 

Now, the radius corners and the rectangle they enclose share the same geometry. Weird to describe, but easier to see, I know. So, this is the new result:

shape5

 

Now the shapes are compatible. With that, you can analyze similar problems to see why a layout that’s otherwise working fine, has some strange element that isn’t cooperating with your page. Sometimes the tweak is easy – sometimes, hard to see in the first place.

Make sense?

Tagged under: , ,

Leave a Reply

TOP