Design your way

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

I had always wanted to learn to code. I’d dabbled a little bit. But I didn’t know anything about web programming. I’ve also wanted to learn how to design on my computer.

My professional background was in product management. I’d worked with incredibly talented designers and developers. Then I went and got an MBA.

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

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

And then there’s learning to be a designer…

I love learning and grew up in a household where education was the most important thing. Yet I was afraid of programming. It was scary and intimidating. As I grew up and became a professional manager of programmers and designers I felt like something was missing.

I would 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.

Learning design is a nebulous process. My recommendation here is to 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 to remember is 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 for a startup remotely for a large chunk of this, then running my own startup. This gave me flexibility and access to mentors.

Things to learn:

Positive Attitude — have fun being bad and 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, Marvel, Framer.

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. I’m sure there are more too. A lot of these you’ll learn while learning tools, but some take intentional focus.

The last piece I want to point out is that my philosophy towards learning has changed so so so much over the last three years. If the only useful thing you get from my post is this then I’m happy:

When learning development there are two fundamental pieces. One is memorization and the second is practice understanding and implementing concepts. While learning a new programming language the faster you memorize the vocabulary the stronger you get. It takes some work (and flash cards), but is 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 two fundamental pieces. One is learning the tools and the second is 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 on the web. Recreate what inspires you. Your eye will improve and your ability to create what you see in your mind’s eye will mature.

Here’s the complete list of books, courses, and tutorials I found most helpful.

Below the list I’ll give an exact order that I would recommend going 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, oh and it’s free.
• Elements of Typographic style — I can’t stress how important it is to learn typeography early in your journey.
• Elements of user experience—Another classic, 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 will 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.
• UX Pinfree books — UX Pin has SO many free books, I highly recommend reading one as you dig into new UX topics.

Courses:

Bloc UX — I have mixed feelings about the Bloc course. I wasn’t thrilled with the content of the lectures and I ended up referring to books or the Team Treehouse UX content a lot of the time. However, 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. The price, for an online program, is a bit steep.

RefactorU, full-stack JavaScript, in person 10 weeks — I had a fantastic experience at RU. 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. I went through the program starting January 2015. I still don’t feel confident in Node/backend because I haven’t been using it, but my front-end skills went through the roof. I think 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 — I enjoyed the GA program a lot. I was told by the admittance team that my knowledge of UX was likely above much of the course materials and this was true. However, being at GA is a fantastic experience in San Francisco, both for networking and building a portfolio in a collaborative environment. One of the biggest challenges for me after all my learning was how to showcase it. With the guidance of my instructors I feel like I’m getting there. Also, working in a program focused on real projects is useful and fun.

Design + Code, in person, 1 weekend — I can’t stress how amazing Meng To is as an individual. The class is one day of Sketch and one day of XCode working on a real project. Part of what I found the most valuable was learning by doing. 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. I’ll also add that he is a walking encyclopedia of design resources and his newsletter is fantastic.

Tutorials:

The Bitfountain Design Immersive, iOS8 Sketch — This course helped me more than any other out there in learning Sketch. It’s intense, long, brutal, but so effective. Along the way you create a huge amount of assets and learn a lot of tips and tricks.

The new Bitfountain site, iOS dev & design — Bitfountain released a new site last year and has a wonderful community. I can’t plug these guys enough, 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. When you go on to more advanced tutorials you’ll begin to understand how things work better, but you’ll have a solid foundation.

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, this helped me more than any other resource. It’s fast and pushed me to that “aha” moment.

Codeschool — A monster of a site. I’ve worked through about two thirds of it at this point. It’s a great place to learn JavaScript and the best for interactive tutorials on front-end concepts. I also enjoyed their Sass courses a lot.

Sketchcasts — I can’t stress enough the value in watching experienced designers work. Sign up for a few months and watch all of the content. Many of the concepts covered I’ve gone back to a few times as they become relevant to me on projects. Also, the tips are incredibly useful.

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. Where I learned Photoshop. Also, they have some solid UX courses now too.

Udemy — Hmmm, not one of my favorite sites because the courses can range in quality so much. I recommend taking the courses when they are offered at a deep discount. The site seems to be down for me right now, but I enjoyed Rob Percival’s Sketch course and I found a couple of solid Affinity Designer courses as well. The dev courses I’ve taken haven’t impressed, so do your homework before purchasing one.

