San Diego SEO + Digital Marketing
Call Us: +1 617 792 3502

The 5 Commandments of Web Design (anyone with a website should know)

What is Great Web Design? | Photo by Debs (Creative Commons)

Most of us have created our own website for our small business or hobby without any formal design school training. Web design is one of the only classifications of design where we routinely cut out the professional and opt to do it ourselves. We wouldn’t be our own architect, interior designer or product designer if we didn’t have the skills to do the job, right? Unlike in architecture, if we screw up a website we don’t have to worry about the whole ceiling falling down on our heads. That’s not to say that damage can’t be done. A poorly designed website can cause your visitors to question your professionalism and experience. It can make navigation difficult. It can leave a bad first impression and it can cause you to actually lose business and credibility.

I can’t teach you how to make a beautiful website in one blog post, but I can teach you some tricks I learned in design school that have carried me though my career as a professional designer these last 15 years. If you are a professional design, you’ll recognize these. They are the 5 Commandments of Web Design and they can be used  by even novice web designers to make smart decisions about the look and feel of any website.

Rule No. 1 – There are No Arbitrary Design Decisions.

I still use this statement in my design work on almost a weekly basis. Professional designers do not make arbitrary decisions… ever. Every decision is based on research or to support a concept or theme. When you begin to conceive of your website ask yourself, “who am I creating the site for?” Then ask, “what would these people want to see in a site like mine?” If you are creating a site for your photography business, for example, you know that your site visitors are, above all things, going to want to see your photos. Right off the bat you know that your photos should be front and center. You’ll have to decide what the background color of your site will be. You may select black because it makes your photos pop. You may want to go neutral so as not take away from any of your images. You may choose white if your research tells you that clients trust sites with a white background above other colors. Any of these decisions are valid options because they are based on a motive. Choosing a green background  because it’s your favorite color is not a reason. In design school, professors constantly question the motivation of their students decisions. Like a three year old child they will ask, “why…why…why…why.” so many times that eventually some student will crack and admit they didn’t have a reason for something. I’m pretty sure professors love this moment of weakness because they can use the folly to teach the entire class (through public humiliation) about Rule No. 1 – There are no arbitrary design decisions… (and maybe because they are a little sadistic.)

Keep an eye out for these common web design decisions that might be arbitrary:

  1. Background color
  2. Font selections
  3. Button graphics
  4. Highlighted text. Use of bold or colored text.
  5. Wording of page titles (should be researched based)
  6. Inclusion of widgets, polls, date stamps or stat counters
  7. Priority of navigation bar elements
  8. Use of indentations, bullets, columns, and other page attributes

Rule No. 2 – Because “I Like it” is Not a Reason.

Your Font Says A Lot About You | Image by FontShop (Creative Commons)

This is a subset to  Rule No. 1. The majority, but not all, of arbitrary design decisions are based on personal preference. I’ve even been guilty of it from time to time. I’ve never really liked the color teal. I love blue and I love green, but when you put them together it just seems, “meh” to me. Sometimes my fellow designers will assemble color pallet for a design project we’re working on that features teal. My first instinct is that I don’t like it. I have to stop and ask myself, “is this color not appropriate for the project or is this just my personal preference coming into play?” My coworkers are amazingly talented and have a great eye for color. Typically, the issue here is personal and the color is actually completely appropriate for the project. Most of the time, the decision is to add something or “enhance” something with your own personal style. I see this rookie mistake all the time. Here’s an example, let’s say you are creating a website for your neighborhood’s Co-ed Kickball Club. Pink is your favorite color so you decide to go with that as the accent color on your website. What you didn’t think about is that the pink site is making the guys feel the club isn’t really for them and they move on to join another club competing for your members.

Rule No. 3 – Less is More.

When You Can't Decide. Go Helvetica. | Photo by J. Kleyn (Creative Commons)

We have Mies van der Rohe to thank for this little jewel of modernist philosophy. What designer hasn’t used this adage at some point in their career? You’ve spent hours trying to pick out the perfect fancy script font. Some are too loopy, some impossible to read, some don’t quite connect the “s” to the “t” just right. So what do you do? You know what… You abandon it all and go back to Helvetica. Why? Because sometimes less really is more. Nothing quite ruins a website like unnecessary clutter, inconsistent page styling, or competing graphics. If you’re not sure, simplify it. The more complicated it is, the easier it is to screw it up.

