Digi Digs a Simple Web Design Principles Guide

Home , Design Optimization

Digi Digs

A Simple Web Design Principles Guide ______

Articulated by Roshan Saund Contents

A Useful Overview…………………………………………………………………………2-4

Visual Hierarchy…………………………………………………………………………...5-9

Color Psychology………………………………………………………………………10-19

Typography……………………………………………………………………………..20-30

Personalization & Humanism………………………………………………………….31-36

Recap………………………………………………………………………………………..37

The internet is a harsh critic!

Today, consumers and users alike have more choice than ever when it comes to which brands, business and organizations they engage with. Not only this - the average customer is now truly aware of the value and the power that their ‘like’ holds.

Moreso, customers no longer base their loyalty on price or product. Instead, they stay loyal with companies due to the experience they receive (SuperOffice, 2019).

As a result, the manner in which businesses communicate and behave within the online community is critical to initial and long-term success and building loyalty.

So what do websites have to do with this? Websites are one of those critical interaction points where businesses have a unique chance for message delivery to capture, and convert potential leads - and it one that should not be squandered..

“75% of consumers admit to making judgements on a company’s credibility based on the company’s website design” -SWEOR, 2019

Copyright © 2019. Digi Digs LLC. All Rights Reserved. 2 Not only this, but the judgment mentioned above is quickly formed - research concludes that first-time visitors form impressions of a website within the first 50 milliseconds (Neil Patel, 2018).

(Image Courtesy of Neil Patel, 2018)

Specifically, 94% of these first impressions were design-related (ConversionXL, 2017). It is clear then, that design optimization is not only important to websites overall, but it has a specific impact on first-time conversions.

Furthermore, it has been proven that the overall visual appeal of a website dwarfs even the usability for user satisfaction as a first criteria (Conversion XL, 2017). Responsive design is therefore not just a necessity when trying to improve first-time visitor experience, it is important for overall site optimization.

Copyright © 2019. Digi Digs LLC. All Rights Reserved. 3 Overall, responsive design (not just on websites, but on social, mobile and other platforms, too) must consistently reflect the brand/product/service itself. This does not just apply to aesthetics such as coloring and font choice, but also to the language use and personality of the website.

Having said this, there are some specific, but generally simple guidelines and standards you should abide by when considering responsive website design. These principles and theories are illustrated over the coming pages and, when followed, will help to improve site usability, increasing user time on site, reducing bounce rate and ultimately giving you a better chance to convert the first-time visitor.

To begin, the data below displays research on web standards across the top 50 marketing websites on the internet (Orbit Media Studies, 2019). Not all of these are standards for every website and your weighting will depend on your industry. Instead, as a baseline, we should make sure that website construction across the board at least includes the red and blue-shaded features.

(Image Courtesy of Orbit Media Studios, 2017)

The research is a great starting point, but the full scope of web design principle includes the finer truths. Please continue reading to freely learn more!

The first thing to remember is that users in left-to-right reading cultures, read websites in two specific ways. By understanding the ways in which people read web pages, you can better manipulate typography structures. This will allow you to make key page elements stand out, driving higher conversions.

F-Pattern

According to the F-Pattern theory, users on text-heavy sites first scan a vertical line down the left side of a page text, looking for keywords or points of interest in a paragraph’s initial sentences. When they finds something of interest, they begin reading normally, forming horizontal lines. The end result is something that looks like the letter F (or, sometimes, E), as shown below. F-Pattern is often misunderstood today, but is still relevant (Neilsen Norman Group, 2017)

(Images Courtesy of ConversionXL, 2019)

(Images Courtesy of Tutplus, 2019)

As well as the F-Pattern, or F Layout, we also have the Z-Pattern. Z-Pattern scanning occurs on pages that are not focused on the text. If we access Z-Pattern sites, visual tendencies would make us scan horizontally over the top. It’s possible that attention is drawn to the menu bar at first or simply because we’re used to reading from left-to-right. When a user reaches the end, attention shifts down and left (again, based on reading habit), and repeats a horizontal search on the lower part of the page.

(Image Courtesy of Digi Digs, 2019)

