My go-to website layout recipes
Have you ever wondered why you get on some websites and it’s easy to follow and when you get on another one, your eyes are just moving everywhere?
Or perhaps as you’re designing or re-designing your website, you are overwhelmed by how to organize the photos and content on your website
And so… you find a template (and nothing wrong with that) only to realize that after you have added your content and your photos, the template now doesn’t look as good as it did when you choose it.
If you’re nodding your head at all this, then you’ve arrived at the right spot because I too have experienced all of this conundrums.
So I continued to learn, to design and to make mistakes.
Just like a cooking recipe, you need to first get the basics down first before you can add some truffle salt and replace that butter with olive oil (and please never do that, food just taste better with butter ya know )
So here are the basics:
1) Decide what you are building the website for and organize that into primary goals, secondary goals and tertiary goals. Like cooking, you’re probably prioriziting your food to taste food before it looks good. Same with websites!
2) What pages will your website have? Some common pages would be the homepage, about page, contact page, and pages specific to the industry that the business is in.
Once you’ve decided on the basics, here are my favorite 2 layouts and why I use both in every website I have created in the past two years.
The Z layout
The Z layout is a visual hierarchy layout that tracks a human’s eye movement when they read latin based languages such as English. The human eye left to the right and then from top to bottom. However, if your reader speaks a different language such as Arabic - then the human eye will track from right to left and then top to bottom.
The F layout
The F layout is also a visual hierarchy that gets the human eye to focus on specific information. I tend to use this layout for explanation based content vs. a call to action type of content.
I’d love to see what you’ve come up with with these tips in mind. Would LOVE to see how you’ve used these tips for your own website or other websites you are designing!