Rule No. 4 – Show Only Your Best Work.

This is the cardinal rule of design portfolios. Our heart tells us to show everything we have worked so hard to produce. Whether it’s our art, writing, music, or photography, we want to show it all. Design professionals will tell you this is a mistake. You can’t take back a first impression, so make sure you are only putting your best work out there. If you are a writer, you don’t need to publish your personal journal. If you’re a photographer, leave Grandma’s 85th birthday photos on your private Flickr page (unless they are absolutely stunning.) Not all websites are creative in nature. Even if yours is about how to bake a cake, fix a carburetor, do your own taxes, or floss properly always put your best foot forward. This means you are checking your writing for spelling and grammar mistakes, providing working hyperlinks, and never-ever posting out of focus or pixilated images.

Rule No. 5 – Work Smarter, Not Harder.

This rule isn’t one that they teach you in design school. It’s usually not even one they teach you on the job. Working smarter, not harder comes only when you’ve hit a wall. When you realize that putting in long hours for little gain may not be worth your time. How does this apply to web design? Let me tell you. There is little reason for someone who needs a website for their small business or niche website to learn how to build one from scratch. If you are interested in it, by all means, give it a shot. It certainly doesn’t hurt. BUT… if all you need is a website to represent yourself or your business, then I encourage you to take advantage of the cheap (sometimes even free) website templates available. For somewhere between $20 and $80 you can buy and install a gorgeous website template all by yourself. A web template that is set up to optimize your site for SEO from the get-go and that is more technologically sophisticated than anyone new to HTML will ever be able to develop for themselves. My favorite places to buy website templates are  ThemeForest and Template Monster. Nearly all of them are customizable to some degree so you can add your own logo and choose page layouts that suit your purpose. Many even allow you to change the colors, look, and feel of the site without any knowledge of HTML or CSS. What makes them cheap is that the web designer is selling multiple copies as a template instead of a fully custom website made just for one client. Yes this means that someone else may have the same site template as you, but once you add your own logo, name, and color scheme, it’ll have a personality all of its own.

Know When to Walk Away... No When to Run | Photo by Andy Mangold (Creative Commons)

The same goes for graphics and branding. You’ve heard the saying, “do your best, farm out the rest”? If graphic design and branding is not your forte, hire someone who can help you. Yes, graphic designers do cost money, but doing a mediocre job designing your logo or web graphics can actually hurt your business. If you’re not quite ready to invest in a designer, you can also buy inexpensive vector art through sites like Fotolia, where you can purchase the graphics and the right to reproduce them for less than $10 (in most cases). For even less money, you can purchase the high resolution jpeg files to use on your site without requiring the photo rights and attribution requirements of some of the free sites like Flickr. Of course, if free images are the only images you can afford, Flickr is your friend. Just be sure to carefully understand the Creative Commons requirements that go along with each photo and keep a copy of all email correspondence you have with the photographers.

Websites, by their very nature, are an artistic media. They are a blank canvas where we compile code to create a collage of text, graphics, photos and animation. Even if you’re not a trained designer, you can think like one by using these design school guidelines.

Got your own rules for good website design? Share them in the comments.

2 Comments
  1. Rule No. 6 Test Everything
    .. because sometimes it doesn’t matter how gorgeous your design is, it just doesn’t get the desired response out of your visitors.
    I’d argue that on rule no. 1 sometimes decisions feel arbitary.. it just feels right, but you can’t explain why exactly. Yes, if you think hard enough, it is likely to be that the colour offsets the text, etc etc, but does it really matter as long as it feels right?

    • You’re so right Katie. Test Everything is part of “Pay Attention To Detail,” which should be one of the Commandments of Design! Thanks for stopping by to leave a comment. Love your blog articles.

Leave a Reply

Organic SEO

Social Media Marketing (SMM)

Pay Per Click Management (PPCM)