How do graphic design and web design work together to create a user-friendly website?
What is the purpose of your website? Of any website? There are a number of answers to this question, among them to sell our product, to educate on certain topic, or to inspire action for a specific cause. But underlying all these goals is a much more basic purpose: to serve your visitors.
Your website has to work before it can do anything else. If your definition of a workable website is that it loads in your browser, then it’s time to take a more holistic view. If your visitors leave as soon as they set eyes on your home page, then there’s something much deeper that isn’t working about your website. Diagnosing the issue is a complicated business, but one obvious place to start is the graphic design of your website. Let’s take a quick look at some design elements that can help a hinder a website from doing its job. Does your website do any of these?
1. White Space.
Crowded websites made information difficult to find and cause fatigue to the user. The more closely-packed your content is, the harder you users have to work to find areas which are relevant to them. As an example, how have you used the sidebars on your page? Do you fill them with content just to use up the space? Do you even need them?
Web pages are not print. You don’t have the same space limitations, so there’s no need to crush as much information onto a page as possible. In fact, doing so will do you a disservice. Give your content room to breathe, and use your white space to direct attention toward the most important aspects of your site.
2. Typography.
Font choice plays strongly into the readability of a website. Sans serif fonts are generally considered more readable for body text, although there are plenty of counter examples. For instance, the New York Times and The Onion use serif fonts in both headlines and body copy, whereas The Washington Post uses serif in headlines but sans serif in body copy.
No matter what font you use, pay attention to how the spacing of letters, words, and paragraphs readability. Leading and kerning (the space between lines and the space between letters, respectively) play a huge role in ensuring your visitors can read your content. Words or letters spaced too closely to each other bleed together, whereas letters spaced too far apart make it harder to tell when one word ends and another begins.
Don’t forget about space between paragraphs or other design elements, such as pictures or side navigation. When words are too crammed together on a page, they become difficult to read. The strain can easily drive visitors away as they try to decipher the text on screen.
3. Color.
As anyone who’s ever picked out paint colors for their home knows, color has a significant psychological impact on the way a space feels, and a little goes a long way. A superabundance of bright colors on your website can be just as hard on the eyes as dense text. While most companies have specific brand colors, it’s not necessary for these to be the primary colors on your website. In fact, they make more of an impact if used as bright accent colors.
Instead, a palate of neutral colors can give your eyes a break and make the brand colors stand out more. This doesn’t mean your neutrals have to be bland—a subtle warm or cool undertone can do a lot to change the feel of a website. And of course black and white can span the spectrum from tasteful to edgy. However you use your color palette, take a critical look at whether your color choices are visually overwhelming or have an adverse effect on readability.
4. Navigation.
There seems to be two extremes with navigation: either there are too many navigation items crowding the navigation bar, or the navigation has been hidden and is hard to find. Good graphic design strikes a happy medium: your visitors need to be able to find the rest of your site, but they shouldn’t be overwhelmed by top-level navigation with a dozen items or more, and three or four tiers of sub-navigation. If you find yourself with this problem, it’s time to re-think how you’re presenting your content.
Menu navigation isn’t the only aspect of navigation you need to pay attention to. For instance, how have you differentiated linked text from the rest of your text? Does it have a different font weight or color? Does it change color once a user clicks it? If it’s underlined, do you use underlining elsewhere for non-link text? (If so, you’ll want to stop doing that.)
5. Content.
We already talked about how white space helps keep your content from appearing too cluttered. But there are other aspects to how your site presents content that effect user experience. For instance, do you use headers and subheads to break up your content and make it easier for readers to find their place in your article? What about images? Graphics? Pull quotes?
By incorporating these design elements into your copy, you help draw attention to important information. Images can support your content and help make it more memorable and engaging for your users. And graphics can give an extra point of reference, as well as supporting and validating your ideas.
Graphic design, just like web design, puts users first.
We’ve talked a lot about usability, and most of that has had to do with the functionality of a website rather than its design. But graphic design has a huge impact on usability, and it’s important to pay attention to this so that your visitors have the best possible experience of your website. Your website needs to be usable before it can be anything else. How does your website measure up?
Need help building a usable website? That’s our specialty. Contact us today to get started.