Team Treehouse — My favorite of all the resources for a couple of reasons. One is that they regularly add new content and re-organize their tracks. The second is that they have great instructors and a wonderful community when you’re stuck. Also, you can download any course as a video podcast and watch it elsewhere. I went through hours and hours on the treadmill on my iPad when I was training for a race last year! There are excellent dev and design courses, although I wish they had more on modern frameworks like Node, Angular, and React (it seems like they have a lot of new content in the pipeline). Just be warned that some of the challenges will require you to get help from the community.

Level Up Tuts — The best free resource I’ve found. Period. Scott is a great teacher and has gotten better over time. He has 1–3 hour courses on everything front-end related. If you are on a budget follow him! Either way, I would watch his courses before doing any paid content and support him along the way. Watch his tutorials on Sublime Text, Command Line, CSS/Sass, Angular, React, and especially all of his Sketch tutorials. Aside from UX practices and UI patterns he teaches everything you need to learn. I don’t have enough nice things to say — I’m amazed he puts everything up on YouTube.

Learn the hard way — Kind of a book, kind of a tutorial. This was a great way for learning the command line and for learning 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. This is a JavaScript focused site where you watch Derick using modern technology and doing testing. 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 — I don’t exactly know how to classify this site, but I love it. There are 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! This is the best place I’ve found for learning advanced JavaScript, frameworks, and methodologies. I spend time here currently when I want to learn something new.

Wes Bos — I’m not entirely sure where to classify all of Wes’ materials, but DAMN they are good. His book on Sublime Text is the best I’ve found by far, and his email tutorials on Flexbox and React are wonderful. Use his stuff to help learn. I also enjoy his teaching style.

Kopywriting Kourse — I haven’t included any other writing/content/copy materials as I think it’s a rabbit hole. Everyone should take Neville’s course. Understanding words, how they drive action, and marketing is important in life. We are all victims of this constantly on the web, you may as well understand the principles and how to put them to work.

Some I didn’t include:
Pluralsight — Too many tutorials, not enough updates, not the best instructors in my opinion. I was overwhelmed on the site and some of the content was too old to be useful. Probably worth another look at some point though.

Train Simple — Adobe only training, I’ve found Lynda and Adobe’s own tutorials better. Also, check out Creative Live for specific Photoshop and Illustrator classes (I was in the audience for the recent Illustrator class!).

Evented Mind — I spent some time here learning Meteor, I generally found there to be better teachers and better content elsewhere. I prefer learning by doing rather than just watching.

Ray Wenderlich — If you dig further into iOS or Android programming you’ll come across the site. I haven’t worked through their materials, but have heard fantastic things. Some of the blog posts are tutorials in their own right and I’ve used a couple.

Scotch.io — During my journey I’ve used Scotch’s tutorials a number of times. Some are very helpful, some are less so. I particularly enjoyed their, REST, Angular, React, and Sublime Text tutorials. I think all of their content is free.

The Design of Everyday Things — Along your journey you’ll stumble across Don Norman. He’s a father of UX and a big influence for many in the field. Personally, I’m not a huge fan of his writing style. Feel free to read this book and hopefully you enjoy it more than I did. I know this is blasphemy to some, but I want to be honest in my reviews.

About Face — The seminal book on Interaction Design by Alan Cooper and others, which has been updated several times. I enjoyed it, but don’t think it’s a must read like the books I’ve listed above. If you want to dig further into interaction design and prototyping give it a look.

Processes:

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

1. Copying 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. I recommend grabbing WhatFont chrome extension so you can see what other sites are using as type. Also…use this for learning what type is in an image.
2. Creating 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:

I realized as I finished that I hadn’t listed the other resources that I love and use regularly. Some of these are tools, some are blogs, some are newsletters. Rather than continuing with overwhelm, here are the best of the best in my opinion.

