It might seem contradictory, but creative entrepreneurs often have a lot of trouble building their websites. This is because website design is not strictly a creative endeavor. There are creative elements, but websites are a different beast than other creative products.
For one thing, they’re digital. That means things like color and visual elements behave differently. For another, they’re changeable. A (good) website is going to look a little different depending on the device on which it’s being viewed. You have to plan for those alterations as you’re building; otherwise, the website is going to be wonky.
“Wonky” is a technical web design term, by the way.
C.R.A.P.
CRAP is the acronym for the four basic tenets of good design. If you’re designing your own website (which can be a stressful prospect), keep the following in mind.
Contrast
Make sure the different elements on your website look different from one another. You don’t want your website visitors confusing your header content with your main content with your ads with your whatever. If elements are too visually similar, nothing will attract your visitors’ eyes.
Repetition
There’s a reason why each page on a website doesn’t have different design elements. Using the same fonts, colors, line weights, etc., throughout your website makes for good website organization and unifies the whole thing. This makes your site more professional, and it keeps visitors from getting confused. If each web page is designed differently, how do you know that you’re on the same site?
Alignment
Don’t throw elements on your site willy-nilly. If you’re going to center-align text, make sure you have a good reason for doing it. Random alignments and placements will make your site visually confusing and amateurish.
Proximity
Keep related elements grouped together. Related elements become a single visual entity to the visitor’s eye. It makes it easier for visitors to find what they’re looking for, and keeps your site uncluttered.
Color Theory
You know the color wheel. Primary colors. Complementary colors. Analogous colors, and so forth and so on. Color behaves differently on the screen than it does on paper. On paper, white is the absence of color, while black is the presence of all the colors. On screens, because colors are rendered in light, the opposite is true.
Certain colors just don’t work on screen. Reds, yellows, oranges — large amounts of these colors can create an effect not unlike a vibration. Looking at them on screen creates the illusion that elements on the screen are moving or vibrating, making it hard to read. The same is true when pairing complementary colors like blue and orange. The contrast between the two is so strong, the colors fight with each other on screen. It is possible to use these colors on your website, but do so sparingly, where you want to draw attention.Using a light color on top of a dark color works well in painting because it pops. The same cannot be said for websites. While a dated practice, you can still find websites that use white text on a black background. For the love of all that is holy, this needs to STOP. It is incredibly hard to read, especially on smaller screens. This is another design tactic that can work, if used with a light touch.
Placement
In Western countries, we read from left to right, so that’s what I’m basing the following on. When you develop a website, keep the letter Z in mind. Because we read from left to right, our eyes naturally progress from the upper left to the upper right down and across to the bottom left and then the bottom right. Use these particular points as visual anchors to keep viewers’ eyes moving around the screen. For example, if you have something super important that must be seen, put it in the upper left corner, just like the pinnable title card on this post.
Hierarchy
There is a term that holds over from the hey-day of newspaper publishing: “above the fold.” Big stories were put at the top of the page, above where the newspaper folded in half, so that it would be the first thing seen by readers. For websites, content being “above the fold” usually refers to the content a visitor sees before he is required to scroll.
Of course, with the advances in technology leading to websites being viewed on multiple types of devices, this has become arbitrary. Depending on the device, the “fold” could be almost anywhere on the page. The takeaway? Important stuff goes at the top. The most vital information, the most pressing images, they should be the first thing your visitors see.
Function over Form
The important consideration on most creations? How it looks. And even though I hate poorly designed (read: ugly) websites, the design is not the most important element of a site.
When you’re a creative professional, it’s easy to get caught up in how something looks. We get attached to a certain visual element, and ignore how it affects the function of a website. Don’t fall into this trap. The number one consideration for your website should always be how it functions. Is it easy for visitors to use? Can they find the information they’re looking for? Does the site’s design confuse them? (Hint, it shouldn’t.)
A website can be beautiful and functional. Tune in a little to your left brain, and it’s totally doable!