Design Tips For Developers

I’m a developer. I’m not a designer. I have no training as a designer. I’ve never read any books on design. Despite these facts, over the years I’ve learned to build web applications and websites that look professional.

Duet Landing PageDuet InterfaceBoulevard Screenshot
 

Here’s a list of things that I think are important to becoming good at design when all you have is development background:

Develop your aesthetic eye

Learn to be able to recognize when a design is good, and learn to identify the specific things that make the design good. There are probably lots of ways to develop your aesthetic eye, but the process that works for me has exactly one step – I look at designs that are popular. That’s it. Over time you’ll start to appreciate the small details that separate a good design from a bad one. There are lots of sites to use, but some of my favorites are:

Take your time

Whenever I build an application or a website, I spend as much time on the design portion of the project as I do on the code. Good design takes time and you’ll likely go through several iterations before you arrive at design that works well and looks good.

Before I start on a project I usually have an idea of the general layout I would like to use. Once I have the general layout defined in my head, I work on the design and the development at the same time. I’ll design a small piece of functionality in the browser and then I’ll write the code to power that piece of functionality. I’m not sure if this is the most efficient process, but it allows me to make thousands of tiny iterations to the project as I work.

Steal

The secret to creativity is knowing how to hide your sources. — Albert Einstein

Good artists copy, great artists steal. – Pablo Picasso

This isn’t new advice and it’s probably the most important tip in this list. When you’re first starting out, you will not have the skills to create an attractive design on your own. This means you should imitate established designers, or just allow yourself to be heavily influenced by their work.

This is my process: I search for web applications that I think are designed well and have layouts similar to what I’ve imagined for my project. I identify the specific elements within those designs that I think will work well within the application that I’m designing. Then I recreate those elements in my app. Don’t copy the actual html/css; It’s unlikely that you’ll learn anything if you do. Just use the originals a visual guide and code it yourself. As you get more experience, you’ll gradually start creating things on your own.

Skip Photoshop.

If you’re like me, you don’t know how to use it, and it’s only going to slow you down. Use your strengths (code) and design directly in the browser. I use photoshop very infrequently and only for custom icons, logos, and screenshots of my apps. I have never created a full design in photoshop and I doubt I ever will.

Master CSS

css
Designing directly in the browser will require that you master CSS. Armed with a strong understanding of css and some creativity, anything that can be created in photoshop can be created directly in the browser.

Recently, there have been a lot of developers complaining about how broken css is, rather than actually learning it. Personally I don’t agree with this sentiment; CSS is quite literally one of the easiest ‘languages’ I have ever learned. With the exception of vertical centering and equal height columns, everything else in css works well. Sure there are a lot of rules. Sure there are some funky things – margin:auto for centering. But here’s the thing, once you learn that margin:auto is how you center a block element that has a defined width, then you’ll know how to center elements for the rest of your life. And if for some reason you forget, google and MDN are a few keystrokes away.

Regardless of whether or not you think CSS is broken, it’s easy and powerful, and you will need to be well versed in it if you plan to do any kind of design work in the browser. Once you’ve learned css, the next step is to learn a preprocessor like LESS or SASS, both of which will greatly speed up your development time.

Front End Frameworks are your friend

Zurb Foundation
Building a site or an app from an empty slate is hard, especially if you’re new to front end development. These days, every project I start uses a front end framework. Zurb Foundation and Bootstrap are the most popular, but there are many others to choose from.

If you use a front end framework, you should take the time to customize the default theme to give your project it’s own identity. Take a look at duetapp.com, which uses Foundation. If I didn’t tell you I used Foundation, would you have been able to tell? Probably not, because it’s been heavily customized to fit my specific needs. Take a look at the demo for Duet, which uses bootstrap. Can you tell? Customizing your front end framework will improve your site and provide another learning opportunity.

Frameworks:

  • Zurb Foundation – my favorite front end framework.
  • Bootstrap – most popular, but very bloated in my opinion
  • Pure – I’ve never used this one but it looks cool.

Icons are surprisingly important

icons
It took me a long time to realize how important icons are to a good design; It’s not immediately obvious. They improve navigation, add color, and help convey meaning. Icons alone can’t make a design great, but if you use the wrong icons you can definitely break your design.

Depending on the project I either use icon fonts or svg icons. Icon fonts are extremely easy to work with, especially if you’re designing in the browser. With most icon fonts it’s very simple to add an icon to an element – all you need to do is add a class name. For example, using the Themify icons if you add the class ‘ti-heart’ to an html element, a heart icon will be displayed in that element.

Icon fonts are also great because the icons are scalable and changing the size of an icon is as simple as changing the css font-size property. Changing the color of the icon is as simple as changing the css color property.

Here are some icons sets that I really like at the moment.

Iterate. Super important.

Trial and error is a valuable tool. Many of the things you try will not look good and they won’t fit into your overall design. That’s ok, each time you fail, take a step back and try again. I went through thousands of tiny iterations for the Duet interface before I ended up at the current design.

Focus on Usability And Simplicity

Good design is about more that just how an app looks. It’s also how well the app functions and how easy it is to use. Even without formal training, a little common sense can go a very very long way towards helping you build elegant usable apps.

