Let's Talk
Home
About
Services
Blog
Teel Site Logo

Blog / Created January 2020

Best Practices In Modern Web Design

By Teel Group

What Makes a Good Website


The possibilities are endless when it comes to designing a website. Websites come in many different forms and are constantly changing based on trends and advancements in technology. There's not one way that all websites should look - however, there are certain qualities it must have and guidelines for it to follow in order to be effective.

To provide a good user experience, the end product must not only look good, but also be extremely practical.

What looks “good” is often subjective, however there are certain things you can do when designing a website that provide utility and are aesthetically pleasing to all humans across the board - both consciously and subconsciously.

Making sure that the website is practical is a lot more straightforward. There are many strategic decisions that you can make to simply make your website easier to use. This can be achieved through having great content, prioritizing usability, and ensuring that the way it's built is technically sound.

The perfect website takes all of this into consideration and provides a user experience that leverages the latest tactics in both functionality and design - and in this article, we're going to discuss some of the ways you can do exactly that.

From a Design Perspective


From an aesthetic standpoint, the key is finding the perfect balance of originality and creativity while still implementing practices that are known to work. It’s good to be unique, bold, and ambitious – although, this can backfire if your ideas are poorly executed. While at the same time, you also don't want to just copy what is popular and have a website that is boring and unoriginal.

However, being in tune and getting inspired by what is popular in the world of design goes a long way in terms of establishing credibility and earning the trust of your users. Trends are constantly changing and having a website that is up to date with the cutting edge of design is not only impressive but demonstrates that your brand is fresh and in touch with the world. However, you should always be wary of fads and stay away from things that might only be a flash in the pan. Awwwards.com is a website that ranks websites daily based on their design and serves as a great resource for keeping up with trends and getting inspiration.

Awwwards

Because there are so many ways to go about designing a website, it’s always a good idea to rely on more proven, data-driven methods of design that are rooted in science and human behavior. In the rest of this section, we'll touch on a few of the surefire ways to improve the aesthetic appeal of your website.

A solid understanding of color theory is important because it serves as the foundation for any company identity. Having a brand kit, being consistent, and strategically using the colors across your website is important for brand recognition as well as organization.

The power that typefaces and fonts have is wildly underestimated.
A lot of people use these words interchangeably, but they actually have different meanings. A typeface is the overall design of the lettering, while a font is the more specific type of the typeface (such as bold or italic). Typefaces and the way fonts are used help organize content and invoke certain feelings in the reader. You always want to ensure that the type of text you are using communicates your brand, is recognizable, and easy to read. You really shouldn't overthink your typeface. It's always smart to play it safe and go with something relatively common because nobody likes reading text that's too obnoxious or hard on the eyes. Keep it simple and never use more than 3 different fonts across your website. The text on your website is how people learn about and relate to your company, so it is quite important that you use this medium to make a good impression.

To really be sure you are designing your user interface in the best way possible, it might be helpful to become familiar with the Gestalt principles. These are rules of how humans group similar elements and recognize patterns. The principles include Proximity, Similarity, Continuity, Closure, and Connectedness. Being aware of these rules can help you determine why something may look "off" even though it might be subtle or difficult to notice at first glance. Other universal design rules worth noting include the "rule of thirds", the "golden ratio", and many more.

Perhaps the most common design mistake people make today is simply having too much on their website. Having a lot of content is usually not a bad thing, but it’s all about the way that it is organized. When it comes to making web pages visually appealing - less is more. Having a clean, sleek, and minimalist aesthetic not only looks great, but it is also a hallmark of a modern website. Cluttered websites that overwhelm the user with too much information at one time are (thankfully) a thing of the past.

Here is an e-commerce website of a Swedish company, called Monokel Eyewear, who serves a great example of a minimalist look and feel.

Monokel Eyewear Minimalist Web Design

Practicality & Structure


We just discussed a few of the no-brainers in terms of how your website should look but now we're gonna talk about some of the ways that design can improve the functionality of your site.

A minimalist design not only looks good, but it can also dramatically increase your conversion rate. Having less on your website reduces friction in the user journey by providing a more straightforward experience with less room for confusion or distraction. Taking a minimalist approach is also a great way to stand out in the market because websites are often over-complicated and this simplicity can sometimes provide a competitive advantage within your industry.

