Well, I know how much my designer friends love it when I give away the keys to the kingdom, so here are two of their HUGE design secrets that you don’t know about.
What if I told you that if you could draw a tic tac toe board, you could create a well organized, easy to use website that pointed people to the exact content on your site that you wanted them to see?
No, I haven’t been hittin’ the sauce my friends, it’s true. When you look at a webpage, app, art, picture, building and more, the ones that are easy to use and pleasant to your mind are using one or both of these secrets.
Developers, coders and graphic designers, click here to sign a petition to have me banned from the internet for sharing your secrets. Not gonna happen my friends, but I bet you clicked it to see. Lol.
“Well, get on with it Elle? What are the darn secrets already” you must be thinking. Because I like you, I will tell you without further ado. They are called the Golden Ratio and the Rule of Thirds…….what????
Let’s look at some quick photos and sites to demonstrate my point and then I will show you how to use this for your benefit.
The Golden Ratio:
To use the Golden Ratio (GR), you simply take the width of whatever you are working on and divide it by 1.618 and depending on what you are doing with it, that will tell you what to do next. Now, I could bore you with complicated charts and reasoning, but for your purposes, increasing customer engagement, that’s what you need to know.
Warning, snoozefest getting ready to happen. Let me just show you one super boring image and then we will go back to Normalville, where people need to see things to understand them. Here is the 1:1.618 ratio.
When you do this, it separates the website, image, etc into an appealing arrangement that just works. The equation is a 1: 1.618 ratio.
Ok, back in Normalville, let’s look at something that doesn’t make you feel like you wished it were bedtime.
Coincidence you think? Nope. Let’s look at another.
Still not convinced? How about one more because I really like you guys?
Come on people, I can do this all day long. I have access to Google images and I’m not afraid to use it. Hello, boomerang. You look a bit different now.
It’s cool. Take a moment and get yourself back together. The first time I saw this was worse than when I found out I had been duped by my parents about Santa Claus. I was thinking, “What the fudge is going on here? How did I not know about this?”
The point is that you can use this concept to divide up your website into these parameters to make your content easy to read, more credible, etc.
For example, if you had a webpage that was 900 pixels wide, you could simply divide 900/1.618 (remember the 1: 1.618 ratio) and that would give you roughly 555 pixels wide for the first column and then 900-555: 345 pixels wide for the second column. You can then take the larger parts and break those parts down the same way if you need to.
Here is a quick example of how this can look on a website, but I’ll show you a tool at the end that will do it for you. Just stay with me.
Ok, now let me blow what is left of your mind. Let’s look at the second design secret that they all use.
The Rule of Thirds:
To use the ROT (Rule of Thirds), you simply draw two vertical lines and then two horizontal lines to split your image, webpage, etc into nine equal parts, AKA….a tic tac toe board. That will create four intersection points where the lines meet. Place your important information or focus on or near those intersection points.
People’s eyes and attention are most naturally directed at the upper left intersection point.
That said, anything near or on these points is simply easier to visually digest and trust on some subconscious level.
This ROT is a real thing, I promise. It creates visual tension and balance and draws you into the object. It’s like being seduced without the dinner or nice glass of wine.
Alright, sure, you’re feeling a little like the one kid that got left out of the birthday party, but trust me, you are not alone. Literally, less than 1 in 10 business owners that I speak with know about this.
I didn’t write this post to tell you what you don’t know. I wrote it to give you two tools to use when creating your product shots, marketing materials and your website. So, let’s quickly look at how you can apply this to engage (read….seduce) your customers.
As I noted earlier, most people focus on the top left intersection, which you can see demonstrated below.
Another important thing to know is that most people visually scan a website in a F or a Z pattern. This can really help you understand where to place important content (click here, buy now, sign up,etc…)
More importantly, when you combine the Rule of Thirds, The Golden Ratio and this F and Z scanning pattern, you can really give your website some power.
The take away is to be mindful of where your products are in your product shots. Most cameras have a ‘Grid’ setting, so look up the one that your camera has and leave it on when you are lining up your product shots.
When your marketing people bring you pieces to consider, think about them in terms of these rules and then make changes as necessary.
Lastly, if you are using a website builder like Divi, which I LOVE and highly recommend to business owners, it will be very easy to organize your page elements to these rules as they are generally preformated to fall in line with these guidelines.
They have a lot of variations on this concept inside their Divi builder, so you don’t have to do anything but plug in your content. If you decide to go this route and use Divi, trust me, buy the Lifetime Access. You will save yourself so much money over the years.
That’s a wrap folks. I hope you found this not only interesting, but helpful in constructing your web pages, product shots, etc. Now go out there and dazzle your friends and customers with your new found knowledge.
See you in the next one!
I write simple, small business tips about creating a unique customer experience that helps your customers to choose you over your competitors.
Want me to help you with your customer experience?
104 North Airline Hwy
Gonzales, LA 70737
CONNECT WITH ME