You really only need to do one thing to build a usable app – make sure you actually use the app you’re building. Use it constantly. If something doesn’t feel right, then it isn’t, so fix it. Trust your gut. Intuitively you should be able to recognize when a process is unclear or too complicated. Perhaps there are too many steps? Perhaps a feature is too difficult to access? Perhaps a primary action requires too many clicks to access? Or maybe you sometimes forget where a particular bit of functionality is located? Whatever the usability problem is, I believe that if you’re using the app, you’ll recognize that the issue exists, and you’ll be able to fix it.

Obviously this process isn’t perfect. You’re not the same as every user and the way you’ll use the app might be different from the way the average user will use the app, but my experience has shown that most usability issues can be addressed this way. When I launched Duet, literally no other human being had seen or used it besides myself. Despite this fact, the reception was largely positive and many people praised it’s simplicity and usability. Of course there were things that I missed, but overall I was able to launch an app with a solid UX using nothing but my intuition.

Typography is more important than you think.

type
It’s also really hard to master because it’s more complicated than picking the right font. You need to also consider things like vertical rhythm, weight, style, spacing, etc. Honestly, I make very few typography decisions on my own these days. I don’t have the knowledge or experience and it’s extremely time consuming trying to get it right. However, since I’ve been developing my ‘aesthetic eye’ I can tell when a site has good typography and I’ll bookmark the site to use a reference later. Also, most front end frameworks have great defaults.

Here are my most frequent sources for great typography:

  • Foundation – If I’m not planning on using the entire Foundation library, I’ll just pull the typography stylesheet directly from the source.
  • Twitter Bootstrap – I use it the same why I use Foundation, but less often.
  • Brick
  • HelloHappy
  • Typecast

Choose the right images/ stock photography

Good pictures are hard to find. Especially if you have a limited budget for stock photography. I’ve wasted entire days looking for the right image for a design. Here’s a list of some sites I frequently use for high quality free images:

Get feedback

Admittedly, I’m really bad at this, but I recognize the importance of feedback. Most of the things I build are done in a vacuum and I don’t get feedback until they’ve already been launched. In an attempt to start getting feedback earlier in the development process, I’ve started using the following online resources:

Final thoughts

If you don’t know what you’re doing – simple is probably better. Lot’s of white space, very subtle shadows, etc. Becoming good at design is a slow process and it’s going to take time. Probably way more than you’d like, but if you stick with it, you will definitely improve.

My next article is going to be even better!

Enter your email address and I'll email you when it's ready.

  • mkultra329

    Very good stuff. As a developer that often finds himself designing I like what I see here and I will revisit to reference the links you have provided. Thank you.

    • 23andwalnut

      I’m glad you found it helpful. Let me know if there’s anything you would like me to expand on.

  • Emmanuel Livingstone

    Awesome article man. I’ve always wanted to create some sort of personal project and the first step I do is start off by designing the page in photoshop(which I’m terrible at) and drop off within a couple of days. Hopefully I’ll finish the next one I start.

    • 23andwalnut

      Yeah, it’s really difficult to get started with a project in Photoshop if you’re not already well versed in using it.

  • http://www.imsupporting.com Live Chat Software

    Great post man.

    I agree with pretty much everything you said. Icons especially, I think. make a HUGE part of an App. Also re-iterating to people that their “app” wont look perfect first time. It takes time, many changes etc before you have something you are happy with.

    My app for example ( IMsupporting.com ) has gone through so many changes over the years and even to this day, Im due to launch an updated version of my dashboard.

    I have found in this time that keeping things as simple as possible is something to focus on. its also a good idea to get a color theme going on.. https://kuler.adobe.com/ is a great tool for making a theme for your site.

  • josh

    Thank you for taking the time to post this! It’s appreciated.

  • RJ Reedy

    Great article.. Definitely going to be bookmarking this!

  • nate

    Hey good stuff! There are some great links here. I’m always looking to get inspired by good design. Might want to check out Font Awesome for a good icon font as well.

  • http://lilly.io LillyDevShop

    Fantastic developers! Designers and developers should always be trading tips to better each other.

  • DrewMiller

    You had me at “css is good except for vertical centering”.

  • http://coxy.co coxy

    As a designer, I appreciate this post. I’ve gave it a quick skim-through and will give it a proper read later (Hey! I’m not great at words — pictures are my thing!), but it looks like there’s some great tips for developers here.

  • danny__garcia

    This post is awesome, thanks a lot for sharing. I definitely see myself using this as a reference.

  • James Sterling

    Great advice. Even experienced developers can take away some design points from this article.

  • Pingback: Design Tips For Your MVP | Station Level Blog()

  • Konstantin KO

    Great Article

  • http://www.pixogee.com/ Pixogee

    Thanks for the insights! Really good article! I especially agree with the comments about Photoshop.

    Poor PS… In my opinion, it’s the most overrated application of all time.

    The problem with PS is that Adobe keeps loading in more and more functionality that is often applied in only very limited edge use cases that most designers will never use or even care about. So the application has essentially become like a beached whale… made practically useless by its enormous weight trying to be everything to everyone.

    It’s good to remember…

    Simplicity > Complexity

    If only the Adobe PS development team understood that truth…