Hey designer, let’s dabble in code!

Published in

Designing Atlassian

8 min readSep 13, 2016

A while back this great blog post from my esteemed (in some circles anyway, haha) friend Andre Herasimchuk made its rounds around the Atlassian design team and it got me thinking. Knowing how to code really does make a designer powerful, and I do agree it’s something that designers should be, at the very least, familiar with.

I don’t want to re-open the discussion on whether or not designers should code. Rather, let’s assume that if you’re reading this you think they should at least give it a shot. Sound good?

I love working in code. Sometimes, it’s much more efficient that pushing pixels around in Photoshop or Sketch and it’s closer to the final product. In fact, I think I’d ideally go from analog processes like sketching and white boarding straight into code and skip those middle tools. To that end, I’ve been pushing myself more and more to get in the habit of coding. I’m working to develop a practice, and I thought I’d take a little time to talk about the things that are working well for me. If you’re looking for a few options to begin a journey into code, maybe this will help. And please offer up some of your own experiences, I’d love to learn from you too!

If you just want some links, skip to the bottom. Good stuff there.

HTML/CSS

People often debate whether or not HTML and CSS count as “code,” but I think that’s a bit silly. Regardless of how you define them, learning HTML/CSS is a great intro for any designer who has no experience coding. The basics are easy to learn, and there’s a fairly clear path towards advanced learning that will prepare you for concepts you may encounter with JavaScript or any of the framework-based languages.

I imagine many reading this have a fairly solid HTML/CSS understanding. It’s been years since I learned either of these, so I’ll keep this brief. Here are a few options for getting started:

Codecademy has an awesome HTML/CSS track. That’s a good place to start.
HTML 5 for Web Designers and CSS 3 for Web Designers — companion books that are a great intro or refresher.
The W3Schools tutorials — a bit dry, but solid.

If none of those seem like your cup of tea, a Google search will yield a ton of great options.

Programming basics and essentials with Python and Django

A good place to start programming is with one of the two big frameworks; Ruby on Rails or Django (for Python.) There are quite a few tutorials out there, and a Google search or a trip to any of the myriad coding academy type sites would be a good place to start. I’ve done a few of these over the years, and they’re all good.

I know many designers begin with Ruby on Rails, but I’ve found Python and Django to be a bit more straightforward and design friendly. The primary reason is that RoR has a bit of “magic” going on, which is great if you know what you’re doing. But if you’re learning, it can leave you confused.

As well, when compared to Ruby, Python reads well, and very naturally, and it’s verbose in a way that (I found anyway) makes it much easier to follow. Another reason to start with Django and Python? Atlassian’s own Bitbucket is built on that stack!

Either way (Django or Ruby on Rails) you’ll find many tutorials out there that can get you started. If you’re not sure I’d suggest Python/Django, but you might also go with what developers you know or work with are using.

If you do want to go the Python route, I’ve got a couple stellar resources to get you going.

Want to learn the fundamentals? Try the hard way.

A great place to start is with Zed Shaw’s Learn Python The Hard Way — if you can get past the first third or so you’ll have a solid grasp of the underlying fundamentals of programming. I really enjoyed it and highly recommend it if you’re just looking for a place to start learning. It’s well written, entertaining, focused on practice (which is key) and it’s free to read online.

Want to learn by doing? Say hello to Hello Web App.

If you’re looking for something more hands on, try picking up Hello Web App by Tracy Osborn. I just got through it and found it to be a great refresher that gave some great context to the concepts I’d learned via Learn Python The Hard Way and other similar books. In Hello Web App you’ll be walked through how to build a straightforward web application with Django. I loved the fact that though the app you’re building isn’t all that complicated, you learn a lot of the basics that you can extend into whatever you want.

There’s also a new intermediate concepts version that builds on the original book. If you’re a do-er that wants to learn, I highly suggest picking it up.

Collaborating with developers — Git and the Command Line Interface

If you jump into any of the resources on this page, you’ll notice references to Git and the Command Line or Terminal. Both can seem daunting at first, but once you know a few basics they become much less scary and actually fairly easy to work with. If you’re not familiar with Git, it’s easiest to think of it as a version control system that allows you to collaborate on code (and other files) in a way that’s safe, backed up, and every change is tracked. Our very own Bitbucket is a Git tool and most teams at Atlassian use Git to manage the code for their projects. You can learn more about Git with Atlassian’s very well-done Git tutorials.

