Becoming a designer who codes: the making of a unicorn

A few years ago, I embarked on a journey to become a unicorn. A unicorn is a designer who also writes code.

I’d always wanted to learn to code. I’d dabbled a little bit, but I didn’t know anything about web programming. I also wanted to learn new aspects of user experience design.

I was tired of having ideas and not being able to execute on them myself. I had that creative itch, but I couldn’t quite scratch it.

I’ve realized how many others there are out there who want to be makers but get lost along the way. There are so many tutorials on so many learning platforms teaching so many different frameworks.

When I eventually became a professional manager of programmers and designers, I felt like something was missing.

I’d have an idea and then find others to pay to make it. This hurts your soul. Yes, money is a wonderful tool, but so is hard work. I want to challenge you to step outside of your comfort zone and learn how to make things.

I recommend learning HTML, CSS, Sass, and JavaScript today. If you want to make apps, I would then learn Swift or Java depending on whether you want to do iOS or Android.

If you’re a developer, you should understand that learning design is a nebulous process. I recommend you focus on the principles of UX design. It will help with what you build while you do programming exercises. Additionally, learning interaction and visual design both take lots of practice and time. You have to develop a feel for it, which won’t happen quickly.

The key is remembering that you have to learn tools and processes. The tools will come and go, so the ones I suggest are good for getting started. The processes will take a long time to master, but they can be applied to any tools going forward.

The other thing to note is how you like to learn. I used a mix of books, online tutorials, online courses, and in-person courses. I was working remotely for a startup for a large chunk of this, and then I ran my own startup. This gave me flexibility and access to mentors.

Things to learn

Positive attitude: Have fun being bad when you start learning. You have to get into the mentality of play and making mistakes—especially when you can’t quite understand something.

Dev: HTML, CSS, JavaScript (jQuery, Underscore), Sass, Bootstrap, Github, Sublime Text, command line, Angular, React.

Design: Sketch, Photoshop, InVision.

Processes: Hosting, modular programming, object-oriented programming, Chrome dev tool debugging, strategic design thinking, interviewing, surveys, personas, card sorting, information architecture, user flows, UI design, usability testing, wireframing, mocking up, prototyping, interaction designing, animating, color theory, typography—whew… that’s a lot. You’ll learn many of these while learning tools, but some take intentional focus.

My philosophy towards learning

When learning development, there are 2 fundamental pieces:

1. Memorization
2. Practicing understanding and implementing concepts

As you learn a new programming language, the faster you memorize the vocabulary the stronger you get. It takes some work (and flash cards), but it’s incredibly useful. Then, in order to be able to actually use a new concept, you have to practice it in real code. Watching or reading won’t cut it if you don’t take the time to try it out.

When learning design, there are 2 fundamental pieces:

1. Learning the tools
2. Raw practice based on inspiration

As you begin to master the tools, you grow substantially faster and understand how to “see” designs you like. You’ll understand how they were put together and why. However, you must put in the hours creating and recreating designs. Learn a tool, then find inspiration online. Recreate what inspires you. Your eye will improve and your ability to create what you see in your mind’s eye will mature.

The complete list of books, courses, and tutorials I found most helpful

Below the list I’ll give an exact order I recommend you go through them. Oh, the power of hindsight!

Books

• Don’t Make Me Think  —  The classic book on making things usable and a fantastic place to start learning about UX
• HTML/CSS Book  —  Beautiful, simple, and effective
• Eloquent JavaScript  —  The best book to go from zero to hero in JS—and it’s free
• Elements of Typographic Style  —  I can’t stress how important it is to learn typography early in your journey
• Elements of User Experience — While I think some of the content is outdated, you’ll understand many of the concepts listed above by the time you finish
• Information Architecture  —  One of the few books I think of as invaluable for both devs and designers
• JavaScript Patterns  —  The most advanced book here, this will help you understand best practices and why other devs make certain decisions
• JavaScript the Good Parts  —  Another classic JS book, this deeper dive will get you using intermediate concepts
• TDD By Example  —  You’ll need to understand Test Driven Development both as a practice and as a conversation piece with other devs
• Progit  —  Part of becoming a developer is learning how to use Git, and this primer helped me immensely

