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.
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:
- awwwards.com – look at the sites of the day and the sites of the month.
- unmatchedstyle.com – The reviews are very helpful
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.
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.
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.
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
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.
- 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
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.
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.
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:
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:
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.