An article I was reading about photoshop

href=”http://netdna.webdesignerdepot.com/uploads/2011/12/mistakes.jpg”> class=”alignleft size-full wp-image-28132″ title=”mistakes” src=”http://netdna.webdesignerdepot.com/uploads/2011/12/mistakes.jpg” alt=”7 Mistakes” width=”200″ height=”160″ />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.

id=”more-28109″>

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 href=”http://punchfork.com/”>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.

class=”spacer_” />

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.

href=”http://www.colourlovers.com/”>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.

class=”spacer_” />

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.

class=”spacer_” />

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 href=”http://typekit.com”>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.

class=”spacer_” />

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.

class=”spacer_” />

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.

class=”spacer_” />

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 href=”http://dribbble.com”>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.

class=”spacer_” />

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 href=”http://twitter.com/scrivs”>@scrivs. He also likes cats.

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

/>
width=”100%” style=”border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7;” height=”20″>
valign=”center”> href=”http://www.mightydeals.com/deal/tokokoo-themes.html?ref=inwidget”> face=”Arial” size=”3″ color=”#e64f32″>5 Ecommerce WordPress Themes from Tokokoo – 90% off! width=”90″> href=”http://www.mightydeals.com/?ref=inwidget”> /> src=”http://mightydeals.com/web/images/widget-logo.png” height=”40″ width=”90″ border=”0″ /> />

href=”http://www.webdesignerdepot.com/2012/01/7-mistakes-developers-make/”>Source

Webdesigner Depot