BUILDING A WEBSITE: DESIGN

With planning, organization, and content, the foundation for a website is laid. The basic structure is in and ready, and now it’s time for one of my favorite parts of the process:  design.

Although the overall concept of design encompasses much more, for the purpose of this blog post, I’m going to use the term “design” to refer to the overall look and flow of the website. And when it comes to the overall look and flow of the website, my main goes is to make sure the visual look of the website consistently portrays the image the client is wanting to project. I also make sure to ask my clients what feelings or emotions they want web visitors to have when visiting their website, because design plays a huge part in this as well. A website can be fully planned out, organized down to the last detail, and have the best-written content in the world, but if the overall design is poor, the whole website will fall flat.

There are four key elements I utilize when designing a website: typography, space, image, and color. We will be discussing image more in depth in next week’s blog. Today I’m going to break down typography, space, and color.
Typography
Fonts and typefaces, serif and sans serif, display and script. Why are there so many buzz words when it comes to typography? To put it plainly, because typography matters. The way words and letters look on a screen can invoke emotion and motivate action. It can also frustrate or clarify. Choosing fonts is an important step in the process, because font sets the tone for how the text appears.

Sometimes my clients have definite opinions on a font they want to use, especially if their existing logo uses a certain font. Other times they’re more open. Regardless, I always ask myself the following questions when choosing fonts

  • Is it readable? Hands down and most importantly, a font must be readable. It may look really modern or edgy, but if website visitors can’t read it, it may as well be a foreign language. Some of the most readable fonts include Arial, Courier, and Verdana.
  • Is it relatable? Does the font go with the client’s image? If the client is going for a classic, solid feel, I’ll use a traditional font like Calibri, Times New Roman, or Georgia for the body of the text. If the client is looking to stand out or portray a more whimsical style, I may throw in a display or script font like Allura or Impact for special text or headings.

In the website example for this series, I’m building a website for a client who owns a manufacturing company. They wanting to portray dedication, precision, and integrity. It’s not hard to tell which of the fonts below are a better fit.

You don’t have to think too hard on that one, right?

When choosing a font, besides readability and relatability, consider the typefaces available within that font family. Is the font available in bold or italic? It’s nice to have those options to offset content text that’s extra important or carries heavier meaning. I also suggest using no more than two fonts throughout a website – one for body text, and another for headings and featured text. Below are two examples that show what a difference is made when typography is used carefully and effectively.

So much bold! So much all caps! Who else feels like this website is screaming at them?
Ahhhh, much better. Clean and readable, the main font is the perfect offset for the script logo. Script can be very effective when used in the right context, as it is here.

Space
Space, the final frontier . . . and when it comes to web design, each page needs some. Space is really the unsung, underappreciated element of design, but without it, a website will implode. Take another look at the two examples above. The first example is, shall we say, crowded. There are so many elements on this page, the eye doesn’t know what to look at first. Instead of looking like a cohesive unit, all the colors, text, and highlighted phrasing fights for attention. Sometimes what’s not on a web page is as important as what is, and the first example is the perfect case in point.

The second example shows an excellent use of space. The large, single image compliments the bold headline text, which drawing the eye directly to it. You can tell right away what the page is about – the Autumn Winter 2016/17 line of this brand. The navigation bar at the top right is streamlined and clear. Nicely done!

Many people fail to consider what a useful tool space is in their websites, assuming that blank space is wasted. It’s not true. Space is like a tour guide for the eye. When used to the web designers advantage, web visitors can find the information they want quickly and efficiently, which is always a win. Just remember, too much to see is just simply too much.

Color
Color is such a fun element and probably ranks even higher than typography at eliciting emotion from viewers. Color used well is like dynamite that sparks memory and knowledge retention in the brain. Color is one of the first things on a page to make a big impression, either good or bad.

If a client already has a logo or a color scheme, that’s where I start. More often than not, even if they don’t, they have an idea what colors they like and want to be associated with. The color chart above is a great starting point to show your client as you begin your discussion on color. I love searching the web for color schemes. You can see some great examples of website that use color well here.

When the color scheme is settled, I then think of ways I can incorporate the chosen colors into the website itself – page backgrounds, photo frames, header text, navigation bar, footers, featured blocks of text, a chart or graphic. Using color throughout the site helps help tie elements of the website together and promote the cohesive look your client is going for.

In the client example for this blog series, color first entered the discussion with their logo. My client is wants a completely new look for their website, beginning with their logo. Red and gray are the colors they’d like to use. Although the logo is still in the final stages of completion, the color palette looks like this:

Design Wrap Up
Typography, space and color are three of my favorite stages of designing a website and a chance for me get creative. Throughout the process, I continue to communicate with my clients every step of the way. Quick recap:

  • Typography – Stay readable. Stay relatable.
  • Space – The unsung hero of web design. Let space be the tour guide for the eye as you create.
  • Color – The number one element that sets the tone for the website’s feel. Used wisely, it sparks the brain’s capacity for memory and information retention.

Until next time friends!

Christa

Posted in
Scroll to Top