"What shall it profit a man if he gains the whole world but loses his soul?"
"What shall it profit a man if he gains the whole world but loses his soul?"
I've been a web designer most of my life and through the years I've taken notice of what counts in good design and what doesn't.
Now obviously good design is somewhat subjective and obviously a list of 10 things is hardly comprehensive. However, when it comes to conversions and getting more out of your designs there are certain testable, provable things you can do that help you get the most out of them. Here are a few things that I tend to focus on when designing.
People love color. Color can add many different feelings to a design. Color can be used to guide attention somewhere, color can be used to set a warm or cold mood and color can be used to organize. There are many uses of color (or the lack thereof) and it is one of the most important parts of any good design.
Also, people really like rainbows. They may not like rainbows directly, but they like the colors of the rainbow. People inherently like the completion that all the colors of the rainbow give. Categorizing sections on a website with different colors people like. Images with all colors working together give a sense of completion. Sticking to one or two colors is fine and has its uses, but using all colors in a way where they work together makes things feel complete.
In line with rainbows and color people like big, colorful images -- the bigger the image the better. Did the image above just give you a bit of joy? It probably did because people like nature and people like good photography. If you look at most sales sites these days you will find that almost all of them make use of big images. Almost every site has a large background or slideshow above the fold. This just makes the site feel right and it makes people feel at home.
People also like pictures that connect to them emotionally. Using people, pets, nature and things of this nature in your images really make people happy. Pictures like this move people emotionally:
Another thing that is quite obvious is pictures of attractive women work very well for both males and most women. Women are great in advertising because:
1. Guys like them
2. Girls like them
3. People trust them more than men
Nobody is really going to object to an image like this. There is also a lot more going on than meets the eye. Guys like that its an attractive woman in a bikini. Women picture themselves in that position looking like this. The image is shot in a scenic beach area which people are naturally pulled to for peace. You kill two birds with one stone with this image: people and nature. Because this is at a beach it is acceptable for the woman to be in a bikini and therefore it isn't overbearing or with bad taste. If this same woman had this same clothing and pose with a different background it would come across way less conservative as it does with the beach. This is the type of photo that could work well in a number of circumstances. Throw a headline to the top right of the image with a buy now button and you're set.
Often times there doesn't need to be a reason for a good image. You can just throw one in for good measure and people will not only handle it, but be thankful for it.
If they didn't invent it, Apple has pretty much mastered this. Most people don't want to work and they especially don't want to read. Don't make them read. Give them one sentence or if not that then just a few words. That's all people got time for. Give them the just of it in one breath.
Here is another great example:
Sure, there is a time and place to be wordy. It usually isn't near good design. People want the cliff notes when it comes to design. Design isn't an essay, it's a design. Good design is good communication. Communicate with as little as possible and just give people the basics. If they want more info they will look for more info. People should never realize that they are reading. It should all flow seamless.
People like icons for a number of reasons: they're colorful, like a logo they tell a story with no words, it stands out and draws attention and overall it's something different than text that breaks up the page. Icons can be as simple as a piece of color or it can be as complex as a small image. Generally you're best off with a simple vector image that portrays what it is you're trying to convey.
Something like that does the trick. Nice and simple, icons make sense, breaks up the page, cool deal. That's a good use of icons.
How would we ever get through the day without all these icons on Facebook?
Good contrast is key. Contrast is a way of defining things, without any contrast everything just blends together. You read black text on a white background because of contrast. If the background is a dark grey and the text is black there is very little contrast and the message is less clear.
Contrast obviously doesn't end with typography. Different elements of the page should be structured with different levels of contrast. Things that are really important like call to actions should be the most contrasted things.
If you want somebody to call a phone number or fill out a form that should be the thing that stands out the most. Other parts on the page can blend and work together, but your number of form should jump out to them, while still looking good. It's easy to make things stand out and look bad. It's harder to make things stand out and still fit together well.
Use a simple typeface. Use bold for stuff that's important. Grey stuff out that is less important. Make links stand out. Make more important stuff bigger. Make less important stuff smaller. These are all pretty good guidelines when it comes to typography.
As far as typefaces to use, stuff like Arial and Verdana are good baseline fonts to use as a foundation. You can experiment a bit more with big text that is used in header, but be careful about taking it too far.
Try not to use a whole lot of different fonts per design. Too many fonts can get confusing and bring down the quality fast. The above example actually uses a lot of different typefaces and is fairly busy but they are able to pull it off through good contrast and sizing.
There's also no shame in something simple and easy to read like this.
Lines and boxes can make a big difference. Adding a line above something can be enough to separate it and distinguish it as its own. Putting a box around something can emphasize it and make it stand out. Lines and boxes are your friend when it comes to good design.
Naturally lines and boxes stack together very well. Lines and boxes fit within monitors very well because monitors are rectangular in shape. Circles and other shapes have their places as well, however, lines and boxes lend themselves to much more uses when it comes to web design.
Every website is pretty much a rectangle. Most content is read in a box. Most websites are structured and broken up by many boxes and many lines. A box is simply 4 lines. The more you learn to work with lines and boxes the more your sites will develop a level of organization and balance that is hard to deny.
Textures and patterns can make a big difference on a design. Rather than a boring solid color adding a little bit of texture to that color can really make it look good. Apple does this a lot with their designs. Rather than just using a solid color or something plain you can add a bit of realism to it.
A big part of good design is how effectively you can organize and tell your story. As the designer you should know what you want to portray beforehand and you should have a coherent way of doing so. You want to tell your story in order and you want to hold their attention the whole way.
Everything on your design should be working together. There should be a reason behind everything and an overall theme that is being portrayed. All the different elements should be working together to reenforce this theme.
You also want to maintain balance in your design. Most parts of the page should be in use. If you are not using a part of the page there should be a reason for it. White space can be great when there is a reason for it, but without a reason it's just a mistake.
Many aspects of balance and continuity carry over from good photography. If a person is looking to the right they should probably be placed on the left side of the page. If there is no room for text in a certain area you probably shouldn't force it. Try to make everything flow and fit together. Rework it until it's right.
Keep is simple stupid. The more design decisions you make the further you are moving away from singularity. The closer to singularity that you stay the less chance you have of making a mistake. Writing one word in the center of a page has very little room for error in it. Having 10 different headlines, 20 images and 5 icons has a lot more room for error. You're going to need to really be careful when you are dealing with more design decisions.
If you're unsure of something it's probably a bad idea. If you're not sure where something fits in it probably doesn't. If you are adding stuff to make it look more professional you're making a mistake. Everything should fit together and be simplified. A quote by Einstein is most fitting:
Filed under: Internet / Tech, Design, Photos, Top 10
Make everything as simple as possible, but not simpler.