Structuring your website content with the user journey in mind is how you can optimize for maximum conversions. The user journey is the single most important thing to think about when it comes to designing websites. Whether it's your home page, product/service page, or a landing page for an advertisement - putting yourself in the mind of the user is the best way to determine how your content should be structured. For example, a common landing page anatomy includes your main selling proposition (headline/tagline/subheading), media (image or video relating to the product or service), benefits or features (value proposition or features section with icons), credibility or social proof (case studies or testimonials), and your main call to action (such as a button to purchase the product or service). You should place each section in order of importance for the buyer's journey and perhaps even follow a "Z", "F", or "funnel" layout structure.

It’s all about presenting the user with what they are looking for in the most simple and concise way possible. Within each section on a web page, it's also important to be mindful of the visual hierarchy of each element, the type of elements, and how many there are. Hick’s law states that as the amount of options increase, so does the time for someone to make a decision. Similar to the Paradox of Choice, which is the idea that as the amount of choices increases, the easier it becomes to choose nothing at all. When dealing with elements on your site, Fitt’s law stipulates that the time required to move to a target area (ex. clicking a button) is a function of the distance to the target and the size of the target. In other words, the bigger an object and the closer it is, the easier it is to use. There are a number of UX laws similar to these, and a website called Laws of UX does a great job explaining them.

Laws of UX

Know who your users are and how they behave. You should always be familiar with your target audience and cater the experience to their needs. Being aware of your website’s traffic demographics (age, location, gender, etc.) is key so that you can give them what they might be most interested in. After all, they are the ones using the website so it should be designed based on what you know about them. After launching your website and gathering sufficient user data, it's always helpful to see a heat map of how visitors interact with your content. This can help inform the design of your website by seeing what users are most interested in so that you can prioritize or re-order content as necessary.

Below is an example of a company based out of Denmark, called AIAIAI Audio, who perfectly executes a clean, conversion-optimized home page design that complies with many of the laws of UX.

Conversion-Optimized Design

Content


Now that you have the overall design and structure of your website down, it's time for arguably the most important part - the content. By content, I mean every word, image, video, animation, graphic, and icon that exists within your web pages.

The text and copy that you decide to put forth on your website is your chance to convince someone of your value. You need to be sure you are communicating as clearly and efficiently as possible. Most users do not take the time to read every word on your site, so the goal is to be as straightforward as you can be. Try to break up the text into digestible chunks rather than having long, text-heavy sections. Having too much text in one place generally isn't effective nor looks good from a design standpoint. If you must, then just always be sure it is well-organized and possibly even has some type interactive aspect or media included to keep the attention of your users.

Visual elements like images, videos, animations, and icons are critical to keeping your users engaged. It is very easy to tune out and lose focus when there is nothing but a wall of text on a web page. These engaging elements can not only help keep someone's focus, but it can also increase session duration and interaction. They are also incredibly useful because of their efficiency to communicate information. As the saying goes, "a picture is worth a thousand words". Many people also learn better visually and find learning through these mediums more enjoyable. Media also provides a lot of depth and credibility to your website if the content is original.

You should always refrain from using stock media on your site because it can do more harm than good. Especially those with people (or actors) in them. Visitors to your site know when photos or videos are stock so you aren't fooling anyone and they often give off a cold, distant feel to your website. Stock photos can still be useful, but only if they're chosen appropriately, used sparingly, and implemented in a tasteful way. However, custom content that you have 100% control over is always going to be more relevant and impressive than a cheesy stock photo.

Icons are a playful way to quickly relay info or reinforce a key idea. They also are a great opportunity to reinforce your branding and add color or interactivity. However, icons, animations, and graphics alike should be used sparingly as it can be quite easy to go overboard by using too many. Balancing these elements with "real" content like images or videos can help provide a more warm and personal touch to your site.

Usability


Implementing progressive design techniques can provide a better user experience by making things more efficient, interactive, and usable. We'll quickly go over some of the more popular innovations that you might see today in the world of modern web design that improve how your users interact with your content.

Popover Menus - Improves mobile usability and de-clutters websites by eliminating the need for always having a fixed menu at the top of the page.

Sticky Scroll - Efficiently fills empty space by dragging a shorter piece of content alongside a longer element.

