Design for Programmers (and Other Non-Designers)

Let’s face it – most developers suck at design. They aren’t the greatest marketers either. That’s okay, you can’t be an expert in everything. But what happens when you want to create beautiful designs to bring your ideas to life? Designing landing pages and marketing sites is tough for programmers and non-designers. That’s why today I’m going to share with you my secrets to designing great looking web pages even (or especially) if you’re not a designer.

Why should you listen to me?

I started out my career thinking I’d be part designer, part developer. That didn’t work out so well. It turns out you can be a generalist or full-stack developer but it’s not realistic to think you can cultivate both your programming and design skills without one or the other suffering. Once I accepted this I set out to find out how I could still design great looking sites without having to choose the path of a graphic designer and leave my text editor behind. Today I lean on professional graphics designers every chance I get but when I’m in a pinch I can hold my own on the design front.

Content is king

The most important design lesson I’ve learned has more to do with content marketing than design and that’s knowing your subject. If you’re designing a site for yourself then of course you know your own content inside and out but are you just sketching out designs and fitting your content into place like puzzle pieces or do you have a coherent plan and are you telling a story?

Every page you design and code is telling a story. You need to be deliberate about what you’re writing on any given page. Let’s look at a real life situation as an example. I’m currently putting together a course on full-stack web development. It’s a great course that I’ve put a lot of time and energy into but my own expertise and good intentions aren’t going to magically make this thing sell so I have to plan my book’s landing page.

The first thing I do is get out a notebook and start writing my ideas down. Here’s what I wrote for my course’s landing page:

Planning a landing page
(Click to enlarge)

Design around goals

All I did was organize my thoughts around what I wanted to communicate. The first two things you need to think about are your value proposition and your call to action. Your value proposition is what you’re offering the visitor. If it’s compelling enough then the visitor will consider following through on your call to action. Your call to action is the one action you want your visitor to take after viewing your page. Everything else flows from these two things.

My value proposition is “learn full-stack web development”. You don’t have to word it perfectly or even write it down using the same wording you’d use on the finished page. Just get the value proposition on paper first then you can start working on content.

Supporting your value proposition

All content on your page should be supporting material for your value proposition that convinces the user to complete your call to action. The best way to achieve this is to start talking about the benefits of whatever it is you’re selling. Even if you’re not “selling” (as in, asking for money) you’re still selling something whether it’s an idea, information, or a product.

One quick way to figure out what your supporting content should be is to think about who your target audience is. Sometimes you address them directly as I’m doing in my design. Other times you just keep your target audience in mind as you write. Writing a short list of attributes or a few short descriptions of the type of people who will be interested in your page is a good idea.

Sell the benefits, not the features

If you’re selling a product or trying to generate leads the best way to show your visitors that you’re completely boring and out of touch is to focus on the features of your product. Have you ever seen an advertisement for an Apple product? They rarely mention gigabytes or CPUs or pixel density when they’re selling you an iPhone. They talk about taking great photos, crystal clear voice calls, and show off how natural it feels to use the phone instead. They’re not selling you features, they’re selling you the benefits. Even better, they sell an experience. When a product can’t differentiate itself based on features (few gadgets can anymore) the next best option is to sell the benefits. Once the competition catches up to you on benefits then you’re last option is the experience. This includes strong branding, communicating quality, values, and evoking emotions in your audience.

In my case, sometimes features and benefits overlap and that’s alright. I listed things like learning how to “build common website types from scratch” and “deploy a website to the internet”.

Put yourself in their shoes

You’ll notice that toward the end of my informal page of notes I have a section called “What’s Included”. If you’re selling an eBook or an online course then naturally people will be wondering what it is that they’ll actually receive if they make a purchase. That seems obvious when I come right out and explain it but you’d be surprised how much content you need to write that you haven’t even considered until you put yourself in your target audience’s shoes. So pretend that you’re a customer and ask yourself what you’d want to see on the page if you were the visitor. This is hard to do because you know your subject inside and out. In most cases you’ll find that a lot of what you’ve written no one cares about and there’s a whole lot you haven’t written that needs explaining.

All you need to start is a short list of notes. You don’t need to write notes on everything. Just jotting down your value proposition, call to action, and a short list of benefits and questions your visitors are likely to want to see is more than enough to jump start your design process.

Steal an idea

There’s nothing new under the sun. Every idea has been stolen and remixed from somewhere else. That’s why I don’t feel one ounce of guilt for telling you to go out into the world and steal someone’s design.

I don’t actually encourage stealing other people’s designs, I’m being tongue-in-cheek here. What I am serious about, however, is heavily borrowing off of others’ designs and making them your own. Look around online. For every website you come across can you honestly say you’ve never seen another one like it? Check outUnbounce’s landing page templates. See anything funny there? First of all, every single design in the collection looks like a variation on the same theme. Another thing to notice is how similar these designs look to pretty much every site online these days. That’s not a coincidence. You see, design is part theft, part content organization, and one small sliver of originality. Certain design styles are just simply good for certain types of sites or industries. That’s not only okay, it’s actually a good thing. Websites that are familiar to users make themselves much easier to navigate for those same users.

Of course, that’s painting with a broad brush. There’s always going to be room for originality but that’s going to come from your content. Your value prop, content, and call to action will determine where buttons are needed, how many and what kind of supporting images to use, and how to lay out your page.

What you’ll likely get creative and original with is your fonts, colors, and some graphics. Here’s an example. For my new course on front-end development I need to create a landing page. The goal of the page is to tell people what the course is about and to let them buy it. I’m not a professional graphic designer but I can still design. The secret is artfully ripping other people off. There’s a way to do this so that you’re not blatantly copying.

A few years ago I came across the site of a guy named Nathan Barry. He writes great content and his books are amazing. It turns out that the format of some of his material was similar to what I was creating. He’s a great designer and I liked the layout of the landing pages for his books so I borrowed – heavily – from his design. I wish my site were finished so I could show you a comparison but all I have for now is the sketch which brings me to my next point.

Planning a landing page
(Click to enlarge)

Once you’ve gathered inspiration for your own design, lift the parts of each one you like and make it your own. Take parts of one layout mixed with colors you found on Kuler and a font combination you looked up on Google. The people who put this information together know more than you about design so you should listen. I’d expect a designer to take my coding advice and you should take their design advice.

Publish and revise

I think one of the main takeaways I’ve gotten from my experience designing and developing websites is that you can’t let perfect be the enemy of good. You’re never going to get things right the first time you try. Instead, focus on getting something out that’s good enough and then go back, refine, and polish later. If you fail to publish in the short window of time where you’re motivated to think about a design then you risk never finishing out of frustration.

Design, Web design

« Mobile First is now mandatory Getting Good at Development »