What is (good) web design?

Index

1. Development of web design
2. Principles of web design
3. Best web design practices
4. Trends in web design

1. Development of web design

Beauty lies in the eye of the beholder.

The look of websites has evolved over the last 30 years. Do you remember the late 90s and early millennial homepages? Gone are those times when you had to dial into the internet to get a connection to read the news or log into Myspace. Boxy styles, garish colors, limited fonts along with no clear positioning of text made these early sites resemble collages of Word documents and photos stuck to a pinboard.

Early web design

Back in 1991, behind the holy gates of CERN, the first ever homepage was born. It welcomed us with plain text on a white background. Websites of the early 90s were function based, but also opened opportunities for something else to emerge: Web Design.

Web design encompasses what a visitor sees and interacts with on a website. Back in the early 2000s, major elements of a website included the navigation bar with tabs to sub-pages, headings of pages and a logo. The start page was often named as the front page to show the visitor they had landed on the main page. Early web design was table based, descriptive and text focused. It represents the “read only web” known as Web 1.0.

For the last 14 years we still amongst Web 3.0 and Web 4.0 are using the Web 2.0 ; concentrating on watching, reading, and writing.

Schematic development of the world wide web

Web 3.0 takes it a step further, allowing execution. This means a visitor can engage with a website like a program or application. Right now, the web is shifting to a symbiotic web (W 4.0) that allows customized self-learning interaction of the user with websites, apps, and platforms. Along with Web 2.0, and the growing usage of mobile devices, came responsive web design.

Responsive Web Design

When your website automatically adapts its appearance to all screen sizes of all devices, that’s responsive web design. It allows the type setting and text flow to change from a wide screen with less line breaks to a narrow screen and a text with many line breaks. Photos in landscape format are adjusted to portrait format without losing quality or meaning.

To describe the behavior of responsive web design, imagine all the elements of your website are laid out like chess pieces on a flexible gameboard. The board can be squeezed and stretched anytime to any rectangular dimensions while the pieces move to their new positions relative to changes in the dimensions of the board.

At Webnode, all our website templates are automatically programmed as responsive. The website editor automatically formats the text to flow correctly, without the need of implementing extra line breaks.

Mobile first design

This goes hand in hand with responsive design. Rather than design a website traditionally, with desktop and laptop versions getting designed first, mobile first design websites are adapted to desktop and laptop versions after mobile versions are made. People who used their mobile device to visit websites reached 4.3 billion globally in October 2020, those numbers continue to rise.

Google already prioritizes mobile friendly web design. Mobile first design is not only responsive design, it also incorporates easy structure and navigation as well as fast loading speed. The latter is one of the most important elements of modern web design, we will talk more about it in the following section.

2. Principles of Web Design

Styles

The style of a website is fundamental, it delivers the framework of a website. It describes how elements of a website are positioned relative to each other. The most important ingredients that make up the style are:

• navigation bar
• header (with optional headings and logo)
• footer
• (optional) sections

Major elements of a website, example image of top navigation bar, header and footer

These elements are arranged relative to the navigation bar in a so-called standard style. There are 4 types of standard styles. A navigation bar to the top or left is the most common. Webnode provides you with templates meeting all standard styles.

From top left to lower right: hamburger button, top navigation bar, lower navigation bar and the navigation bar to the left.

No matter what template you selected, you can always change between these standard styles afterwards.

Although the navigation bar is still positioned at the top of more than 80% of all websites, flexibility is growing. The clean positioning of a hamburger button (three bold horizontal lines) at the top right corner, opening up all other pages in a dropdown menu, is a newer approach in addition to placing the navigation lower to the middle of the pages.

Usually, the website footer is reserved for legal information, disclaimers, social media contacts, and other links. Half the world displays the contact info on the right of the navigation bar. This is a reason why website templates already hold a space in the navigation menu for the contacts page.