This pattern is applicable to most interfaces since it addresses, the core website standards we mentioned at the beginning of design, such as hierarchy, branding, and CTAs. Further, the Z-Pattern is consistent with the simplicity we desire in design.

Forcing a Z-pattern for a website with complex content may not work as well as the F-pattern, but a Z-pattern can help bring a sense of order to simpler layouts (and increase conversion rates). On the next page are a few best practices we incorporate based on the image above.

● background: separate the background to keep the user’s sight within the framework

● point #1: this is a prime location for the brand logo

● point #2: adding a colorful secondary CTA can help guide users along the Z-pattern (we will discuss color after hierarchy)

● center of the page: using a featured image slider in the center of the page will separate the top and bottom sections and guide the eyes along the Z path

● point #3: adding icons that start here and move along the bottom axis can guide the users to the final CTA at point #4

● point #4: this is the ‘finish line’ and an ideal place for the primary CTA.

(Image Courtesy of UX Planet, 2017)

Thirdly, we need to be aware of the ‘Gutenberg Design Rule’. According to the Gutenberg rule, the web page is divided into 4 quadrants- primary optical area, strong fallow area, weak fallow area, and terminal area.

(Image Created by Better Posters, 2016)

The primary optical area refers to the upper left section of the page, and it receives the primary attention regardless of the users’ intention of using the website. Then the user sweeps across to the second quadrant- the strong fallow area, which is located at the upper right section of the page. This is the area where users will usually stop.

The next section the user sweeps to is the weak fallow Area which is the lower left section. Users don’t generally pay a lot of attention to this section. Last is the terminal area, which is the lower right section which we generally use to place CTAs.

At the beginning of this guide, we stated how web aesthetics need to reflect the image and personality of the brand itself. This is a given. As well as this, there are some coloring standards we need to follow specific to web design.

Remember, 85% of shoppers place color as a primary reason for why they buy a particular product and brand recognition increases 80% when using color (Website Builder Expert, 2018).

For websites, we want to use 3 colors (4 colors at most) (HubSpot, 2018)- a dominant color (reflecting the brand), a secondary color, and an accent color.

(Image Courtesy of Digi Digs, 2019)

We know color choice itself is important as illustrated above, but there are many color schemes, shades, tints, and even other considerations such as target gender and income that actually influence the colors you should use on your sites.

On websites, we recommend using either an analogous or monochromatic color scheme to reflect simplicity and avoid overbearance. This does not mean we cannot use other schemes, but only if it fits the brand and its personality.

Not only is it important what colors we use, but it is important how we use them. Primarily, we need to make sure to follow to 60/30/10 rule- 60% dominant color, 30% secondary, and 10% accent. This is depicted well, below.

(Images Courtesy of Wix, 2017)

Copyright © 2019. Digi Digs LLC. All Rights Reserved. 14 Copyright © 2019. Digi Digs LLC. All Rights Reserved. 15 Lastly, you must be fully aware of the type of consumer that you are targeting and how color psychology factors into that.

The amazing graphic below, created by Kissmetrics, illustrates the direct relationship that exists between colors and consumer-purchasing type.

(Image Courtesy of Kissmetrics, 2019)

Copyright © 2019. Digi Digs LLC. All Rights Reserved. 17 To end on coloring, we have included a few fine examples for viewing pleasure. All images are courtesy of Canva, 2019, who have provided over 40 different color schemes, each portraying their own personalities - so we strongly recommend checking out the link!

Fun and Professional

Pretty Pastels

Tints and Tones

Clean and Crisp

“Typography is the detail and the presentation of a story. It represents the voice of an atmosphere, or historical setting of some kind. It can do a lot of things.” -Cyrus Highsmith

The above quote makes sound typography (which can also be referred to as the how behind visual hierarchy), sound like a beautiful thing, and it is.

In more rock-solid terms, efficient typography (i.e. typeface, font choice, line length, kerning and tracking) is proven to increase web conversions: after all, more than 95% of information on the web is in the form of written language (UX Planet, 2017).

This means that a huge part of your web design is typography.

Turning to practices themselves then, let us first look at the typeface (or font family). There are many different typefaces (shown below), but we focus on serif, and sans serif.

