7 mistakes developers make

Great websites always seem to combine great design with great code. Since building a website is a pretty simple task you find many people learn HTML and CSS and figure that if they can learn that then they can design any website they want. While technically they can you will often find that there are some key mistakes they make because they don’t wish to take the time to actually learn about design.

Programmers are designers in their own right, but they design code and wonderfully architected systems. To design something visual is completely different and just because you have a good eye for design doesn’t mean you have a good mind to apply it.

Since so many programmers have personal projects that usually means they have to create their own websites. If you are a freelance coder, one of the greatest assets you can have is knowing the full web development process from beginning to end, and this includes design.

Here are eight mistakes that I often see developers make when applying design to a website.

 

1. I know what good design looks like

It can be difficult to separate an eye for design with the ability to design. It is very similar to the people that can look at fashion and tell you what looks good, but can’t really dress the same way themselves.

Great designers simply know what good design is. They know what will work and what won’t work many times before they even pick up a pencil or open Photoshop. Often this is the case because they have spent years pouring over different designs and trying out designs themselves. Just like no artist can pick up a pencil and draw something great the very first time, no developer should believe they can knock their first design right out of the park.

Similar to the way a programmer might study the code of another person, anyone can study a design and begin to gain an understanding of why it works.

Taking a look at the beautiful Punchfork you can see what makes the design so great.

  • A great use of images. Images are always helpful in spicing up a design, but too many times designers can get carried away with them. The images used on Punchfork are helpful to getting the message across.
  • A solid grid. The great use of a grid layout helps the eye get into a flow.
  • Simple typography. There are fonts that should be used on the web and there are fonts that should be used very, very sparingly on the web (Papyrus, Comic Sans, etc.). There is nothing wrong with sticking with Georgia and Helvetica for a design because they work when done right.

There are many more parts of the design that make it so wonderful. When you come across a design you like take the time to study the individual elements, but also acknowledge how they fit into the whole. One great element of a design doesn’t make the whole design great.

 

2. Color selection

Color selection can be a pain. I hate having to pick colors because there are so many to choose from. For some reason most developers tend to stick to a blue and white palette. Maybe because it is used everywhere or those are the browser defaults, but great design can involve a range of colors. Fortunately for us color-challenged folks there are a ton of tools out there that can help us put together some wonderful color combinations.

COLOURlovers is a great community where people create their favorite color palettes and share them. You can browse, save and vote for your favorite palettes and colors. On more than one occasion I have turned to COLOURlovers to come through and save the day with color selection.

When picking a color palette be sure to stick with one that fits the mood of your site and its content. Don’t pick a palette simply because you love it. Orange and black might not be the best colors for a site around the concept of love for example.

Rarely will you need to use more than 3-4 different colors and if you decide to you need justify your choice.

 

3. Center it

It can be very tempting to center a headline. It looks great in newspapers, but rarely will it work well on the web unless everything is centered. We know that left-aligned text looks professional and works with the natural flow of the eyes so why go outsides the lines?

Centered text is best used for headlines and short lines of text. Users can read them with ease because the lines are short, scannable, and don’t need repeated eye movements. Centered text can also give your layout an aesthetic look with its symmetrical format. This works for text that goes with centered images. If your images are left- or right-aligned, you should left-align your text to keep it consistent with your layout.

Centered headlines work in newspapers because the text is broken up into columns so the headline flows over the whole story. If you are only dealing with one column of text you should stick to a left-aligned headline.

 

4. Font smorgasbord

When you aren’t immersed in the world of typography then Arial looks like Helvetica and Georgia resembles Times New Roman. You know that there are other fonts out there like Comic Sans, but you don’t see the importance of having to pay for a font when you can very easily use what is available to you.

With resources like Typekit though, font selection has become eerily similar to color selection. It can take days of research to find the right combination when you could’ve easily used a basic font and finished with the rest.

Don’t go overboard with fonts. Like colors a limited selection often works best. When it comes to fonts, one or two different fonts can be plenty to produce a beautiful design. Remember you can do a lot of different things with fonts. You can italicize them, bold them, underline them, uppercase them, or lowercase them.

 

5. Pack in the information

When you are a developer, the more information you can have on a page the better. When I code I like to do so on multiple screens because it allows me to have everything right in front of me. Unfortunately this doesn’t work in design. You shouldn’t cram as much information in a tight space as you see fit because then the design becomes dysfunctional.

The eye can only take in so much information at a time and if the purpose of most designs is to get a task completed, then hiding it inside of a million other pieces of information isn’t going to help.

While busy websites can be effective, more times than not they aren’t. White space should be your best friend. You need empty portions in your design to provide emphasis to the parts of the design that are important.

 

6. No questions asked

We all know that wonderful feeling of creating something and seeing it out in the real world. Because we created it, there tends to be a bias behind it that makes us think that it is better than it really is. You need to get the opinions of others to know if your design is effective and if it isn’t you can find ways to improve it. Instead, developers feel that they don’t need to ask the opinion of others because they know how their design works so it all makes sense to them.

