How well does your website represent your business? When a new visitor arrives on your virtual doorstep, are they impressed with what they see (or at least greeted with feelings of trust and authority, like they’ve “come to the right place?”).
Having a great business with a poorly designed site is like driving a new Maserati with the body of a Ford Pinto. Not good (but you’d likely clean up in drag races).
Bad web design can not only ruin your image and brand but dramatically affect your traffic and conversion rates. Just think of all the hard work you and passion you put behind your business and products. The time spent getting your target audience to your site (hours and hours of writing good content, research, video, etc.) just to have them leave the second they hit your homepage. This is bad news and something that can easily be avoided. Good web design is just as important as everything else you’re doing and should be well thought out.
What is good web design you ask? Well, think of Apple. Their designs are sexy, eye catching, streamline and effective. Their sites are light and easy on the eyes. Apple uses a good sense of hierarchy in fonts, easy to use navigation, great use of white space, alignment, etc.
Effective design is your chance to have a memorable first impression. It’s your opportunity to keep your audience on your site and revisiting it in the future.
Want the Maserati? Well, then pay close attention. Here are 6 design tips that must be followed from copyblogger.com:
1. Think about your guests
Delicious design starts with an understanding of who you’re cooking it up for.
Knowing your target market and what they’ll respond to is crucial if you want to pick typefaces, colors and images that will resonate with them.
What do you need to know about them?
Ideally, you have a grasp of their age group, predominant gender and education level.
Bonus points if you are aware of psychographic details like what motivates them, what their beliefs are, and what other companies they’re attracted to and buying from.
And just like you’d want to know about food allergies before you prepared a meal, it’s important to be aware of what your target market finds unpleasant or repulsive so you can avoid it on your pages.
2. Speak their language with typography
Custom typography allows you to break out of the Helvetica-Times Roman-Georgia-Verdana fonts our sites marched in lockstep to just a few years ago.
You can express your brand or your blog’s personality through your typefaces’ personalities.
Serif typefaces — the ones with little “feet” — are classic and traditional.
Sans-serif typefaces — those with streamlined letters — are contemporary and modern.
There are exceptions within these major categories, so trust your eyes to tell you what your typeface choices are saying.
It’s easy to use custom typefaces on our blogs now. There are several good commercial offerings that will “serve up” unique fonts to your site. The Google Font API will even do it for free.
It’s an extra step, but will make your content stand out, and give your words personality.
3. Use colors that make sense to your market
If you’ve carefully researched your target market as outlined in step one, you may already have an idea of what colors will work for them.
To start, I recommend you choose two main colors to represent your brand.
For you, two colors are simplest to work with — you’ll have a short list to choose from every time you need to make a color choice.
For your audience, two predominant colors will make it easier to recognize and remember your brand.
How can you pick just two colors from the millions available?
Start by looking at the consumer goods your target market already buys. What colors already appeal to them?
You don’t need to walk around your local shopping mall with a swatch book, but keep your eyes open to color combinations that sell to your particular market. Take inspiration from what’s already working.
4. Tell your story with enticing images
I’ll be the first to admit it: finding a good image to work with your posts is a huge pain.
It adds to the time it takes to finish your piece, and — because you typically look for an image after you’ve finished writing — it feels like just One More Thing To Do.
As wonderful as your carefully-crafted words may be, they’ll sit there limp and lonely on the page if you don’t pair them up with a compelling image.
A great image is like the cover of a dinner party invitation.
It gives people an easy “in” to start engaging with your writing. Images are processed quickly, and if you’ve picked one that’s attractive and creates just a little bit of curiosity, it will draw readers into your headline and the first paragraph of your post.
5. Order your information hierarchically
Visual hierarchy helps your visitor navigate through your page and absorb your information in the order you prefer.
Sounds confusing, doesn’t it? Here’s how to make it work …
Look at the information on any given page of your blog. What do you want your site visitors to notice first? It’s probably your site name.
Then what do you want them to see? It might be your headline, or the image you’ve used with your first post.
Once they’ve taken in the name of your site and you’ve drawn them into your content, then where do you want them to look?
Visual hierarchy directs the viewer’s eyes through your information by giving it an order of importance by where it’s positioned, how bold or bright it is, and how much white space it has around it.
The most important information? Make it larger, bolder, and brighter. Give it some breathing room, too: white space draws eyeballs.
The next-most-important information? Make it a bit smaller, less bold, and not as bright.
As you move down the ladder of visual hierarchy, remember: the less important the information, the less visual “weight” it should carry.
6. Keep it together with a style guide
OK, you’ve used color, typography, gorgeous images and visual hierarchy to create lickable, luscious pages.
Keep up the good work!
Maintain consistency with a simple style guide. It doesn’t have to be a complex 20-page document.
- Open any word processor, and note your official colors
- Log your typefaces, and which font you use where
- List the file name for your official logo or header artwork, and where it can be found
- Note any resources for photography so you know where to find more of a style you’ve used in the past
- Continue to add to this document as you make design decisions about your site