My goal with this post is not to try to turn developers or programmers into designer, nor too diminish the value of having designers involved in a web projects.
However, in the fast-paced world of web development it is inevitable that a coders sometimes needs to insert a logo or place some text right before the deadline without having help from a designer. This can create disasters so I though I might list a few tips that will help developers avoid the most common mistakes.
1. Scale images on both axis
Sometimes you have a logo that needs to be a little smaller to fit. You can use Photoshop, Gimp or one of the new online image editors to do that, but avoid scaling along only one axis. The most typical way to commit this error is to load the image into Photoshop/Gimp, perform a "transform" and pull one of the corners to make the image fit without considering the ratio between height and width. Especially with logos this can result in a disaster where circles and squares become ovals and rectangles. Either use "Image Size" and mark the checkbox "Constrain aspect" or pull the corners while holding down the Shift key.
2. When in doubt, use the same font as the most similar piece of text.
If all the rest of the text on the page uses Arial, don't go for Times Roman when you insert a new style. Copy-paste is faster and a much safer bet.
How do you see if it's Arial or Times Roman?
If you have don't know the font, but have a mockup image you need to identify the type of font visually. It sounds difficult, but the truth is that 99% of people can not see the difference between Arial and Helvetica (two similar fonts), so you don't have to make a perfect match. The most important thing is to identify the type of font and the most basic classification is Serif or Sans-Serif. Look at the "feet" of the letters, for example the bottom of a T. If it's square at the bottom it's a Sans-serif, if it has little extra supports it's a Serif font. If it's rounded and cartooned you're looking at Comic Sans which is crap so ask the boss to fire the designer right away and use Helvetica.
After identifying the font as Serif or Sans-serif pick one of the following which are available on most machines:
Serif
Georgia
Garamond
Times Roman
Sans-serif
Verdana
Helvetica
Arial
Your css code should look something like this in order to be fail-safe:
font-family: Verdana, Arial, Helvetica, sans-serif;
3. Alignment is important.
Humans have a natural attraction to order and we can very quickly identify when one object is not aligned with several others that are aligned. Much can be said for the benefit of adding a little chaos to a design, but that's sometime to be left for the pros. When in doubt, keep things aligned with each other. Look for the invisible horizontal or vertical lines which run though a design and align everything to them.
Also, pay attention to detail. Being off by 10 pixels is much worse than being off by 100 pixels. If you are off by only a little it looks like you've tried and failed, if it's way off you can try to claim being a visionary.
Be very careful with centering, most text should be aligned to the left for western languages. This is especially true in tables, avoid centering labels at the top because it ruins the ability to scan a list. If you are dealing with numbers, align to the right and make sure you have the same number of decimals so that the user can skim the numbers and get an idea of their relative size.
4. Keep margins, don't crowd the elements.
Many developers I know try to squeeze as many characters as possible into their windows in order to be able to see as much code as possible without scrolling and tend to do the same on webpages. In the world of design margins and negative space serves as an important tool to group elements that belong together and even create a feeling of openness or cleanliness.
Between columns you normally need at least a 10 or 20 pixel margin. Around a horizontal logo a good rule of thumb is to leave a space around the logo equal to the average height of the logo. I can't give a specific guideline for all cases, but don't be afraid of white space.
5. These hex codes are not the colors you are looking for.
Time and time again I see a developer pick a color by typing in a hex code which is easy to remember, often resulting in horrible pink and green links and backgrounds. Hex code represent the amount of red (R), green (G) and blue (B) and in few cases will a designer choose to use the maximum amount of any of them (FF). If you need to pick a blue, go with #000099 or maybe #333399 in order to tone down the color (technically reduce saturation). Also don't use the predefined the colors like "green" and "blue" since these are very intense. Of the 5 tips this is the least absolute guideline since some design do in fact require very bright colors, but look at the context and keep in mind that you have 16 million options and always picking the 7 most extreme values is not very creative.
