When visiting a website you may be thinking, “Man this website looks terrible, and is really hard to use!” Or you may be thinking “Wow, this website looks great, and I found everything I needed.”

What is the difference between the design of a really amazing website and one that looks ugly and uninviting? This article outlines some design elements and principles that will transform your design from okay to extraordinary.

White Space / Good Organization

A very important foundation of  good web layouts is the use of organization and whitespace. Your design should not be haphazardly thrown together without any purpose. Every element placed on the page must have a reason for being exactly where it is. Whitespace is an important part of this organization.

A website that is lacking whitespace in its design will standout – in a bad way, like a sore thumb! Use whitespace correctly, and your design will instantly feel more professional.

Numbers/Data turned to Illustrations (infographics)

One thing that can turn a website from being slightly helpful to absolutely compelling is the use of Infographics.

Infographic: An impactful representation of facts and/or information with colors and creative illustrations.

A great infographic will quickly present your users with the info they need in a way that is easy to understand, and actually meaningful and worthwhile. Notice how this infographic gives meaning to otherwise abstract statistics.

Large Typography

One thing that many great websites have in common is their use of large font sizes. The use of large text on your websites will help you as a designer narrow down what the perfect wording is. Since your words are bigger, you have less room for extra “verbage” that your readers don’t want anyways.

Another helpful thing about large fonts is they allow you to quickly scan pages to get the main message of the article or website. Here are some websites that use large fonts:

Super Eight Studio

Mixd

Playground Inc

Contrast between Elements (Color Differences)

When designing a website, one of the most important principles of great design is choosing a color scheme that accurately portrays the mood of the company/individual. Not only do your color choices need to portray this mood, but they also need to provide contrast between different elements in your design.

You don’t need to go crazy with colors to accomplish contrast. Crafting Type does a great job of accomplishing this and they only use two main colors in their design!

Crafting Type

Directional Arrows to Guide Readers

Sometimes simple arrows and color changes can make navigation through your website easier to follow. Especially when talking about a progression of things that happened, you need to give your users visual cues of what is going on. Fantasy Interactive does a great job of using arrows to guide you through this case study of one of their projects.

Fantasy Interactive

Simple but Compelling images

Images are very powerful – they have power to cause action, change moods, and create feelings.

Questions: Are you using images on your website to clearly get your point across? If not, how can you change this?

Again, this is not something to go crazy on. Sometimes the simplest images are the most powerful.

This picture of golfer Rory Mcilroy says it all in 4 simple words:

Rory Mcilroy

The pictures of this ranch in Utah really help users feel connected with their farm.

Tifie Ranch

Large User Friendly Buttons / Naviagation

With the advent of touch screens, it has become necessary to make navigation buttons larger to accommodate the fingers of website users. Make sure that people can easily navigate through your site without clicking on things they weren’t meaning to.

Anthony of UX Movement has written a great post on Smashing Magazine about this topic. I think this button is big enough!

Creative Icons

When navigating a website, simple icons that explain things can really be a help to your users. As designers we instantly recognize the little “Ps” icon among our programs as Photoshop. When browsing the web, the little blue bird instantly informs us that we can tweet about the page we are viewing.

Use icons in your design to inform your users what action they are performing with visual cues.

Wikipedia Redefined

Gravity On Mars

Hoverable Items

There is something about simple interactions that makes us feel more connected and involved. It may be a simple hover in a navigation element, or maybe a creative animation between photos in your portfolio. Whatever the case, make sure the animation is simple, fast, and user friendly.

Don’t animate just to animate. Add value to your page with your animations.

I know we’ve all visited sites where the “creative animation” actually took away from the page rather than added to it.  One such website I visited recently was annoying to me as a visitor. The animation of changing between pages was slowing me from getting the information I wanted.

Conclusion:

Remember to actually learn and understand the principles behind these great design elements/principles.

Don’t just start plugging-in huge buttons and large fonts into your website and expect to be featured on the front of a website gallery. Everything you use, whether colors, icons or fonts must have a purpose.

Challenge: Get out there and create a purposeful, beautiful, user friendly website this week! It doesn’t matter if it’s just a mockup, creating mockups will help refine and develop your designer skills.