Courses

• Bloc UX  —  The projects section is great for cutting your teeth, and having a mentor involved is useful for feedback. I did the program before any of my in-person training.
• RefactorU (full-stack JavaScript, in-person, 10 weeks)  —  I came in feeling confident in my HTML, CSS, and JS skills, and by the end of the 10 weeks I realized how much I still have to learn. An in-person experience is killer if you have the time both for networking and being in a structured environment.
• General Assembly (UX, in-person 10 weeks ) —  Working in a program focused on real projects is useful and fun
• Design + Code (in-person, one weekend ) —  I can’t stress how amazing Meng To is. The class is one day of Sketch and one day of XCode, and you work on a real project. I still use the technique in the class for making drop shadows, and a lot of my Sketch workflow is based on Meng’s suggestions.

Tutorials

• The Bitfountain Design Immersive (iOS8 Sketch ) —  This course helped me learn Sketch more than any other course out there. It’s intense, long, brutal, but so effective.
• The new Bitfountain site (iOS dev and design) — Bitfountain released a new site last year and has a wonderful community. They create content based on what users ask for and have a wonderful teaching style. I’ve worked through a lot of their Swift content and some of the new Sketch materials.
• Codecademy — Spend a weekend with Codecademy when you start to learn HTML/CSS, then another weekend when you want to learn JavaScript. Their method of learning by doing is effective for mastering the basics.
• Dash — This was my introduction to General Assembly a couple of years ago. Similar to Codecademy, but more of a full project than individual lessons.
• Learn Git — A visual way to learn Git. It’s fast and pushed me to that “aha” moment.
• Codeschool — A great place to learn JavaScript and the best for interactive tutorials on front-end concepts
• Sketchcasts — There’s so much value in watching experienced designers work. Sign up for a few months and watch all of the content.
• tuts+ — I often use tuts+ as a follow-up when I’ve learned the basics of a skill somewhere else. There are a good mix of design and dev tutorials, and they add new ones regularly.
• Lynda — Still the best place to learn new tools—it’s where I learned Photoshop. They now offer UX courses.
• Treehouse — My favorite of all these resources. They regularly add new content and re-organize their tracks, and they have great instructors and a wonderful community that’s supportive when you’re stuck. You can download any course as a video podcast and watch it elsewhere.
• Level Up Tuts — The best free resource I’ve found—period
• Learn the Hard Way  —  Kind of a book, kind of a tutorial. This was a great way to learn the command line and learn the basics of Regular Expressions. If you decide to learn Ruby or Python after JavaScript, I’m sure the materials here are excellent.
• Watch Me Code — Watching other people work is a wonderful way to learn subtle nuances of a craft. Part of why I enjoyed this site so much is that you actually learn testing and see professional, shipped code. I wouldn’t start out here, but when you feel like you’ve hit a wall this is a great place to learn.
• Front-end Masters — They offer some beginner and intermediate courses, but their advanced courses really shine. Many of the people who create the frameworks you use are the ones actually teaching the classes.
• Wes Bos — His book Sublime Text is the best I’ve found by far, and his email tutorials on Flexbox and React are wonderful
• Kopywriting Kourse — Understanding words, how they drive action, and marketing is important in life. We’re all victims of this constantly on the web, so we may as well understand the principles and how to put them to work.

Processes

I want to quickly highlight 3 important processes that have helped me along my journey.

1. Copy designs that you like off Dribbble or Behance. Actually downloading and recreating assets in Sketch is fun and useful. It’s a great way to learn color, typography, and layout. Grab the WhatFont Chrome extension so you can see what other sites are using as type. And use this to learn what type is in an image.
2. Create tiny projects to learn and test dev work. You have to make stuff! When you learn something new, think of a way to make something simple and test it out. It doesn’t need to be more than a few lines of code, but get in the habit of creating. This will anchor what you’ve learned, and you can refer back to it later. I save all of mine in Dropbox.
3. Practice code challenges. I like Codewars—they tend to be fun and have a good community.