As our eyes move from left to right, whatever is placed on the right side will gain more attention. Just like in the early days, today we consider logos occurring on the top left side as a standard practice or expect them at least in the mid top section.

The idea behind the standard style is to provide the visitor with a comprehensive overview. All elements on a page have a dedicated space, leading away from the style used in early website design that resembled a patchwork pattern.

Layout

The layout describes what space the major elements of a website should take up on the screen.

They can be positioned in the center with borders or take up the entire screen. Like a heading in a word document with wide or narrow spaces between words being positioned in the center or to the left.

Single column design

The content of a page is laid out in a single column that takes up most of the screen. Due to its simplicity, it is the most commonly used type of layout.

It is especially suitable for displaying content on mobile devices. This makes it very popular in contemporary web design.

Single column design

Split-screen design

Sometimes it is necessary to present more than one piece of content of equal or similar importance next to each other.

Very common of this layout is to complement a text box with an image or divide the text into columns. Equally well work two images with a textbox on top or below to split the screen.

Variations of this type of layout can be achieved by dividing the screen in different ratios, for example, 50:50.

We can often see this type of layout in online shops where the information is as important as the product image itself.

Split screen design

Card grid design

This type of design became popular with sites such as Pinterest, Facebook, or Twitter.

The card grid design resembles cards laid out in rows on a table. The cards are images or symbols with optional short text captions that lead the reader to more detail-intensive pages with a click.

The image makes it easy to identify the different contents of a page. It makes browsing and selecting information more accessible and enjoyable.

Example of card grid design

There are two types of grid layouts:

• based on cards of the same size as a square grid
• based on cards of different sizes, so that rows of the grid vary in height

“Above the fold” and “below the fold”

Once a website is opened on a screen, we see the navigation bar, the major header image, a headline, and perhaps some intro text. If we want to see more, we need to scroll down.

What we see from a website without scrolling down is referred to as “above the fold”. Everything else is “below the fold”. Contemporary web design places the most important elements above the fold.

To catch a visitor’s attention, place the best and important elements of each of your website pages on top so that these are visible without scrolling.

The standard styles and layout give the website a look, but true design also needs to be practical. We like to find what we seek quickly and have it presented fast and easy. Therefore, good web design means functionality. Major factors that improve web design are:

SEO boosting elements

These are fields in the website editor to define search engine relevant terms, such as the

• meta description
• page name
• web address or URL
• keyword usage in text and titles

Google prioritizes headings within the written website text, giving main headings classified as H1 the top priority.

Modern website creators already define the function of heading types in the code, so does Webnode.

All headings are automatically coded as H1, so that you only need to worry about what words to use.

Speed

This goes hand in hand with user friendliness. Google changed its algorithm in January 2021 to rank websites with optimized loading speed higher than those loading slower.

Webnode websites are simple. They are coded in such a way that a maximum loading speed is automatically reached on all devices, as long as your personal uploaded images size is kept under control.

User friendliness

Also known as eye friendly guidance, relates to how pages are structured within the website and how intuitive the navigation is.

Webnode’s templates emphasize clear and concise navigation that is limited in the number of tabs. Subpages are limited to a maximum of 3 to reach all pages and their content quicker.

Furthermore, the path of subpages is constructed short to make the web address easy to read and remember. Long paths with several dashes that fill the address bar of the browser are outdated.

No matter if your page is a subpage of a subpage the web address of your gallery will still show as “mysite.com/gallery”. The aim is that a minimum of clicks lead the reader to the desired content.

3. Best web design practices

A website template of a website builder provides you with a style framework and functions for your website. Preselected images, fonts and colors are an inspiration for how your business website can look. The template is fundamental, but what makes it a good website?

It is in your hands to individualize your website. Here, we show you how to structure your website to boost its design.

Branding and web design

This is a match made in heaven.