Although there is debate surrounding the use of serif vs. sans serif typefaces, research today at least indicates that sans serifs are recommended for the body of the copy and serifs for the title and subtitles (Neil Patel, 2018).

So, how do we choose the right typeface? We find it useful to base typeface on the the specific emotive and associative evocations, and feelings, we want from the user.

To illustrate, we have included a detailed infographic on the next page.

Copyright © 2019. Digi Digs LLC. All Rights Reserved. 22 This information below is of utmost notability. It returns to the point that we want to personalize and humanize the web brand in order to establish trust among the user base. Specific typographical practices will yield specific emotive responses, so we take special consideration when applying typefaces.

(Infographic Courtesy of Crazy Egg, 2018)

Leading on from typeface, we must also ruminate upon font type. The previous infographic highlighted some font types, but below, we have illustrated the top 10 (loved, free and premium) fonts of 2018 (Marketingprofs, 2018). For a list of further popular fonts in 2019, check out this link from Creative Boom.

Another aspect of font you need to consider is font size. Below, we have included charts that include not just the best font size for web, but for other devices, too. The reasoning behind this is that most people today view the web from their mobile devices (Statista, 2019).

(Table Courtesy of Digi Digs, 2019)

Copyright © 2019. Digi Digs LLC. All Rights Reserved. 25 We have left out H5s & H6s because these tend to be header tags that aren’t used as much and usually have far fewer use cases (footnotes, copyright info. etc), or, they have the same sizes of the H4, yet exhibit different weights or kerning.

Within the previous data, we included information on font height. Generally speaking, 95% of the letters we read are lowercase (InFullMobile, 2017). In regards to font height itself, larger letter proportions between uppercase and lowercase tends to result in a more legible typeface (illustrated below).

Counters

You also have to be aware of the white space within the letters, i.e. the counters. For example look at “o”, “u” and “d”. Greater amounts of countering are believed to make it easier to recognize the letters (InFullMobile, 2017).

Additionally, when considering typography, you also need to take the correct approach to font weight. In this case, lighter type fonts is what is best for highest readability (InFullMobile, 2017). As a benchmark, the best character stroke thickness is about 18% of the x-height.

A more subtle part of font awareness is width proportion. Specifically, you want wide letter over a condensed one for better letter recognition and therefore legibility.

Slightly more apparent is the kerning value. When we refer to the white space between individual characters or letters, many fonts already come with a default kerning value that is best suited to make the space between letters look more natural.

As a general rule of thumb, the bigger text size we have, the less letter spacing we will need.

Alongside kerning fonts, you must also remember the need for tracking i.e. adjusting spacing across a line.

Alongside the principles of conversion-leading typefaces and fonts, we also need to consider a few more key typographical standards. One of these is line height, for which we obey the golden ratio- multiplying letter size by 1.618 to get the perfect line height (InFullMobile, 2017).

Text Block Width (Line Length)

Too wider text blocks increases user difficulty in finding the next line of text. If lines are too narrow the eye needs to jump from line-to-line to, often breaking the reading rhythm. To keep users engaged, the text line should have between 50 to 75 characters (InFullMobile, 2017).

Just as high as we prioritize utilization of web real estate do we stress the need to use white space as well i.e. the negative areas in any composition. The best way to show the significance of white space is with an illustration, one of which can be found below.

(Image Courtesy of HubSpot, 2018)

The basic role of white space is to reduce the amount of text visitors see all at once. Using whitespace to highlight or emphasize important elements on a website has been proven to increase visitor comprehension by almost 20% (HubSpot, 2018)

In its totality, by optimizing typography on-site, we are ultimately maximizing the readability of the site. This will lead to higher engagement times on pages, and improve interaction with content, culminating in a higher percentage of conversion for first-time visitors. In the long-run, it will also help to maintain user bases by contributing highly-apparent value to site usability.

Having discussed the design principles for websites that initially attract the new visitor, let us now look at the content practices for converting these first-time visitors.

(Image Courtesy of MintSwift, 2017)

We will discuss personalization a lot in our guides, with this being our first mention of the practice. When a visitor arrives at a site for the first-time, we need to establish a personal connection with the user. The best way we can do this is to humanize welcomes a much as possible.

