Design for Developers

Design for Developers
Photo Credit to Lucas Benjamin @aznbokchoy

Are you an engineer? Are you terrible at design? Follow this guide to get a real quick better sense of design.

I've made them into small, bite-sized rules that you can follow as a specification, cause we all know engineers love rules and sticking to them.

1. Double the white space between stuff.

White space is your friend. It adds air to your design. It gives everything breathing room.

If everything is cramped together it's probably one of your biggest issues. Right off the bat, this is the first thing I start to adjust when I take over a project.
Just do yourself a favor and double the space and see how it looks. It'll probably look better.

2. Use a framework

Stop trying to custom write your CSS. You'll tell me you're "an engineer, not a designer", but you won't use Bootstrap? Come on.

Don't like the way vanilla Bootstrap looks? Use Bootswatch. Or Semantic-UI. Or Angular-Material. Or whatever other component framework you want.

They're all well-documented frameworks with tons of pre-made layouts that you can follow for your own project to get 80% there.

3. A little type goes a long way.

In general, avoid at all costs the basic fonts. Just using a custom font will get you 80% there in most cases.

Just look at Beautiful Web Type and see how amazing that shit looks with a few background textures and some fonts.

Bonus points: Make your text a size larger than you think it should be.

4. Screenshots are your friend

When it comes to making your site feel less "copy and paste", you can't get much better than adding new and custom content.

One of the best ways to do this is screen grabs or pictures of whatever you're creating a page for.

99% of the time, you engineers are creating pages for software you wrote, so I'm just going to assume that's the case and tell you to grab some screenshots of whatever app you're working on and throw them into your landing page. Center those images, slap the img-responsive class from Bootstrap onto them and call it a day.

Feeling adventurous? Try img-rounded out and really blow your mind.

5. Spend an hour to pick a cohesive color palette.

There are entire books and courses dedicated to picking and using colors in software. It's an expansive topic, but you don't need to spend a lot of time to pick a good color palette. If you're using a component framework like Bootstrap, using a custom color palette will make your app feel much more custom and unique than if you leave it on the default colors.

Here are the condensed tips I have for engineers when it comes to how to actually pick and use a color palette.

  • Don't use #000 pure black. It looks weird. Start with a really dark charcoal grey instead.
  • Embrace shades rather than different colors. Pick your primary color, an accent color, and then use shades handle the rest.

Further Reading

If you want to read more about colors and picking a palette, I highly suggest the post below. It's simple, to the point, and can easily be read and applied in under an hour.

Refactoring UI: The Book
Learn how to design awesome UIs by yourself using specific tactics explained from a developer’s point-of-view.

Updated on 24 Nov. 2020 to add some better clarification around colors.