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:


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:



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”:



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:



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:



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: , ,

One Response to “Graphic Design Quick Tip: Resolving shape conflicts”

  1. Holly says : Reply

    *Mind Blown* Holy cow. That’s so simple!
    I’m binge reading all these posts – thank you so much for putting all of this great information out here. I’ve heard/read a lot of it before but alot of it really hasn’t “clicked” until I read your posts/watched your videos. Thank you!

Leave a Reply