Skip to main content

7 mistakes developers make


7 MistakesGreat 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.

Paul Scrivens is the Product Designer at (mt) Media Temple. He also runs the Imagination Community, Drawar. He believes great design makes the world a better place and that we should all strive to improve the world around us. You can find him on Twitter @scrivs. He also likes cats.

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

5 Ecommerce WordPress Themes from Tokokoo – 90% off!


7 mistakes developers make
Paul Scrivens
Thu, 26 Jan 2012 09:26:08 GMT

Popular posts from this blog

Apple Launches Web Tool to Deregister Phone Numbers from iMessage

Apple today released a new web tool for users to deregister their phone number from iMessage in the event they switched to a non-Apple device. To deregister a phone number from iMessage, users simply enter their phone number in Apple's web tool, receive a free text message containing a code, and submit the code to complete the process. Users who still have their original iPhone can also transfer their SIM card back to the device and go to Settings -> Messages to turn iMessage off. 

Users switching from an iPhone to another device were often unable to receive SMS messages from another iPhone due to their phone number still being linked to iMessage. These specific errors with iMessage have been a well-known issue since 2011, which is when the messaging service debuted with iOS 5. They were also made even more apparent this past May, where a server glitch caused widespread message delivery problems. Apple was even sued over the matter in a California court, although the company cla…

Microsoft acquires iPhone email app Acompli

After accidentally announcing it a little early, Microsoft is officially confirming it has acquired email startup Acompli. The surprise acquisition means Microsoft is picking up a powerful email client for iPhone and Android in another move that further cements CEO Satya Nadella’s focus on cross-platform technologies. The Verge’s Casey Newton called Acompl "the Outlook for iPhone that Microsoft hasn’t yet built," and it seems Microsoft was equally impressed with the powerhouse email app. "We’re excited about what’s possible as we build on the app’s success and bring it together with work currently in progress by the Outlook team," the company said in a statement. "Our goal is to deliver fantastic cross-platform apps that support the variety of email services people use today and help them accomplish more." Recode first reportedthat Microsoft would make its latest acquisition official today; the company is said to be paying over $200 million for Acompli. A…

Apple will disconnect ‘obsolete’ first-gen Apple TV from iTunes in May

Apple has announced today it will drop iTunes support for some older devices from May 25. This includes the first generation Apple TV, and also any PC running Windows XP or Vista. The company is introducing new security changes which will prevent those devices from using the latest version of iTunes.
Apple says that the original Apple TV is an "obsolete Apple product" and will not be updated to support security changes. Only those with the second generation of Apple TV or later will be able to access the iTunes store.
Windows XP or Vista users won't be able to use the latest version of iTunes, but older Windows computers can still use previous versions without support from Apple. Those who do so, however, won't be able to make new purchases or re-download previous purchases on that computer. If you're on on XP or Vista, you'll need to upgrade to Windows 7 or later to continue using iTunes normally.
The writing was already on the wall for these devices: Wi…