Think about your brand, your mission, company goal or intentions. Your what and why are ideally enhanced by your design. This will make you unique, true to yourself and authentic. If you sell candy, dare to use colors. It is worth investigating the power of colors, as they transcend culture dependent messages. Find your brand harmonious colors and your texture and be consistent with it.

Texture

This describes the background of your pages or text elements. It does not need to be white. It does not need to be monochrome. It can be an image of a landscape, some animated flowing water or just some pattern. In Webnode’s CMS you have an array of different textures for your backgrounds to choose from, and you can always upload your own images.

Structure and guidance

Reveal the pages of your website like a 5 course Italian menu. Let pasta be your start page. Reduce information on major pages of the hierarchy. Hide pages with detailed information and link them to those further up in hierarchy.

You can visualize each of the main pages as a poster. Keep it short to increase interest. An option to give your site more structure could be adding a grid of images following the card grid design. Each image displays a topic or service, which links to more detailed pages. This way you are leaving your visitors in control and make your page interactive.

Sectioning

Let the sections guide your visitors. In the first section of a more detailed page presenting your staff; you could, for example, start with a short story of how it all began. After that, you could lead the reader to more details, e.g. company milestones, present your key employees, and so forth.

Less is more. This relates to all content on a single page, such as length of text, number of varying backgrounds, fonts, and colors. Headings are no longer a must in the header of a page, let the image speak for itself.

Give your readers some slack. White space or empty space on a page, also known as negative space, will give the eye a break. This space occurs as a white or subtle colored frame, space between sections of a page. This way the brain take in the message; like when you stand up and stretch to go for your 5^th coffee today. Use negative space. It does not need to be white, it can be your textured background.

Avoid confusing and overwhelming the visitor by giving your content structure through geometry.

The rule of thirds

This rule originates from fine arts and describes the ratio of spaces in which features are sketched. Divide each side into equal thirds of a page. The intersecting lines are the guidelines for eyes to follow and where one strategically places an object.

“The cliff top walk near Pourville” by Monet shows two ladies looking out to the sea of Normandy. They are standing to the middle right side with a perfect clouded sky in the upper third of the painting.

The Cliffwalk at Pourville (1882) by Claude Monet (Art Institute of Chicago) is the perfect example of how the rule of thirds applies.[/caption]

It is not a coincidence that such images are balanced and easy to comprehend.

Concentrate on filling your most important information in one-third of the page and balance the opposite side with something less intense but complimentary.

Example of rule of thirds, the grid line indicates the nine possible areas, where one can place an object.

Luckily, the Webnode editor helps you with positioning your content within a single section by letting you choose the sector of the nine possible placements when applying the rule of thirds.

Consistency is key

This relates to all aspects, such as the color, texture and fonts you choose, the amount of information you want to display as well as your topics. Remember, make it simple and give the reader one topic per page. Not more.

For example, if you have a carpentry company and you want to present carpenter-related stories and tips; no one needs to see the boozy pictures of the last company day out. Instead, include videos of your customers who tried your product, or your own video demonstrations. Be a bit creative, but be consistent.

Bad web design to avoid

What is the good without the bad and the ugly? These were “a la mode” a few years ago, but are increasingly avoided like household chores:

• sliders
• slideshows
• banners
• carousels
• (too much) content below the fold

The recent change to abandon these functions represents the overall global trend to simplify, minimize and clarify. Confronting visitors of your site with an intro slide show on the start page or sliders of viewing a gallery is too much to take in. Banners were used when the means of online advertising were limited. Today, advertisement happens on social media platforms, with video ads.

Over the last few decades, the amount of information available to us has grown exponentially. We browse and slide, scroll and click in search engines, on websites, on social media and apps. We have a lot of input to digest. Reduce the load.

Keeping the best practices in mind, we stress these further 6 no-nos’:

• Too much text
• No guide of movement for the eye
• Bad image quality
• Chaotic structure between pages
• Monotone, no-contrasts of elements
• Unharmonic backgrounds, fonts and colors

