You are here: Home / Blog / The Fundamentals of Good Web Design

The Fundamentals of Good Web Design

By Doru Mircea on Feb 12, 2022

Good web design should convey the company’s message clearly, enable the user’s journey through the site and reinforce the brand image. It should be both functional and aesthetically pleasing. There are many factors that go into good design.

We can only touch on this topic in this article, but we hope to provide you with a solid jumping off point.

Primary Objective

The first thing to consider when designing a website are your primary objectives. There are many kinds of websites, but here are a couple examples:

  • Is it an ecommerce site where you want to make direct sales? In that case, you need to impart enough information so your buyers can make a decision.
  • Or perhaps you are selling something expensive such as customized enterprise systems that require a great deal of consulting and time to close the sale? In that case, you may only want to give enough information to get your prospect to call you. If you give too much detail, your prospect may make a buying decision without understanding the full picture.

Whatever the purpose of your website, list what you want what to accomplish with the website before you even start thinking about design.

Color

We are going to touch on a couple important points about color for web design here, but this is a vast area. Your designer should know the science behind making colors visible, color vibration and pleasing combinations.  Here’s a starting place for you to finding out more.

Color Palette

You will need to select a color palette with the help of your designer. The colors of your website should be mirrored in your other marketing materials. These colors should enforce the image of your organization and be consistent with your brand.

It’s amazing how many small businesses choose a color for their logo and stop there. Ayn other colors they happened to use on their websites are catch as catch can. Every color used on your website must be a planned part of your color palette. (Of course, images may have some additional colors.)

You will need colors to use for backgrounds, for elements such as lines and shapes in charts and infographics, and for when you want to draw attention to something.

You don’t want to fill your website with bright colors, or it’s going to be hard to read.  But they have their place when used sparingly. For example, bright yellow is a great choice to use for a highlight color for arrows or frames around special offers. It’s the most visible color. It’s also the first color that people notice.  A bank is unlikely to use yellow for their logo. But it can work very well on a bank site as a highlight color.

Reactions to Color

Colors trigger emotions. People associate certain qualities with colors. That’s hard science.

Medium to dark blue, for example, conveys reliability. It’s no accident that so many banks and law firms choose blue to represent them.

Red on the other hand is associated with excitement. Red is a popular choice for consumer brands.

The above is true for the Western world. But be aware of your target audience. Color meanings do not always translate across cultures. Before choosing your colors, analyze how your target audience will interpret them.

Images

The images you use, like your colors, should be consistent with your brand. They should also be consistent with each other. Consider what size and type of image you want on each similar page and be consistent.

For example, you might want to put a long horizontal photo across the top of each service page with the name of the service underneath. You you would not put richly colored photos across the top of one service page and a black and white photo or illustration across the top of another service page. Neither would you use a long horizontal image across the top of one service page, and only a small square photo in the body text of another without the top image.

Fonts

Like the rest of the design on your website, your font is part of your brand. Is your company fun? Cutting edge? Traditional?  Choose fonts that work with your brand but not anything extreme for your web design. The most important thing is that your font be legible.

You may want to use a combination of fonts for certain items. For example, maybe you want a serif font like Times Roman for headings and a sans serif font like Ariel for body copy. Since serif fonts have small strokes attached to the larger strokes of letters, they are a bit more ornate than sans serif fonts. Therefore, appear to be more traditional and formal. Sans serif fonts are cleaner and appear more modern. They are also easier to read in body copy (as opposed to larger letters in headings).

Whatever you choose, you must use your fonts consistently. You also don’t want too many fonts, or you are going to lose a branded look and feel. Certainly not more than three.

If you want to use a decorative font or a script font, save it for the exception, maybe as the large heading to an occasional special offer.

Make sure your font is big enough. Some websites have such tiny body copy that it’s difficult to read. Also keep in mind that some fonts tend to be smaller than others even if they are the same point. For example, 12 point Times New Roman appears smaller than 12 point Ariel.

Finally, pay attention to the color of your fonts. If you want to use grey instead of black, that’s fine, but make sure the grey is not so light that’s it’s difficult to read.

Google Fonts offers a multitude of open-source fonts for use on the web. You may want to take a look and discuss them with your designer as well as other fonts your designer recommends.

Layout and Visual Hierarchy

Your designer may design a completely new layout for you, but it’s usually unnecessary. There are a lot of tried and true layouts available. Discuss with your designer what kind of layout will work best for your company. Look at sites with various types of layouts.

Think about what kinds of devices most of your audience will use to access your site. Keep that in mind when finalize your web design.

  • For example, single-column layouts work great with mobile phones.
  • An F-shape layout follows how users read content. It works well with pages that have a lot of content options, enabling your audience to quickly scan them.

These are just two of many possible options, and as previously mentioned, your designer may also create something completely customized.

Ask your designer how they plan to lay out your web pages, and the benefits of that choice.

Once you have your layout in place, check that the most important items are featured where people are most likely to see them. For example, to be very basic, you probably would want your invitation to call for a free consultation near the top. Of course, there are other ways to attract attention to an important element such as color, contrast, image, fonts, size and white space.

Load Time

You could have the most beautiful, compelling website in the world, but if it takes too long to load, your visitors won’t wait. People today expect a website to load in under two seconds. The most common gremlin is images that have not been properly optimized for web use. Don’t let something this amateurish lose you business.

White Space

Don’t overload your pages with text with the possible exception of a page of specs. If you try to fit everything in, your audience will remember nothing.

Keep your content to what you want your audience to remember, and set off your points with ample white space. You don’t want your site to feel empty, but you do want it to be easily readable.

Navigation

Your navigation must be consistent and easy to follow. Make it as intuitive as possible.

Accessibility

It’s not enough today to create a beautiful, easy to use website. You must also think of how to make it easily accessible to the disabled.

26% of US adults live with at least one disability. That’s about 61 million people. Some of these disabilities make it hard to use websites without help from technology such as keyboard navigators, text reader features, blinks blocking, flexible contrast displays and more.

Making your website accessible is good for business. But it is also required by US law.

Contact Umbrella Local for Web Design Help

There is a lot of science and marketing strategy that goes into good web design. If you are not sure where to start, contact Umbrella Local for a free consultation.

 

 

Share This Article

Subscribe to our newsletter

Join thousands of marketing managers who get our best digital marketing insights, strategies and tips delivered straight to their inbox.

    How is your
    website's SEO?

    Use our free tool to get your score calculated in under 60 seconds.

      captcha

      Our Locations

      Alternative content for the map
      contact calling icon

      Ready to speak with a marketing expert? Give us a ring

      (646)440-1426

      google ratingfive star customer rating