Web Page Layout Designer

FAST

Super-fast load times
under two seconds

RESPONSIVE

The layout must look
good on various screens

PERSPECTIVE

The purpose of the page
determines the layout

Web Page Layout Design

Glenn is an expert web page layout designer with more than 20 years of doing business online. Presentation is everything, when it comes to online business your visual presentation will make or break you. Research has shown that you have only a few seconds to capture a web page visitor’s attention. That is the length of the average customer’s attention span. If you have not captured the audience in that time, you’ve lost your chance to convert a potential customer to a buyer. The average website visitor has already decided within a few seconds whether they like your site or not.

Types Of Layout Patterns

Web Page Layout Designer

The next step if they decide to stay is to present the content in a form pattern that follows how they will scan the page with their eyes. You might have caught their attention, but the human conscious mind initially only comprehends in a scan method. You have to capture the viewer’s interest in stages, leading up to what you are presenting in full.

  • Zig-Zag – Z
  • F scan
  • Full-Screen Photo
  • Grid
  • One Column
  • Featured Image
  • Asymmetrical
  • Split Screen
  • Headline and Gallery
  • Modular
  • Magazine
  • Single Page
  • Radial Symmetry

Perspective – Types of Layout Designs

Not every web page on your website can follow the same rules. Over the past year, I have done a lot of new research into developing layouts. My first thought is to follow trends. People like familiarity. But I found the going trend on the internet these days is one aimed solely at cell phones. What happened to all other content. For example, this web page is aimed at informing the user of the various ways to do layout designs. There is no way I can squeeze all of this information onto a page where the text is ten times the size and include huge flashy photos. If I did try to do that I would lose the user’s attention even faster because they came for information, not a flashy presentation. You need to use the perspective of what you are trying to accomplish when developing the layout.

Load Time

Although it is not a layout element in itself, load time is the key to holding your audience’s attention. If a page takes too long to load it does not matter how well it is in layout, you have already annoyed the user and probably lost their focus on the layout. I use two tools for testing all of our designs at Glenn Website Design.

Google Page Speed Insights

GTmetrix

Responsive

The second important aspect that is not part of the layout directly but affects the layout is responsive design. In recent years mobile devices have changed the way the Internet works. You can no longer flood the web page with enormous content. You have to consider the small screen size of mobile devices. Use content that is easy to read not only on a desktop but also on a small cellular phone screen.

Most web development platforms today automatically insert code to adapt the page for various screen sizes. But it does not always work. The best is to test the page on various screen sizes but that is not always an option. You can find various online programs that will simulate screen sizes. I tested this one, it worked great for me, Screenfly https://bluetree.ai/screenfly/

Hicks Law

Hick’s Law named after British psychologist William Edmund Hick is based on studies that show the more choices your people have the less likely they are to buy. It points to the fact the more choices a person has the longer it takes to decide. It is easier to decide when you only have 2 choices versus 10 choices. This means fewer choices often lead to more sales and better conversion rates. You can use that in your page layouts by presenting a funnel option that takes the user down the rabbit hole. Once in then, you present more choices that lead as quickly as possible to a conversion.

As you can see in these two diagrams the more choices end up presenting the user with options outside of their view field. The longer a user takes to decide the more likely they are to leave and look for other choices. So based on the train of thought a website would function better presented more like a simple landing page leading the user into your funnel of the site’s offerings from the front page. So on the front page, you present the offerings which the user chooses. This leads to a singular offering web page with a detailed to-the-point presentation with the choice to buy or learn more. Always keep the user focused on your ultimate goal of a conversion.

Web Page Layout Design
Web Page Layout Design

KISS – Keep It Simple Stupid

KISS was a term I learned in the navy. It is an acronym that means Keep It Simple Stupid. It was a design principle noted by the U.S. Navy in 1960. The KISS principle states that most systems work best if they are kept simple rather than made complicated; therefore, the simplicity of your web page layout should be a key goal in design, and complicated extras should be avoided. Again this relates back to Hicks Law.

Suspense

You need to use some Hollywood movie logic in your website layout. Capture the user’s attention always giving them just enough information that they have to know what is coming next.

Negative Spacing

You should have space between each topic or illustration. But more importantly, you can use negative space to drive visitors to the content you want them to find. A good example of that is Google. Their website home page is set up with a huge blank area that clearly shows the visitor what actions to take.

Web Page Layout Designer
Color is Important

The psychology of colors is important for marketers, particularly when it comes to web page design and layout. You need to use color to grab the attention and use complementary colors to drive your customers to action.

Persuasive Copy

It is important that you use text to persuade the user to do something. But the text cannot be too long or they will get bored quickly. You should combine text with images or break the text up into small size boxes that can be read easily. Also the use of heading text should be used to grab the attention of the topic at hand.

Clear Outcome

