Design Basics For Programmers

Let me guess your story.

You’re a programmer and you have a googolplex of ideas for web apps, iPhone apps, Android apps, desktop apps, and apps for the holodeck that you’re building in your garage (and your wife won’t let you get any more parts for it until you get a few venture capital partners or until the prices of replicator and tractor beam units come down to a more reasonable level). Despite your many ideas and your obvious ability to program them with such beautiful code that it would make Shakespeare weep if only he had been a programmer and, um, if he were still alive; you have a slight problem.

You can’t design.

It’s not that you personally can’t design, it’s just that you happened to choose a profession that requires terabytes of left brain thinking. In fact, the left side of your brain apparently fired the right side of your brain in a cost-cutting move the minute it became CEO of your daily activities. The right side of your brain has been missing ever since and is currently believed to be sipping hot Earl Grey tea with a group of yetis in the Adirondack mountains wearing the socks that keep disappearing from your laundry.

Because of your tea-sipping, yeti-loving absent hemisphere of gray matter, your designs are somewhat lacking. I don’t mean that in a bad way, unless, of course, you didn’t mean to give that squirrel sitting outside your window watching you program a seizure when you loaded your app.

Does Good Design Matter?

“Oh yeah?” You say as you lean back in your ergonomic black leather chair, arms folded and basking in the glow of your dual 23” monitors. “Well, it’s not like good design matters – just look at how successful and popular Craigslist is.”

“Oh my,” say I, quite a bit flustered and without words until I remember what happened to MySpace, “…but whatever happened to MySpace?”

Aha! Touché!

You see, design matters a great deal to any website or application. Chances are that your end users aren’t able to read the green code that’s streaming down in the background of your app (give them a break, they’re newly unplugged from the Matrix and probably don’t yet know that the cake was a lie). Their main experience isn’t with your beautiful code, but with the design of your application and its user interface.

Did you know that you only get milliseconds before a user forms a subconscious opinion about your application or website? Getting that first impression right is critical because it will influence how your users use and view your work from that point forward. Even if your application functions flawlessly from a technical view, it will still face significant psychological hurdles because of a poor visual first impression.

Craigslist wouldn’t fly if it were launched as is today, much like a hippo trying to gain orbit on a pair of butterfly wings. Even Fantasia couldn’t pull that off. Craigslist is a holdover from the early days of the web. It gained critical mass early on and any better looking competitors now have to overcome the user base problem, which is neither insignificant nor inexpensive. Craigslist’s outdated design also sets an appropriate psychological tone for its users, who are looking for a cheap deal.

Your app isn’t in the same situation as Craigslist and you don’t have the same built-in advantages. It’s 2011 and poor design won’t cut it anymore. If you want to remain competitive, gain a decent user base, and become even marginally profitable, you need to have a solid design. It doesn’t mean that your app needs to be the digital equivalent of the Mona Lisa, but it needs be solid. Usable. Reliable. Think more Norman Rockwell and less Pablo Picasso.

Design Principles You Can Reproduce In A Lab Experiment

Now, I ‘m not God’s gift to the design world. I have some artistic talent, but some of my early designs probably brought at least a few squirrels to a premature end. I’ve improved over time, but I look at the absolute genius and imagination of some the designs I see on the web or in print and I wish that I had the chops to pull something like that off. Perhaps someday I will.

I think many of us find ourselves in that position. What is design, anyways? Is it all just touchy-feely-wait-for-inspiration-from-your-own-personal-creative-muse or are there actually rules? As programmers, we like rules. In fact, the more that I think about it, graphic design should have an API, shouldn’t it? A well-documented, reliable API that works every time, with nary a fail whale to be seen.

