If you’re a software developer, like I am, you may have noticed how apps and websites have become more and more design-heavy over the years. Maybe you’ve thought to yourself, “I could do that!” After all, you’ve got an eye for good design, right? You can tell the good from the bad. You know to avoid Comic Sans, and not to put solid red text on a solid green background, and that pretty colors and big fonts make everything look great.
Maybe you’ve even tried your hand at imitating the designs you see. It’s hard, though, isn’t it? Your own work never comes out looking as good as something produced by a “real” designer, and you become disheartened by how difficult it is. You go back to writing code. You’re good at that. It’s what you get paid for. But despite that, there’s still a feeling inside that you could be a designer. You just need to learn.
I’ve been there too. In fact, I still am. That’s why I started this site: to help developers and other technically-minded people learn a thing or two about design – and while I’m at it, improve my own design skills. Let’s take a look at how we’ll grow together.
Practice
Anyone who’s any good at something practices that thing. I’ll say that one more time. Anyone who’s any good at something practices that thing.
Guitar players who make it look easy, photographers with thousands of beautiful photos on Flickr, software developers with pristine clean code on Github – they all practice, whether or not they call it that.
There’s another thing that these people do (or rather, don’t do): they don’t talk about how much they practice. Good photographers don’t post their entire memory card full of photos to Flickr. They don’t talk about how they spent weeks waking up at 5am to catch the perfect light. Instead, they pick the very best images and then post only those perfect specimens online. After they do this for a while, they’ve got a solid body of work and the sheer quantity of it makes it look easy.
Combined, those two things (consistent practice and only publishing their best work) can make that level of success look insurmountable to mere mortals like us. And it probably is, right now. But you will continue to practice and improve. Throughout your journey, never forget this fact: it doesn’t matter how good someone else already is at what you are trying to learn.
How To Practice Design
In the case of design, practice takes a similar form to most other pursuits: you must duplicate before you can innovate. We all want to jump into creating something great on our own, but think about it for a second: duplication is how we learned handwriting, how we learn singing, and even how we learned programming.
In learning software development, you follow a bunch of tutorials, maybe type in some code from a book, never building anything original. It takes a while, but eventually the concepts begin to stick. And then you start to work on small practice problems to develop your new skills. At this point there’s no code to copy into your editor, but there’s a problem of limited scope that you can solve by yourself. Tiny problems, that have all been solved before: think Towers of Hanoi, or Reversing a Linked List. After a while of progressively harder small problems, you’re ready to tackle some of your own ideas! Even then, you’re not done learning. You can (and should!) often return to the Duplicating phase, and then the Small Problems phase.
You can use this same strategy for improving your design skills.
Phase 1: Duplicating
Find a simple site that has a design you like. Try to recreate it from scratch. HTML, CSS, images, hover actions, everything. Down to the last pixel. If this is too difficult at first, try something smaller: just the login screen from the site, or even just the login form itself.
Work to improve your CSS chops by recreating fancy UI elements that you see in the wild – like Bootstrap’s inputs with the fancy glowing border.
Phase 2: Small Problems
Take on a series of mini design assignments. It’s best if they’re well-defined by someone else, but you could invent them yourself. Just make them something easy and familiar. Think components of a page instead of the page in its entirety. Some examples could be:
- a login form
- a navigation bar
- the “hero unit” / big marketing area at the top of most startups’ sites
The goal is to train your creative muscles without becoming overwhelmed with decisions to make. At this point, you’re not duplicating existing designs – you are putting your own spin on things, but in small doses.
Phase 3: Your Own Project
Come up with an idea for a project. Build and design and the site for it. Don’t make it functional. You’re not building a web app here – even if you want to, eventually. Focus on the design and the HTML/CSS to make it work. If you start coding you’ll get lost in a huge mess of unrelated problems and you won’t learn much about the design aspect.
Cautions
Beware of learning something to the 20% level – until you know it just barely well enough to get something functional and then move on. It’s too easy to fall into this trap with Google and Stack Overflow having all the answers. Pretty soon your projects just become a pile of hacked-together solutions from Stack Overflow and you don’t really understand how it all works, let alone how you’d build it from scratch. It’s really easy to do this with CSS, and you’ll never build the foundational knowledge to solve your own problems if you run to Stack Overflow every single time.
The Journey Starts Here
I plan to continue writing here on topics related to design, development, and how to improve your skills. Future articles will expound on the Phases mentioned above, with real concrete examples and walkthroughs of design breakdowns. I hope to see you around! Until then, start practicing those skills.
