Techniques for Strong Web Design

What makes a website successful? Unsuccessful? While I don’t think there are any rigid rules or exact guides that can be followed to create the perfect “successful” site, there are things that can be included and avoided to get the design started.

First, what makes a website successful?

Successful sites are usually designed well, are user-friendly, and easy to read and use. Files, whether it be a logo, photo, or other design element on the page, should be as small as possible to allow for pages to download quickly. All graphics should also have alternative text provided in the event they don’t load on the page, to keep the user informed.

In order to grab a reader, the important stuff (essentially the “about us” items) should be one of the first things written on the page and easy to find. Going off of this, the rest of the site should be broken up visually in a way that makes sense and has a definitive hierarchy, using design and visual elements. The amount of scrolling that a user has to do on a page should also be kept to a minimum. The content/copy of a page should be easy to read (short paragraphs, no blocks of text) and should be proofread; nothing makes a site look more unprofessional than typos.

It is also important for images and graphics, along with the text, to look professional. Anti-aliasing is your best friend when it comes to making text within graphics look smooth. This can also help with avoiding those pesky halos that can occur around transparent graphics. Make sure to take the time to clean up the edges of your graphics; it makes a site look much more polished.

Linked items are another aspect of a site that is often overlooked, but also deserves attention. Dress up those links, make them look nice. Make the user want to click on them, that’s what they’re there for!

Now it’s time for the fun part: what makes a website unsuccessful. It’s time for the web don’ts.

We’ll start with animations. Animations are loud, bright and distracting. Unless completely necessary, they should be avoided, and there’s usually never a reason to have more than one per page. Also, a site should always be completed before it’s uploaded (in other words, no “under construction” pages or links to dead pages). When setting type, it should be clean, attractive and easy to read. Don’t set type in all capital letters, more than a few words in italics, and don’t do it in all capital, bold AND italics. At that point, someone is trying to make the text hard to read on purpose.

Back to links again, don’t make graphics that look like buttons unless they’re actually buttons that link to something. Seriously. You don’t want the user to go and get excited about clicking that button, and then be sad when they find out it was all a lie. Also make sure to resize your graphics in an image editor rather than waiting to do it until coding the webpage; this helps reduce file sizes and increase loading speed, which is good! The content of the page, again, should be easy to read and have a defining hierarchy, so never center everything on the page, and make sure everything has the same alignment.

Next, color. Who doesn’t love color? But, too much color can be a bad thing. Don’t use to many colors. Crazy backgrounds and patterns are also a no-no. People need to be able to read all that nice, informative copy you worked so hard to write! Another tip for legibility: when designing type on a dark background, white isn’t always necessarily the go-to. Sometimes, the contrast is too high and makes the type illegible. Play around with tints of colors and see what works.

Now it’s time for some examples. First up are successful sites:

Audible: This site is aesthetically attractive, it’s nice and clean. The site is well set-up and navigation is easy.

RetailMeNot: Everything is well laid-out and clean. There’s a clear hierarchy, it’s nice to look at, and easy to navigate.

And now, the unsuccessful sites:

This website is full of irony. It’s all about bad websites, yet it’s designed poorly. Navigation is confusing, graphics don’t load, and aesthetically it’s boring/unappealing.

And then, there’s this. I’m not even quite sure what it’s for…it’s busy, uses too many colors, images, fonts and other design elements. It just looks bad.