Design for Programmers | Part 1

Ok, this is a sort of off topic post, but it is related to art - meh.

Graphic design:

The practice or profession of designing print or electronic forms of visual information, as for an advertisement, publication, or website

 That means you can design anything that contains any kind of visual information: Websites, posters, logos, application UI, to name just a few. Design isn't very hard, but it does take some practice. This post will be focusing specifically on basic, general design, but I might do another post on a more specific subject...

The Basic Rules of Design

Contrast

Contrast is any kind of opposite or radical difference between two sections of a design.  Contrast is used to bring attention to a certain point of the design, or to show hierarchy. For a simple example: I want to show that the header is a title. Instead of making it the same size of the rest of the text, I would make it bigger. A subtler example, is right aligning an image, while for the rest of the design, images are centered. You can also contrast color, font weight and size.

Repetition

Repetition is when parts of a design are repeated throughout the design itself. Yeah, that definition wasn't great, but you get the point - make it repetitive. When I say make it repetitive I don't me use complex, bright green, (trying to be organic) ugly tileable background:

Yuck! is it needed that much?

They look cool for the first ten seconds and then they become super distracting.
Sorry - got on a tangent there.

Good repetition in design, is using the same style over and over again. Not only does it save space and time, but it looks better and gives a sense of uniformity(is that a word?).

Headers should be the same size, font and color every time(unless it is supposed to contrast).
If an image has a border around it, all of them should(again unless it is supposed to contrast).
Headers should always have the same amount of spacing on the bottom(another reason not to use inline styles).

Alignment

Alignment is when an invisible line is made by making sections of a design line up. This also shows hierarchy, because the human mind groups things based upon there position. For instance: A header should line up with its body text, otherwise it will look disconnected and floating out on its own.

Proximity

Proximity is the distance between sections of a design. Proximity is one of the most commonly missed rule of design, but it is vitally important to hierarchy. Example:

Left or Right?

The sad thing, is that it's not even hard to fix. Just headers and content closer together and it will look so much better.

DOs and DON'Ts

Some things are technically good design, but visually, they don't look very good.

Don't

• Please, please, please, I beg you - Don't use Times New Romans it is the ugliest font, simply because it is used on so many badly design sites. Really, do Apple or Smashing Magazine use Times New Romans?
• Don't use Arial, it sucks just as much as Times New Romans.
• Don't use center align - unless you want your design to look boring. Plus, it's hard to read center aligned body text.
• Don't use more than two fonts, otherwise things get messy. (I tend to use Helvatica Neue for body text and another more obscure font for my header.)
• Don't try to fit everything above the fold - I can grantee it will. Not. Work. It just looks bad, and you can't easily follow the basic rules of design.
• Don't use that ugly off white color that's used in Windows XP Classic theme.
• Don't use inset, outset, ridge, groove or double when adding borders. Please.
• Don't use more than five(ish) colors. I say ish, because three of those colors are just shades of the other two. Normally you just want to use black(meaning dark dark grey), white, possibly grey, and any other color.
• Don't use neon green text on black. I know it looks cool in your terminal, but it wouldn't look cool if you were trying to read Hacker News.
• Don't use colored body text. Neutral colors are the best for body text.
• Don't use a colored background for text. IT MAKES YOUR EYES HURT.
• Don't use image buttons. That's old school. And more often then not, the image gets cropped off at the edge and just looks stupid. Plus it slows down load time. And it doesn't ever look as good as a CSS3 button.
• Don't add extra crap you don't need. Less is More!
• Don't use light grey text on a white background.
• Don't add text shadow to body text.
• Don't use red on blue.
• DON'T DO FLASH

Do

• Do start out with a minimal design in mind. You can add more later, but less is more.
• Do use a color pallete (a good one is kuler.adobe.com).
• Do use lots of white space. I use tons of it. Again - Less is More. It also looks cooler.
• Do use a special font for headers. You can do that three ways(in order of looking/working best):
  1) Use Google Web Fonts or something similar to it.
  2) Get a custom font and use @font-face, but it doesn't work with all browsers(*ahem*  Internet Explorer).
  3) Use a "System Safe" font. This doesn't show up right if you don't have the font though.
• Do use a boilerplate. Some people don't like boilerplates, but they speeds up development so much, and it solves most problems related to alignment.
• Do use toned down colors. Using pure red(rgb(255,0,0)), will not look good.
• Do look at other sites for inspiration.
• Do left align for text body.
• Do use whitespace instead of a line when you can. Less is More!
• Do use CSS3 animations if it will enhance the site.

I hope you enjoyed the post. If you have any questions or comments ask them below. Happy Designing!