877-924-1414

Layout Options for Web Design

by | May 29, 2019 | Newsletter, newsletters

Recently, I was asked to give a presentation in California on layout options for web design, so I’ve decided to share that information with our readers. Whether you are a web designer or a business owner, it is important to understand the basics of good web design to help you make decisions about your website. The first and most important thing to understand about ANY website, is that is primary purpose is to share content with your visitors. This is true whether you are selling physical goods on your site or you have an informational brochure site for a service busienss where you are just trying to attract customers to call your office. As Bill Gates said way back in 1996, “Content is King.” And it remains so today.

So, what exactly do we mean by “content?” It has been said that “Content is anything that adds value to the reader’s life.” It can include:

  • Text
  • Images
  • Audio
  • Video

Ryan Diess say, “Content marketing is about transforming people that DO NOT know, like, and trust you into people that DO know like, and trust you.” As we can see from that quote, this is why it is so important that you are able to share content with your visitors in a way that will engage them and cause them to take the desired action. That is the primary purpose of a good website layout. If you are interested in learning more about content marketing, be sure to check out my course on Udemy: https://www.udemy.com/lead-magnets-email-lists/

Update (10/28/2021): Course Marks rated this course 2.5 years later and gave it a positive review of 8.5 out of 10, which you can view here.

Plan the Layout of Your Website

The first thing you want to do is to create a wireframe diagram of what you want your website to look like. this should include diagrams for both desktop and mobile versions, as you will want your site to be “mobile responsive” and look good on all devices. Include standard elements such as:

  • Header
  • Menu
  • Body
  • Sidebar(s)
  • Footer

Basic Design Specifications

Next, you will want to consider basic design specification including, fonts, color schemes, and images or photography.

Fonts

Choose 1 primary font style for your entire website, and 1 or 2 more accent fonts (such as for titles and callouts) that compliment the primary font. Several years ago, Google made a ton of fonts available to web designers, giving you lots more flexibility, but this does not mean you should see how many you can use in your design. Do not use more than 3 fonts on a given website as this will make it look unprofessional.

Color Schemes

As with fonts, you want to select colors that go together, choosing 1 or two primary colors and 2 or 3 complimentary accent colors for things such as titles, links, and highlights. I recommend picking 4 colors that go together and using these consistently throughout your site.

Photography

You also need to consider your photography, including backgrounds, whether the object is a still image or you are showing your products and services “in context” (being used). Either way, your images should help you tell your story. Remember a picture is worth a thousand words!

Why do many popular websites use similar layouts?

Given the above information, why are there thousands and thousands oth “themes” and we (as well as most web designers), pick a stock theme upon which to build a website? The reasons are:

  • They’re usable.
  • They’re familiar.
  • They save money.

More importantly, themes are meant to be starting points, and as a designer you may or may not agree with the layout options that a particular theme designer has implemented. The reason why you would choose one layout over another is to:

  • Keep users on the site
  • Information is easily accessible
  • Engage users with website’s content

Website Layouts with Proven Success

Now that we know what we are trying to accomplish, let’s look at the website layouts that have proven to be popular and successful in modern website design. These layouts include:

  • The Zig Zag Layout
  • The “F” Layout
  • Full Screen Photo or Featured Image
  • Grid Layout
  • Single Column
  • Split Screen
  • Asymmetrical Layout
  • Magazine
  • Fixed Sidebar
  • Single Page

 

The Zig-Zag Layout

This layout is based on a widely-known pattern users got used to scan a webpage content: the eyes move along the page following a Z-letter direction.

The “F” Layout

This layout is good for pages that need to present a lot of different options and allow users to scan them fast.

This is useful for a news site homepage or page that contains search results.

Full Screen Photo or Featured Image

Images are the fastest way to sell a product. Use this when you need to demonstrate only one product/service and focus a user’s entire attention on it.

Grid Layout

  • Cards are great containers for clickable information
  • Grids can vary in size, spacing, and the number of columns
  • Good for content-heavy sites that display a lot of items with equal hierarchy

Single Column

  • This layout fits mobile screens perfectly
  • Used in many blogs

Split Screen

The split screen layout is perfect for a page that has two main pieces of content of equal importance. It is also ideal for contrast: putting two items against each other.

Asymmetrical Layout

  • Asymmetry is the lack of equality between two sides of the layout.
  • Causes the visitor to stay visually engaged.
  • Used to create interesting and unexpected layouts.

Magazine

  • Popularized by newspapers and magazines.
  • Built using a multi-column layout that uses different visual weight to prioritize information.
  • A good choice for publications that have large amounts of content on a page.

Fixed Sidebar

  • The sidebar stays stationary and always remains visible while the rest of page changes as users scroll down the page.
  • Navigation always remains accessible
  • Works well with a relatively limited number of navigation options

Rather than trying to create a screen capture, this is best if you experience it: https://www.measponte.it/

 

Single Page Layout

  • Combines multiple actions into one page
  • Content is loaded dynamically as you scroll
  • Built so that it generates unique URLs for each viewpoint

As with the fixed sidebar above, this layout is best demonstrated by experiencing it: https://ax-ball.com

When designing a site, it’s important to remember that:

  • The primary purpose of a website is to make it easy to read or view information.
  • Among many layout options available, you want to select the one that makes your content shine.

 

Related Posts: