But many people don’t know about simple rules of design that if used correctly, convert.
One of my favorite rules is more about “cleaning up” and making choices easier.
And you want to make it easy for your readers, right?
Uh-huh. Same here.
So, today I would like to focus on something called the “figure-ground” principle.
The wee elements that compose your site are often seen as one of two things: Figure or Ground.
And we mere mortals have a tendency to pull a figure from it’s background. Elements not seen as figures become ground. Simple, right?
In web design ground can be a background element or white space. And your goal should be to create a very clear relationship between the figure and the ground.
Yes, this stuff is anything but rocket science, but I do know that little design tweaks add up and make all the difference in the world.
So, if you apply this one principal you just might do a few cartwheels … because you took another baby step to improve your presence on the social web. But let’s get more into the nitty gritty here, shall we?
Righto then, it’s time to read on.
Think about someone dropping into your fine site. They immediately have to make sense of it all and decide what is figure and what is ground.
You obviously want your “figures” to stand out. Ya?
Now think about this relationship, your site and something as super-duper basic as a submit button.
Take a look at this
Sure it stands out, but does it stand out enough?
You want to invite your readers to click on this itty bitty thing, right? Well just a few subtle touches make that more of a possibility.
And you can implement this little practice right away.
The first button blends in, but orange “sign-up” invites the reader to click. Subtle use of a radius curve, color gradients, bright orange, highlights, and a distinction between elements make this all very clear and we immediately know what part is figure and what part is ground.
You want to make it easy for the fine peeps reading your site to do something.
You also want to use subtle design cues to make these elements work for you.
I know, so “design 101,” but this does work and I do see more than a few missteps out there.
You’re saying, Hey Craig, this is Super-Duper Simple. Well, sometimes people miss the basics and little changes done right sure add up.
To go a little further, look at this site and check out the sign-up form on the left.
The form uses a combination of color, gradient and shadow to highlight the “I’m Serious” submit button.
You can also see the subtle use of direction, taking advantage of the law of continuity. The dark area is clearly highlighted and the oh, so subtle pointer directs the eye to the submit button. Clear direction, a defined hierarchy and effective use of figure ground and the law of continuity.
Now go back and look at a few graphic elements on your page.
If you have a clear idea what you want people to do on your site, but haven’t incorporated this law on something as basic as a button, why not get busy right about now?
How have you incorporated this on your site?
Have you used this law in your design?
Latest posts by Craig McBreen (see all)
- Stop These 5 Habits and Really Start Living - August 25, 2016
- What is the Secret to Your Success? - April 13, 2016
- Episode 46: Andrew Davis Helps Me Change My Podcast (and Provides Some Great Breakout Branding Advice). - April 6, 2016