Design Tips for Developers
I’ve tried my hand in design, and it was not pretty. As I floundered through design books and courses, what I’ve found were some key concepts that provide some nice rules of thumb for creating designs that don’t suck too badly. Hopefully, this will help some other developer struggling to improve their own design.
Use 1.5em line-height
This is generally considered the ideal line-height to font-size ratio for body text. So if your font-size is 16px, you would want a 24px line-height.
Grids
Grids help keep your content aligned. There are many 12-column grid frameworks out there. The one I use now is Bootstrap. I remember one designer once told me to try to keep things aligned.
Golden Ratio
Things tend to look better in thirds. This appears to apply to many things including photography composition and website layout. So if you’ve got a 960px width page, it would make sense to have a 320px sidebar with a 640px content area.
Color Palettes
Adobe Kuler is a useful color scheme generator. Choose colors that are complementary and work well together. You’ll also want to think about the emotion that your color scheme evokes.
80 Characters per Line
There is a max-width property in CSS to keep your content blocks a readable size. It seems that 600px width holds about 80 characters per line (CPL).
Use a Readable Font Size
16px – 26px seems to be the norm. Headlines are typically 2x the body text side and sub-heads are usually 1.5x the body size.
Use a Font That Makes Sense
Think about the message the font is sending. Is the font elegant, casual, or futuristic looking? Use something that matches the theme of the website.
Spacing
Keep spacing consistent. If you have 30px margins, use 30px margins everywhere that makes sense. Make good use of white space. It doesn’t have to be literally white space. White space can be a part of the background image.