Truly great design masterpieces do require a certain amount of innate talent. That’s the bad news. The good news is that there are rules and principles to design, underlying concepts that serve as a solid foundation for the meaning you’re trying to convey through your work. There’s no guarantee that a good design will make whatever project you’re working on successful – there are far too many other factors involved. However, a bad design will almost certainly sink any ship before it’s even out of port. I’ve learned a few of the principles I’m about to share the hard way, but the reason I’m sharing them is so that you’ll be able to skip straight to the end of the book to find out what happens.

Before diving into specific principles, I want to emphasize a higher level concept. Your design should never be the main attraction. If it calls too much attention to itself, it prevents your users from doing what they want to do. Good design enables; it never shouts. The goal of your application as a whole shouldn’t be to show off how cool it is – drama queens get frustrating after a while, just like the whiney kids in the supermarket – but it should be to allow your users to feel awesome because it helps them do cool things. If you do things right, your users won’t even notice your app because they’ll be too busy using it.

And now for specific, actionable principles that you can use to help improve your designs and make them solid. You may not win any awards, but at least you won’t be laughed out of the room because you mistakenly thought Halloween was a week earlier than it actually was and so you showed up to work dressed as a giant bunny rabbit eating a raw carrot.

  • Design First - Design shouldn't be an afterthought; it should be a first-class member of the planning stage. Your user interface and the flow of your application will most certainly affect your programming decisions. If you simply slap on a design afterwards, it shows. Your design is the way your users interact with your programming and they'll form their opinions first and largely based on your design. Give design its proper importance.
  • Stay Simple - Don't try to do anything too fancy or adventurous. Get the basics down first, then you can start experimenting. Don't try to emulate the Star Trek computer interface. It’s still too soon for that – we’re just not ready.
  • Be Consistent - A consistent design is part of the foundation of a good design. Keep track of your margins, sizes, and placement and maintain them throughout the design. Use the same icons and wording in the same order and location for similar functions throughout your application to minimize confusion.
  • Prioritize - What is the primary purpose of the design? Every page, every screen should have a primary action that it’s trying to get the user to perform. Emphasize that purpose. Make it obvious.
  • Remove Clutter - Only include the elements that are necessary to the design. Remove everything else. Ruthlessly.
  • Use Whitespace - Allow for proper margins. Large blocks of text with little or no margins aren't very readable. Ditto for other design elements.
  • Use A Color Palette - You shouldn't use more than 4-5 colors in total. If you're having trouble choosing a color scheme, check my article on choosing a color scheme for your website.
  • Consistent Fonts - Stick to one or two fonts. Use them consistently, usually one for headings, one for paragraph text. Calculate and maintain consistent font-sizes, line-heights, and line-spacing. Do not use Comic Sans unless you can fend off rabid velociraptor zombies.

As you begin to develop your skills and master the basics, play around with different mediums and different styles. Learn the basics. Know what works and why. Only then can you start bending and breaking rules, so long as you do them with a purpose. You’ll find that your most creative moments will be those when you take two very different ideas or styles and merge them into something new that still somehow works.

If you want to learn more details about tools and implementation, check out any of the following design blogs:

Of course, I'd love it if you also came back to visit us. We'll be posting more articles on design and the future and we need more writers and readers. If you enjoyed this article or found it useful in improving your designs, please share it with your vast social media empire, er, I mean friends. Yeah, that’s it…share it with your friends.

Tags

  • Benjamin Kuker

    Benjamin Kuker

    Benjamin Kuker is the co-founder of Virtuosi Media and is married to his beautiful wife, Johanna. He is responsible for the design and maintenance of this website. He enjoys reading, writing, programming, business, sports, and traveling.

    View Benjamin's Bio

Help us spread the word.

Your Comments Are Valuable - Join The Discussion!

Here's the latest in design.

Check out our most recent design tutorials and resources.

Popular design tutorials.

Here are our most popular and useful design tutorials.

We're on the web.

We are where you are. Discover great content by becoming our fan on Facebook, following us on Twitter, or subscribing to our RSS feeds.

 

Copyright 2011 Virtuosi Media Inc.