Modeling Your Website pt.1

What is a mock-up? After brainstorming and coming to a conclusion of what it is you want to do, a mock-up is the starting point for most websites. This is the point where you would start deciding exactly how you would want to structure said idea, how everything will interact with one another, and other details like color scheme, fonts, and spacing.

When deciding upon a layout for your website, it's important to understand how you want your user to see it, ie. where should the eye move? There are three patterns to think of when taking this into account. The Gutenberg diagram, which focuses on even distribution, separating the page into four separate sections. You can think of this like reading any page with the eye starting at the top left and moving toward the bottom right, it's along this path that you want to keep items of importance. Here's an example from Facebook:

The second is the Z-Pattern layout, which, as the name implies, follows a z-like pattern. Keeping the 4 quadrants in mind, the idea of the Z-Pattern is for the user's eye to move in a series of left to right, then back to left motions. One would use this format when trying to convey a story to the user.Here's another example:

It's also important to note that you shouldn't feel limited to the amount of times you want a user's eye to run back and forth across the page. This more zig-zag pattern is how we naturally read large blocks of code, like reading a book! This is useful to keep in mind for pages with a lot of information, you don't want the user to feel lost, so it would look something like this:

Finally there is the F-Pattern layout, which I'm sure you've realized by now follows and F-like path. While researching the path of the human eye while reading webpages, studies found that most users started at top-left and after each sweep to the right, scans became more and more shallow. This lead to emphasizing important information at the top-left and putting less important info at the bottom-right. Below is a heat map of eye traffic on google:

These three patterns all share the similarity of having an emphasis on the upper-left section of your page and the bottom-left being the last to be read, that is if it is even seen. So, it's not a matter of choosing one of these layouts, so much as realizing how they all affect the viewer's attention and using that information to make reading and navigating your page as seamless as possible.
it's important to note that if you wish to use your entire page, you're gonna want to be able to emphasize theses certain parts of it, especially the bottom-right section.

This is where color scheme, spacing, and typography comes into play. When properly using these three together, you will have complete control of where your user's focus will be drawn to. I will also go into some great programs, like Adobe XD and Sketch, that makes trying out new structures and color schemes quick and easy. So be sure to check out part 2 of this small series!