Web Design Tips for Programmers

I’m not a designer, but I recently gave my self-education blog a face lift, so I thought I’d share some of the techniques I discovered and applied in the process.

1. Find inspiration on the web

Before getting your feet wet, spend an hour looking for designs you personally like. Do some research on recent web design trends. Take screenshots of design elements you like, and stash them in a folder (I save them in Evernote). Start building a scrapbook. It will come in handy later when you’re stuck and in need of inspiration.

2. Choose two elegant fonts

Use the free Typecast tool to discover suitable fonts. Fonts should complement one another. My rule of thumb is to choose a primary font for large bodies of text, and another one for generic UI elements such as sub-headings and captions. It can be challenging to find a typeface that beautifully represents your brand name (different letter combinations look different with certain fonts), but keep experimenting and you’ll eventually find something that satisfies your palate. If you like elegant design, you might find Gucci, BVLGARI, Louis Vuitton, Hermès, Rolex, or some other luxury brands inspirational.

3. Choose two chic colors + shades

Pick two primary colors and add in a dozen different shades, including grays, and complementary colors. Use Adobe’s color wheel and the Coolors tool to experiment with various combinations. Try not to saturate your color scheme by adding too many distinct colors. Stay minimal. If you have no clue, feel free to “steal” colors from your scrapbook with an eyedropper tool and slightly adjust their RGB values.

4. Don’t go too dark or too light

Create prominent contrasts by alternating between dark/strong and light/soft colors. Get 10 feet away from your screen and make sure you can still distinguish all the different parts of your layout. If everything seems to just blend in together, your color scheme is too bland (either too dark or too light).

5. Use plenty of whitespace

Isolate visual elements, especially text, from one another by providing ample whitespace. Neglecting whitespace makes your layout look like it was put together by a programmer.

6. Add visual effects sparingly, especially animations and icons

I don’t wish to push flat design down anyone’s throat, but a clean look is always more elegant than a messy soup of special effects. This means that all 3D text effects are out, as are most gradients. Shadows can be cool when used appropriately, but be extra careful. Use subtle effects and animations as salt and pepper. Make your website’s logo spin instead of showing a generic spinner, but don’t animate every user interaction. Animations should lead the user’s attention.

7. Look for things to omit

Render what is absolutely necessary. Instead of looking for fillers, restructure the layout to make orphaned areas look less pronounced. Don’t implement a sidebar just because you think you’ll need it. If you can’t seem to make an element look right, remove it (or parts of it).

8. Can you replace a phrase with an icon?

Buttons and anchor texts often tend to become wordy. Try replacing some of them with descriptive icons. This will also reduce translation work.

9. Prioritize ad placement

If you choose to display ads on your site, don’t forget to think about them while designing the rest of the layout. Keep them in mind early on. Sloppily placed ads are a big turn-off and can also affect revenue.

10. Get a second opinion on your choice of colors

Ask your girlfriend if your color scheme looks coherent and fashionable. Even non-designers can give you a decent general opinion. But don’t ask anyone who’s working on the same project because their eyes have already been desensitized.

11. Increase the line height

Experiment with different line heights to hit the right spot. Give your paragraphs enough space to breathe. Larger and wider bodies of text should have taller line heights.

12. Increase letter spacing on small one-liners

Shorter bits of text printed in a smaller font size (especially in upper case) can look better when the letters are pushed slightly further apart. This usually works better with slogans and sub-headings.

13. Create reusable elements

Keep your layout consistent by building visually coherent modules that can be inserted into other parts of the website. Sections, columns, headings, buttons, menus, etc.

14. Take extended breaks

Working for extended periods of time on the same design skews your judgment. It desensitizes and makes you ignore visual hiccups that you would normally notice. Take some time off the project. Allow yourself to sober up, and come back after a couple of days.