Other resources

Some of these are tools, some are blogs, some are newsletters—they’re all the best.

• Codrops  —  Amazing tutorials, links, resources, and their CSS resource helped me when I was really struggling to understand pseudoclasses and the box model
• Luke W  —  Simply wonderful blog and newsletter. Luke’s writing and data-driven analysis are so useful.
• Design+Code  —  I mentioned Meng To earlier, but his weeklyish newsletter is usually where I find out about new tools and tricks
• Sidebar  —  Sidebar is curated by the generous Sacha Greif who has created some useful things. It’s 5 design-related links every day. A lot of my inspiration comes from these links.
• Designer News  —  Stay current
• Dribbble and Behance  —  When you’re learning, you need to follow some great creatives. Grabbing resources and mirroring better artists is a fantastic way to learn.

Want to become a unicorn?

Here’s the path I’d follow if I could do it all over.

Immersive route:

Prep work

• Don’t Make Me Think
• HTML/CSS Book

HTML/CSS

• Dash
• Codecademy
• Level Up Tuts — Work through the HTML and CSS tutorials
• Treehouse  — Begin the web design track

UX intro

• Elements of User Experience
• Information Architecture
• Lynda — UX courses to learn the tools

JavaScript intro

• Eloquent JavaScript
• Codecademy — JS tutorials—skip jQuery for now
• Treehouse — Begin the web developer track
• Level Up Tuts — JS tutorials

Visual design tools (Sketch and Photoshop)

• Level Up Tuts — Sketch tutorials
• Design+Code — Work through the Sketch part
• Sketchcasts — This will really help after you have the basics down
• Udemy — The monster Rob Percival course
• The Bitfountain Design Immersive — If you can still access this—otherwise work on the new Bitfountain
• Lynda — Photoshop training
• Bezier Tool Game — A fun and incredibly useful way to learn the pen tool

Development tools  

At this point, we’re prepping for the advanced JS and front-end concepts by learning tools developers use.

• Level Up Tuts — Sublime Text tutorials
• Sublime Text by Wes Bos
• Treehouse  — Complete the Git/Github courses and the console/terminal course
• Learn Git
• Progit
• Codeschool — At this point I’d switch from Treehouse to Codeschool. Take the Git/Github courses at Codeschool.
• Codecademy — Learn the command line. This will take a long time to master, but you’ll get good enough to begin using it.
• Learn Code the Hard Way — A good way to round out your command line learning

JavaScript advanced

• JavaScript Patterns
• TDD By Example
• Codeschool — Work through the JavaScript tutorials, then any front-end frameworks you want to learn. Watch the CSS/Sass tutorials.
• Front-End Masters or Watch Me Code — Pick one of these to start and then work into the other depending on whether you want to learn testing first, or dig deep into React/Angular and brush up on other skills.

Prototyping tools

This isn’t an area I’d spend too much time on, but download the prototyping tool of your choice and play around with it to test out interactions.

Immersive

At this point you’re pretty good and have a solid foundation of knowledge to draw from. Decide whether you want to focus more on UX or on front-end based on what you enjoyed learning more. You have years ahead of you.

If you want to do UX, go to General Assembly. Their career counseling is great and you’ll meet a network of other designers.

If you want to do front-end development, go to Hack Reactor. I debated between the 2 and ended up at General Assembly. If I wanted to focus more on dev, I would’ve gone to Hack Reactor.

Final thoughts

Future unicorns, I hope this helps you navigate through the huge number of learning options out there! 3 years after starting my journey, I’ve co-founded 2-15, a UX design firm in San Francisco. We strive to get to the heart of customer needs and use that insight to shape innovate products. I also love teaching and helping out new designers on their journey.