1. Codrops — I love their newsletter and site. It’s the best thing since sliced bread. Amazing tutorials, links, resources, and their CSS resource helped me when I was really struggling to understand pseudoclasses and the box model.
2. Luke W — Simply wonderful blog and newsletter. Luke’s writing and data-driven analysis are so useful.
3. Design+Code — I mentioned Meng To earlier, but his weeklyish newsletter is usually where I find out about new tools and tricks.
4. 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.
5. Designer News — Stay current. I enjoy the newsletter even though it often overlaps with Sidebar.
6. InVision Blog — I don’t have enough nice things to say about what InVision is doing for the design community. The blog is great, the content is great, the guest authors are great. If I could only follow one blog, this would be it.
7. Dribbble and Behance — When you are learning, you need to find some great creatives to follow. Grabbing resources and mirroring better artists is a fantastic way to learn. Yes, these are focused on visual design and not usability or UX. But that’s okay. I should probably start posting things to dribbble to get feedback, but I’ve never looked for an invite before…

Universe or unicorn?

Below is exactly what I would recommend for someone looking to become a unicorn.

If I could turn back time…

Here is the path I’d follow if I started again today. If you have the luxury of taking an immersive course, I highly recommend it. Having classmates to bounce ideas off of and a career center to help you find a job, create a new resume, and portfolio is invaluable. Feel free to jump around if you already understand some of the topics presented.

Immersive Route:

1. Prep Work
   Don’t Make Me Think
   HTML/CSS Book
2. HTML/CSS
   Dash
   Codecademy
   Level Up Tuts — work through the html and css tutorials.
   Team Treehouse — Begin the web design track, this is the segue into UX.
3. UX Intro
   Elements of user experience
   Information Architecture
   Lynda — UX courses to learn the tools.
4. JavaScript Intro
   Eloquent JavaScript
   Codecademy — JS tutorials, skip jQuery for now.
   Team Treehouse — Begin the web developer track .
   Level Up Tuts — JS tutorials.
5. Visual Design Tools (Sketch & PS)
   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, you can decide how deep to go here…I recommend Deke’s tutorials, but there are many good ones.
   Bezier Tool Game — A fun and incredibly useful way to learn the pen tool. You’ll thank me for spending some hours on this, it helped me finally get how the tool works.
6. Development Tools — At this point we are 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.
   Team Treehouse — If you haven’t completed the git/github courses or the console/terminal course go through these.
   Learn git
   Progit
   Codeschool — This is when I would 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 will get good enough to begin using it. At this point I’d stop using finder for a month or two in order to practice.
   Learn the hard way — A good way to round out your command line learning.
7. JavaScript Advanced
   JavaScript Patterns
   TDD By Example
   Codeschool — Work through the JavaScript tutorials then any front-end frameworks you want to learn. I would also watch the CSS/Sass tutorials.
   Front-End Masters or Watch Me Code — I would 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.
8. Prototyping Tools
   This isn’t an area I would spend too much time on. I would download Marvel for your phone, and use InVision on the web. When you want to test deeper interactions, spend some time learning Framer. There are a lot of good Framer tutorials out there (check out Bitfountain, Front-End Masters, and Udemy). It’s the tool I’ve been learning recently and enjoying immensely. With the JavaScript skills you’ve developed it shouldn’t take long to pick up.
9. 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. If you want to do UX, I’d recommend going to General Assembly. Their career counseling is great and you’ll meet a network of other designers. If you want to do Front-End, I’d recommend going to Hack Reactor. I debated between the two and ended up at GA. If I wanted to focus more on dev I would’ve gone to HR. I wanted to move to San Francisco and signed up for a course at GA while I was doing consulting work. Hack Reactor has an online program that you can take anywhere in the world. If you happen to be (or want to be) in the Boulder area, check out RefactorU.

Final Thoughts

This turned into a substantially longer post than I’d expected. I hope it helps people navigate through the huge number of learning options. I am sure people will have different opinions on how they like to learn or tools they found useful. Please leave them in the comments! I love self-guided learning and am always looking for new tutorials.

If you want some help based on where you are in your own learning journey I am happy to give specific recommendations as well. I spent many hours working down routes I don’t use much of anymore. The first six months I spent learning Ruby and Rails, and I’ve spent about as much time learning Meteor. I can post thoughts on learning these if people are interested. Thanks for reading if you made it this far!

I am a product designer based in San Francisco. I’m currently a UX consultant and looking for full-time work in a playful, education-driven company.

Please follow me on twitter where I focus on design, or follow my blog where I focus on living a meaningful life. Thanks!

♬ Listen to this Story or Read it in German, French, Spanish

The post The Making of a Unicorn appeared first on Design your way.

Source: http://ift.tt/2wVdlBW