5 fundamentals every web designer needs to understand

We all know intuitively what makes a website look bad: overused bevel effects, corny clip art, overcrowded layouts. These annoyances are easily corrected by developing with design fundamentals in mind — the same principles used by professional designers and artists alike.

Great websites bring together form and function. In fact, well-designed websites are seen as more credible, according to a Stanford study and are actually easier to use (as studied by researcher Don Norman). So here are five fundamentals to help you keep quality design at the forefront of your practice.

1) Follow the rules…mostly

In design school, they’ll give you a list of principles to abide by that assign rules to beauty — elements like layout, order and symmetry. But as you advance, you’re then told to break the rules a bit to create places for a viewer’s eyes to look by employing elements like variety, tension or contrast.

Here’s an example of a page I did in Edge Reflow CC. Can you spot the different design elements being employed, then played with?

2) Use imagery and icons to communicate when possible

There are some universal icons that people are trained to respond to. The magnifying glass (search), the house (home page) and floppy disk (save) are ingrained into your users already. Take advantage of those visual shortcuts; all those road signs should be immediately recognizable to you.

3) Color as a design element, not as decoration

Color makes all the difference, especially as our screens get better on our phones and tablets. It’s a facet of design that can be a really key part of the story your website wants to tell. Just use color to support content, not decorate a page. And often if you’re using a photo, the colors in the design should be sampled from the photos used so your design has a nice unified feel.

I quite like pulling color examples with color swatches – and the Adobe Kuler Web app is a great way to play with different themes and then import them into your design tools. One of the best rules to go with is to use complimentary colors. Which is basically using warm colors and cool colors together to provide balance.

4) Choose fonts that support content

There are literally thousands of fonts to choose from.

It’s up to you to mix and match – but remember that it’s best practice to use only up to three fonts at a time — a nice headline font, one for the main body of text, then one for any sort of call-out you might need. Often, that means using a sans-serif for the body copy, and for headlines you can get more interesting with either serif or sans-serif.

5) Help from others

All right, you’ve got your basic design elements, with pretty icons and pictures, with a sound color scheme and fun fonts. What’s next?

Getting help from others, of course! And not just random people on the street, but constructive critique from people who really know their stuff, like other designers/​developers. This can be instrumental to go from an OK website to one that really pops. If you’ve never used Behance to post a work-in-progess, I recommend giving it a try. The active community will do more than just tell you ​“to make the logo bigger” – but give you advice that can make the difference between a good website and a great one.

To dive deeper into how to apply design elements to web development, check out my presentation from SXSW: