Website Design 101
In our last blog post, we talked about how to select the best website builder to suit your needs. Now we’re ready to discuss your website design and layout.
According to Stanford research, “Judgements on a company’s credibility are 75% based on the company’s website design.” In short, website design includes webpage layout, content production, and graphic designs. If you’ve chosen to use a pre-designed template from your website builder, you may not have as much control over the webpage layout, so choose wisely. However, you likely will have control over colors, text styles, graphics, and content.
When selecting your layout, think about what is called visual hierarchy. The visual hierarchy communicates the order of importance of your content and includes scanning patterns, the use of white space, repetition, and flow. Here is an article that explains this nicely.
Choosing a Website Color Scheme
You can’t deny that color often evokes feelings and emotions. When you’re amused, you’re “tickled pink,” when you go out to have a good time, you “paint the town red,” and when you are sad, you are “feeling blue.” Neil Patel does a good job describing the psychology of color to increase website conversions.
Practically speaking, colors create brand recognition, develop order, and make certain elements stand out. The areas that use color are headings, text, links, and CTA buttons, to name a few. Unless you have a natural aptitude, selecting your color palette can feel overwhelming. These free tools make it easy: Coolors, Adobe Color CC, Image Color Picker, and Colorkuler.
The number one job of a font is readability. It seems simple, but a lot of sites get it wrong. Readability is based on two components, text presentation, and its context. Text presentation includes font, font size, color, spacing, and contrast. Context is the actual words or sentences that are written on the page. Here’s what you need to know about the presentation:
- don’t use more than three different fonts
- make sure font families complement each other
- consider web-safe fonts
- limit line length to 30-40 characters per line for mobile readability
- use good color contrast between text and background
Graphics enhance your website and make it visually appealing. More importantly, though, graphics help communicate ideas and should be relevant to your content. So, use images that speak for you and explain your product. Studies show that people remember 80% of what they see and only 20% of what they read. Did you know that images can also boost your SEO? As more people view your pictures, your ranking will improve.
Something else that can affect your SEO is your image size. If your image size is too large, it will take longer to load and slow down website performance. 47% of people expect a web page to load in 2 seconds or less. Here is more information on image sizing.
There are some great tools for creating graphics that offer a free component such as Canva, Adobe Spark, and Pablo. And of course, stock photo sites abound. Or better yet, take your own pictures for something purely unique! Whether you choose to create images, use stock photos, or your own, certain rules apply.
- Photographs should be uploaded as a JPEG
- Graphics are saved as PNG’s
Other Things To Consider
- Have a clear Call To Action (CTA) on your Home page such as sales, demo’s or interactive tools
- Include contact information
- Graphics are not just for the Home page but should be on the interior pages too
- Use testimonials
- Don’t forget your social media icons for Facebook, Instagram, and any other channel