0

Fundamentals of Web Design


dreamstime_s_61833423Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. In fact, there are large parts of the page they don’t even look at.

Most users search for something interesting (or useful) and clickable; as soon as some promising candidates are found, users click. If the new page doesn’t meet users’ expectations, the Back button is clicked and the search process is continued.

 

  • Users appreciate quality and credibility

If a page provides users with high-quality content, they are willing to compromise the content with advertisements and the design of the site. This is the reason why not-that-well-designed websites with high-quality content gain a lot of traffic over years.

Content is more important than the design which supports it.

 

  • Users don’t read, they scan

Analyzing a web page, users search for some fixed points or anchors which would guide them through the content of the page.

 

  1. Set the rules

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 eye 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?

 

  1. Images and Icons

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.

 

  1. Use color as a design element

Color makes all the difference, especially as our screens gets 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.

 

  1. Use 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.

 

  1. Get help from the 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-progress, 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.