On-Scroll Animations - Helps keep users engaged and adds emphasis by only showing the information that they need to see at a time. These types of animations also increase session duration and page completion.

Hover Animations - Encourages more interaction with the content, keeps users engaged, and can improve content efficiency by providing info upon hover.

These are just a few of the ways to improve the usability of your site and impress your visitors with cool, unique, and beneficial functionality. Some of the world's largest companies implement these type of features on their websites and landing pages to create powerful web experiences. Google's Nest Mini and Apple's Airpods Pro landing pages certainly come to mind when it comes to designing jaw-dropping experiences through the use of impressive design and animations.

Apple Airpods Landing Page

Technicality


It may not seem like it at first glance, but there is actually a surprising amount of technical considerations you should have when designing a website.

Site speed is a huge factor in decreasing your website's bounce rate and improving your SEO. Web users are impatient and insist on instant gratification. If you do not quickly give them what they are looking for, or a good reason to stay, then they will immediately find alternatives. So always be thinking about what you are designing, how you are designing it, and the implications it might have in slowing down your site. Be aware of certain things like the size and type of files you're using, properly sizing images, unnecessary CSS, etc. Test your website's site speed and learn about opportunities to improve it for free using Google's PageSpeed Insights.

Device responsiveness helps by improving the user experience and SEO. Be sure you are always keeping every type of device in mind as you are designing your user interface. In 2020, mobile users account for over half (about 52% and counting) of all global web traffic. In some cases, depending on the nature of your business, it may even be a much larger chunk of your website's traffic. If your website is not optimized to perform on every device, then a user might quickly bounce in order to find a more device-friendly alternative (aka your competitor). Google can detect websites that are not built responsively and can penalize you, causing your website to rank lower. Having a poor bounce rate does not look good in the eyes of Google either.

Ensure that your content is structured properly using a semantic HTML format. When designing your site, it is important to correctly organize text content through following a proper HTML format. Proper use of H, p, and HTML 5 tags not only improves visual organization but also helps search engines index your on-page content.

Always do plenty of testing. Testing your website is critical. Not just at the end, but throughout every stage of the design and development process. When a variety of users test your website, they can provide valuable insight and feedback that would be impossible to get any other way. Different perspectives can offer information and help you solve problems you may not have even know were there.

If you are still curious about properly configuring your website for SEO purposes, check out our blog titled "Easy Ways to Quickly Improve Your SEO".

Is Web Design Really That Important?


In 2020, your website is a huge part or even the complete customer experience that your business provides to your customers. Many businesses exist solely online and those that don't, still rely on the internet to bolster their sales in one way or another. It's rare to find businesses that don't have an online presence whatsoever, and if you do come across one, it is safe to say that they are probably losing out because of it. All businesses can benefit from having a website to some degree, and it is becoming even more crucial by the day.

Think of your website as a place that you can attract customers and control 100% of what they think of you. Similar to how important a customer's in-store experience is, the user experience of a website has become the modern equivalent.

It is critical to stay competitive in the digital realm. You might have a superior product or service, but if your competitor’s website is better, then they could win the business just based on that fact alone.

You can gain new customers, improve your reputation, and increase sales all through your website and its design. This is the reality that we all live in today and the power that a well-designed website has should not be underestimated.

Final Thoughts


There is a lot that goes into designing a website, and only a fraction was discussed in this article. But, you should not get overwhelmed because the most important thing is to just start by building a foundation that has the basic principles.

The best way to approach a web design project is by mapping out the essential core functionality and building on it from there. Your website will likely change over time as you add content, make improvements, and modernize it to keep up with the rapid progression of technology. You should think of your website as an always-evolving work of art that can be adapted and improved over time. In most cases, websites are truly never "finished".

Always remember that there is no such thing as the perfect website. However, there are many factors to be aware of that will help you get close.

Share this post

Twitter
Facebook
LinkedIn

More Blogs

December 5

Top 5 No-Code Tools for Your Business

Learn about the rise of no-code technology and our favorite tools to improve your business.

Learn More
October 14

How Teel is Innovating the Self-Storage Industry

See how Teel is digitally transforming the self-storage industry through proprietary technology and solutions.

Learn More
November 28

Easy Ways to Quickly Improve Your SEO

Read about some simple opportunities to increase your website's search engine visibility.

Learn More