The web page should lead the customer toward a clear idea of the goal. For example, this particular web page is to point out that I understand the importance of layout design. Ultimately I plan to persuade you that I am the best person that should be doing yours for you.

Research Competitors

One of the best ways especially on the Internet is to find out what your competitors are doing. Visit their websites to find out what entices you to look further, chance is a similar layout will work for you too.

Home page layout – why is it so important

The most important page for the visitor is your landing page. In most cases, organic visitors will find your home page first. The home page, as the name suggests, is the most important element of a website. You signal the most important content on it. The higher the content is on the page, the more important it is. Most often, this is where website development begins.

What should be on the home page

Of course – the most important things about your business, product, or service. When you start designing a website, you need to set a goal. Then you need to define the subject of individual subpages and adapt them to the needs of potential recipients (i.e. create personas ). If you do this job beforehand, it won’t take long for you to do the same for the homepage design. And for sure – it will be easier. The home page should signal the most important things that users will find on other subpages of the website. It sounds like a cliché, but when you have this guideline in your head, it’s easier for you to eliminate content that is not needed. When you list it and put it all logically, it will be easier for you to control the entire process of creating a website.

Yes, a good home page is one that doesn’t have much content. I know, it sounds strange, but seriously, this solution works best. Less is more – minimalism on the home page
Let’s say you are creating a website for an auto repair shop. On the home page, users should find the most important information about the services you provide. It is worth dividing them into thematic blocks. In some ways a home page is like a landing page, except on the home page you need to sell the entire business website, not just one item.

You know for sure what the strengths of your business are. If you specialize in a specific field of car mechanics – let this be the first information users see. Try to eliminate unnecessary content. One sentence describing what you offer will do the job perfectly. It is not worth playing with scoring. When you add a headline to this sentence and a button redirecting to a subpage that describes the topic in more detail, your users will know what you are offering after browsing the home page.

Web design – homepage layout

Good presentation of the content on the home page, it is worth dividing your content into horizontal segments. Nice background photo for text, best captured by you, will do the job great. They don’t have to be perfect, but they shouldn’t be screaming “I’m from the free photo bank” from afar. Horizontal segments also have an additional advantage – they will be easier to grasp. When each of the signals one of the topics of the subpages, it will quickly turn out that you only need a few segments that briefly describe your offer.

It is very important for the user who is looking for a specific item. He will find what he is looking for, i.e. your services or information, on the website. On the main page, the most important things are up. The less important (or – not the key ones) should be added below. Show off your strongest points. Also, leave a contact on the home page, even if it is duplicated from the footer of the website. Use the inverted pyramid logic.

Remember about headers and a good selection of fonts. The former help you scan text faster with your eyes, and the latter simply does not interfere with reading. The layout itself is also important. On the Internet – as users – we are departing from classical reading. So we do not follow the text from left to right, but more often we scan it through the center of the page. Therefore, the following segments of the home page should be centered.

Responsive

The home page, like your entire website, should be responsive. There is no mercy here. Keeping the “middle” layout of your homepage will make it easier for you to prepare a responsive version. Because while content centering on a computer is not as popular yet (although it is still very important), keeping it centered on mobile devices is a must.

Therefore, by creating a responsive version of the website, you reduce the amount of work that you need to do for the entire website.

How to write on the home page

Clear, simple, and precise. The home page is not a place for elaborations. It should be precise, precise, and – if you have any doubts – precise. The most important information looks good as the headline and one sentence underneath. The headline indicates the topic, the text below describes the most important topics. This is enough to convey key information to the user.

There is still the question of writing. If you want to write about social proof, i.e. satisfied customers, it is worth considering the topic a bit differently. Instead of generalities, it is worth showing specificity. For example, “every month, XY satisfied customers receive cars.” Something like that.

It’s also good to write about customers or specific services. When that sounds unnatural – just write about what you are doing. “We specialize in servicing French cars, but if you come with something else – we will definitely find a solution” – that sentence is true. Especially if you can count on good opinions from your customers and the workshop is actually looking for solutions :).

The home page is not a place for elaborations. It should be precise, precise, and – if you have any doubts – precise.

Recommendations on the home page

If you have satisfied customers – ask them for a recommendation. This is another social proof that helps you gain new users. It’s usually given lower on the web page, but sometimes it’s worth getting away from traditional tactics. In some industries, user feedback is crucial (the aforementioned car mechanic), so show the recommendations higher up towards the center of the page.

It is also worth getting user recommendations yourself. Some review portals expect certain amounts to be borrowed from users. In addition, when you terminate the contract with them, you can no longer quote opinions about your company. That is why it is worth asking people for their opinion on you. They are more likely to share it when you provide them with some – even a small – discount on future services.

The home page should answer the user’s key questions. It is worth remembering this when creating a company’s website.

Ideas For Website Layout

Website Layout Ideas

Website Development And Design Layout