You have the essentials to improve your website design, let’s get to the trends in web design to follow in 2021 and beyond that will leave website visitors even more amazed.

4. Trends of web design

Web design nowadays has the following purposes:

Making a website visit engaging, fun, and interactive.

On top of that we like to be in control when browsing through pages and at the same time learn and find value.

Simplicity

This is king. Flat design is a form of minimalism in web design, giving each element more space and background.

It shows everything in clear, harmonious colors. The intensity of text fonts, lines and backgrounds is brighter, sharper, and highly defined. Think about Mies Van de Rohe and the open, wide and light Bauhaus style architecture of the 1920s and 30s.

3D

In addition to simple forms, 3D effects have emerged. Neumorphism is a type of design which gives shapes, such as buttons and icons, shades to enhance their outlines. It creates a relief that elevates the shape relative to its background or vice versa.

Example of neumorphism

Webnode incorporates such nuances by giving the option to add a decorative border to sections if you’d like to enhance your content and shade effects to uplift buttons.

Decorative border example and shade effects

Dark or gradient

With regards to the background, dark design will dominate together with gradient colors. Soft hues that grade from light to dark, contrast or complementary colors and dark backgrounds are easier on our eyes and make our ever increasing screen time more bearable.

Storytelling web design

It is not only the visual part of a site that will make it interesting. It is also the story behind the images. Website creators use illustrations, mimes and memes to tell a story.

Why not tell your business history on how you became a chef, a carpenter, a hairdresser, a craftsperson, or a mechanic by utilizing the life story of a hero character with playful images?

You’ve probably already met the faceless folk in muted colors on our pages and social media posts who tell you about a new feature or function.

Memes and emojis are no longer restricted to social media and chat. They make us see things lightly, with a sense of humor and they bring the point across. Websites thus blend more harmoniously with what is presented on their social media equivalents.

Boxes of plain text and appealing color schemes will not cut the mustard anymore. We like to be catapulted back to childhood when we flicked through our favorite comic or fairy tale book. Borchures, magazines entertain and bring ideas. A website is not a Goethe tome. Ease an fun are paramount.

Human bots

These are the little helpers for your site to engage with your visitors in real time. You too may have closed that chat bot bubble, skeptically thinking that such automatization is impersonal. Bear in mind, these bots are programmed by humans. They have your worries and questions in mind.

Furthermore, chat bot programs only allow a specific number of pre programmed questions to run automatically. The remaining interaction is directed by a human customer care agent, replying to you instantaneously and guiding you or helping you with what will be your best purchase.

Interactive web design

Any website that creates an interaction with the visitor; be it through a bot, a poll, a quiz or a form, uses interactive web design. True interaction goes a step further by making the visitor feel empowered and in control. They know where to get intuitive navigation. They can ask questions anytime or give feedback.

The aim is to make interaction with the site much smoother and at the same time more advanced. This ranges from analyzing the path of a visitor from opening the landing page to the purchase of a product with programs such Smartlook and Hotjar, to including the use of human bots and app-like features into the site.

From a marketing point of view, interactive web design has the sole purpose of having calls to action and to make a conversion. The call to action facilitates a conversion and thus the button to get to this specific page to open a form to sign up.

Unconventional styles

In a wider sense, interactive web design is also challenging some new and unconventional ideas about the website standard styles. Remember, we spoke about scrolling and above the fault line? New web design offers the possibility of creating websites with non-traditional scrolling. Here the movement is like a swipe; It is directed sideways instead of top to bottom.

Diagonal web design is the other rising trend that incorporates diagonal shapes into the background to guide the user from left to right and/or helping to scroll downwards to points of interest. For example, a diagonal line leads to a desired button to encourage action.

We have introduced you to the principles of web design and shown you what you can do to boost the design of your own websites. We’ve also provided a look into the future so you can see what’s coming up.

Did you already implement some of the principles we mentioned? What is your favorite trend to follow?