A great example is found on the previous page - the Busy Veggie Family website, which personalizes and humazines by including a photo of the site owner and her personal story.

By using these in conjunction with pronouns such as ‘you’, it makes the user feel like there is an authentic person talking to them, instead of a website (or machine for that matter).

We must remember, the welcoming to a website is like the hotel lobby of the site itself. Users and hotel guests alike want a human touch to their welcome, not an automated service.

The travelling users came from somewhere. For increased targeting we can also utilize referrer detection technology to detect when a visitor is coming from any specific domain.

We can then use that information to customize, in particular lead magnets and exit-intent popups (we will build on these a few pages down), for a more personalized experience.

We have mentioned simplicity in design already. Our designs are never over-complicated as content-stuffing can become overwhelming for the user, leading to bounces. Below, The Modest Man stands as a good example of simple, but efficient design for a welcome page.

(Image Courtesy of Designmodo, 2018)

By efficient, we mean that it still, with its short character count (which also optimizes the site), it still details to the visitor what the function and primary benefit of the site is.

(Image Courtesy of Designmodo, 2018)

In order to incentivize users into further engagement with the site, and therefore the brand itself, we should try to include some CTAs (call-to-actions) for the visitor to follow. For sites, the best way we can do this is to offer lead magnets.

Essentially, we use lead magnets to offer visitors some form of free and informative content in order to gain contact information of the user, in particular. Above, work mentor Michael Hyatt offers a free ebook on his ‘Start Here’ page.

More convertible however (5x as much), are content upgrades. These are lead magnets tied to a specific page or post on the site. For example, for a ‘Start Here’ page, the lead magnet should be educationally-oriented, and on a page that offers purchasable content, we should include lead magnets that say, offer discounts on that purchasable content for completing the lead magnet action.

No one has ever liked popups. But, exit-intent technology such as mouse-tracking, allows us to make one last-ditch bid to convert visitors as they are about to leave the site. Here, we detect when a visitor is about to navigate away from the site, and present them with one final message (in a lightbox overlay) right at this pivotal micro moment.

Unlike immediate popups, which interrupt users as they are trying to browse a site, exit popups aren’t an annoyance- why? If the user was about to end their engagement anyway, there is clearly no harm in trying to persuade them to interact one last time.

Statistically in fact, 10-15% of lost visitors can be saved by using exit-intent popups i.e. 10-15% of visitors leaving a site will respond to a well-crafted message. So, how do we craft an enticing exit strategy?

(Image Courtesy of Sellbrite, 2018)

Again, we want to use a form of lead magnet, but, we need to change the verbiage within the title and description in order to specify the CTA to convince the user to stay. This is exemplified above. We should include action words and terms such as ‘wait’ and ‘hold on!’ whilst incentivizing the user with a form of discount or promotion.

Saving arguably the most important for last, this is the root that fortifies the chances of first-time conversions. When a first-time visitor lands on a site, we must immediately convey the benefit of the site content and educate the user on its functionalities.

(Courtesy of Designmodo, 2018)

One of the most user-desirable additions we can incorporate is informative video, as shown above. As with personalization, we will explore the use of video a lot within this guide.

To illustrate its importance however, today, almost 50% of web users look for a video before visiting a store (ThinkWithGoogle, 2017). More importantly, 79% of consumers prefer watching videos to reading about a product (Wyzowl, 2017).

We hope you have found the information in this guide useful. It is designed to be form a simple basis of website design for all interested to understand, easily-digest, and to be concise to the point where you get the most relevant information.

To recap, when considering website design, we should think about the following:

1. Visual Hierarchy 2. Color Psychology 3. Typography 4. Personalization & Humanization

If you have any questions about the information in this guide, or want to learn more, then please email [email protected].

Digi Digs offers a great UX-oriented web design and optimization service, which is affordable, simple, and one in which we communicate with you as much as you want to make sure your site message is executed as desired. For more info, check out https://www.digi-digs.com/services-digi-digs-marketing-agency.

If you are interested in scheduling a free consultation because you see the benefit of utilizing web design principles, but need a hand, please email [email protected].

We look forward to bringing you more free, useful, marketing content in the future!