You will also find that when people ask for an opinion about a design they aren’t asking for a critique, but approval. They want justification for the decisions they made and this isn’t the right approach. Asking questions really helps you find usability issues that you might not have been aware of before. Often you get so stuck in your own design that everything makes sense to you, but for a new person your design might be more complicated than a Rubiks Cube.

 

7. Details waste time

With great designs it can be hard to notice the small details that really make it. They might be so subtle that the casual observer looks past them and continues on. For a developer, the small details might be a waste of time because they don’t understand the overall impact a drop shadow can have on an element.

Small details by themselves only impact a specific element of a design, but when they all come together then you have a wonderful design that flows. Sites like Dribbble expose how great the small details can work in a larger design. However, if you aren’t a designer by trade, focusing too much on the details might slow down the process more than you would like. However, this doesn’t mean you shouldn’t be aware of how the details can impact a design.

 

What other common mistakes do developers make when it comes to design? Please share in the comments!

  • http://twitter.com/PauldeWouters PauldeWouters

    should be titled : 7 of many mistakes amateur designers make

  • http://twitter.com/webdesign80 Agustin Brown

    You have given great resource dude, however I feel apart from basic design also differs according to need, what you say? 

  • http://twitter.com/damonky Damonky Creative

    Overall these can be common problems but…

    Pointing out fault without suggesting routes to solve the problem is pointless and only serves the stereotype developers have of designers being elitist. 
    Anyone can point out problems. Very few can fix them. I dont mean that personally to you, just sick of reading articles where designers criticise developers, developers criticise designers. it’s boring.How about “Common areas of development that you can help to improve” as a title? Doesn’t that provide a better perspective?Also, point number 5 in particular, This is can also be caused by poor marketing wanting to fill all that lovely real estate to achieve maximum “marketing” potential.Not to say I didn’t enjoy the read, it has me interested enough to write this comment. However it isn’t 1998 and we should move away from stereotypes. If we don’t we continue to carry the stigmas associated and business perspective of us never will

  • http://pulse.yahoo.com/_GKUIHOJ66TO5GOLOLADRADQP7Q duncan

    “Great designers simply know what good design is. ”

    Wrong, great designers have been trained in applied aesthetics and modernist design theory, and have spent years putting that training into practice. By inferring that it’s some innate, indescribable quality which neither you or anyone else can put their finger on, you utterly de-value the skills and abilities of all graphic and digital designers.

  • http://www.absolutewebdesign.co.uk/ Ian Harte

    haha so true these are all spot on, mainly for customers using a self managed website though! I have seen some beauties. 

  • http://twitter.com/positonic James

    8. Reading this list.

    Only kidding.

    Seriously I’m a developer, but this is a broad realm and your wide paint brush will miss creative developers like me! :)

  • http://www.aromawebdesign.com Vancouver Web Design

    I absolutely agree with you. There is one more mistake that designers often do, is to believe that measurements of good designs is their vote and vote of their client, So if they agree that design is good it must be good, forgetting that website is not made for designers portfolio nor personally for the client, website is a marketing tool and it should appeal to website visitors. I am not saying that Designers and Clients opinion are not important, I am just saying that they should keep in mind that there is third vote that is on the end the most important one.

  • http://twitter.com/ReeceSayer Reece sayer

    It also says “Here are eight mistakes that I often see developers make when applying design to a website” before the jump that is –  Overall excellent article though, i often ask friends to look over my work and give me hints as i’m more of a developer than a designer but i’m always looking to improve. Not sure if you’re just born with an eye for design or if it can be developed i’ll let you know in a few years time!

  • http://www.crowdogs.com Peter Schreiner

    You talkin’ to me?!

  • Imranur Rahaman

    Woo… What a great post!!! Your every post is good but this is great. This post is careing post.

  • http://www.plumeriawebdesign.com/ Elke Hinze

    As a developer, who also does design, I can say that while I agree with some points of this article not all of it applies to every developer who designs.  On several occasions I was pulled off of coding to “make things look pretty” because there was no budget for a designer and no one else on the team could do it.

    Over time as I spent more time developing, and less time designing I found that I lost my design mojo which has made me very sad.  I’m slowly gaining it back, but design is truly a refined skill that needs much trial and error to do well.

  • http://en.lifepractice.de/ Dennis Hirschfeld

    Hi all
    Since I’m an amateur designer this post is perfect for me

    Thank you very much :)

  • Wim Van Nieuwenhoven

    So Punchfork nailed it .. Then why does the grid not scale if you make your browser window smaller? And why is there no mobile version of the site? (Yes, I know there’s an app.) Reading this post on a mobile device and clicking through to the Punchfork site gets you a slow (I mean very slow) loading site, loading 30 or so images each around 20KB big. Thanks for taking a byte (!) .. out of my mobile subscription.
    Other than that the advice given can be helpful for web projects.

    I just wonder why all those lists always have to come in amounts of 5, 7 or 10. Rare are the ones with 8 or 22.

  • Anonymous

    Thanks for the informative article. I  think you hit the nail on the head with this one. Thanks for the share!