Or, if you want more tailored learning that will teach you the basics and get you set up with Git, I’ve written something — with a specific goal of teaching designers how to collaborate with Git using Bitbucket. Please dive in and if you’ve got questions, feel free to hit me up.

And, if you ever get stuck using git, I’ve found this site to be pretty helpful :)

I strongly suggest learning how to use the CLI (Command Line Interface) because it makes grasping Git and other related concepts easier. To get started with the command line, try this designer’s guide to the OSX command line. Or, if you want a more in-depth guide, try working through this comprehensive tutorial from Zed Shaw.

Last, if you want to go real deep with Git and collaboration, try Git for Teams by Emma Jane Hogbin Westby.

Prototyping with Framer and static site generators

There are lots of different ways you can be prototyping, and many don’t require any coding know-how at all, which is great. But if you’re looking to do something more robust, and you want to do it with code, there are options out there. I’ll talk about two I’ve been exploring recently and find relatively easy to grasp if you know a bit about programming. Let’s talk about each of these in more detail.

Static site generators for quickly propping up prototypes

Let’s start with static site generators because they’re relatively straightforward and easy to pick up with just a little bit of coding knowledge. If you get HTML/CSS you’ll probably be able to pick up most of them fairly quickly. I’ve dabbled with a few; I used Jekyll to quickly work up some step-through type prototypes and have built a nice, simple CMS using Git and DocPad, a node.js powered static-site generator.

Both have great documentation, but Jekyll is more widely supported.

DocPad beginners guide — this will walk you through setting up a basic blog with DocPad. It doesn’t go too far into fundamentals, but it’s fairly easy to follow and I found it a great resource for getting started.
There are lots of resources out there for Jekyll, but I’ve not used many of them. I found the quick start guide helpful and I was able to get something up using their documentation pretty easily.

Framer for complex interactions and animations

I’m still fairly new to Framer, but I’m finding it fun and powerful. It’s not as approachable as some of the other options I’ve talked about, but it’s well documented and there are loads and loads of resources out there. So, why would you look at Framer? It’ll help you learn coding and can be extremely useful in your day-to-day. It’s designed for prototyping designs, which makes it a very handy tool for any designer’s toolbox.

A few tips and tricks

Don’t fear the command line. Many of the tutorials you’ll come across will reference the command line, and while it’s true that it’s not the most friendly of interfaces, it’s not near as bad as it may seem at first. In addition, I’ve found that the focused nature of the command line actually helps learning complicated concepts.
Practice. Practice. Practice. This goes double for things like learning Git commands and using the command line. I’ve found that by stretching my learning out into a daily routine, where I check out, commit, and push my code to Bitbucket has really helped me learn and remember some of the concepts that makes learning code much easier.
Don’t cut and paste the examples you’ll see when you’re learning. Type them out. You’ll get this same recommendation if you dive into Learn Python The Hard Way. There are a few reasons for this advice. One, typing the examples gives you time to take in the concepts and see how they relate to the syntax. Two, you’ll make mistakes — and that’s a good thing. One of the best ways to wrap your head around what you’re learning is to break something and then figure out how to fix it. It can be frustrating at times, especially when the mistake comes from not following the examples or skipping ahead (something I’ve done A LOT) but it’s worth it. Do the work.
Speaking of fixing things that are broken, Google, and Stack Overflow are great resources. Stack Overflow will very, very often have a solution to the problems you’ll run into and will show up highly in any Google search you run when things get borked.
Take lots of notes. You’ll be performing lots of actions over and over again. Some of them are very important to understand conceptually and others are just little things you need to remember (like the terminal commands for starting a server). Take a page out of Getting Things Done and write down those things so you can focus on the learning.
Look into pairing with a developer. Not only is it a great way to learn, it’s a good way to build empathy with your co-workers and, in a very practical sense, is one of the most efficient ways to make sure your designs are implemented well.

Link round-up for the prose-challenged

(In a semi-prescriptive learning path.)

HTML & CSS

Command Line & Git

Beginner’s programming

Frameworks and Prototyping

Have any resources you’d love to share? Please let us know by leaving a comment or response.

Did you enjoy this post? Want more of the same? Consider following Designing Atlassian.