Designers Cheatsheet to get yourself interested in coding
So we can stop asking each other ‘Should designers learn to code?’ question now.
The Charm of a DIY would never fade Oftentimes we may find the mysterious land of coding daunting and complex. Coding is actually really fun and helps you with more ways than you think! Speaking from my experience of 2 or so years of my coding career a few years back (most of my knowledge of the current front-end world is fading). The principle and the logic of learning how to developing something did help me a lot when I work professionally as a product designer.
So yes, you should learn to code. In fact, you could start coding as a hobby in no time! I know this is not for everybody and ‘It's not what I signed up for’ is going to come up a lot in your head during this. But hey, at least we’ll know for sure if we hated it or just being intimidated by the notion of it in the first place, right?
Okay, you convinced me. Where (and what) should I start?
Well, stick to your trusty search engines. I will also give you links and free tutorials courses so you can try looking it up as well.
There are about a dozen programming languages and a million words and terms about programming you don’t understand. Here, if you're just going to be randomly googling around the coding world, let me give you some for starters.
Anything marked as bold texts can be used as a search keyword so you can find a definition online if you want to know more about it.
Also known as the gateway drug into the world of programming. This page you’re reading consists of both of them. HTML tells your browser what to render and CSS defines its looks. It’s probably the most accessible and easiest form of coding you can get your hands on.
You will also probably hear people talking about Bootstrap which is the widely used framework for creating responsive websites. It may be the reason you’re learning to use the grid system in the first place. Bootstrap (apart from its interactive part) basically is a group of customisable CSS shortcuts (called class) that developers will call upon and use it to carry out your design. Bootstrap 5 is also coming soon!
How will it help me?
These two (and Bootstrap) will help you understand the basics of a responsive website and how your designs get carried into the development side. You’ll find yourself talking more sense into the developers when they asked you about padding and margins of that card element. You may even have more ideas regarding how you divide up your grid into smaller fragments depending on the hide-able sidebar and responsive forms layout!
Where to start?
Try Web Development Free courses on Codecademy. It has a built-in online text editor and thorough explanation of how web development works. You can even start learning JavaScript if you keep on going on and couldn’t bring yourself to stop!
For those finding themselves on the go every now and then. Try downloading Mimo and be amazed that you can learn coding ON YOUR PHONE. Take that designers-who-have-to-be-using-a-tablet-or-a-computer-to-work!
Note: Some developers might encourage you to learn SASS/SCSS. Those are preprocessors that would spit out a neatly organised CSS. I personally think it’s not needed for beginners as it was more likely a helper for implementing a style and extending your developer team-collaboration (which is more or less not your concern at this stage).
Getting excited yet? Then let’s keep going!
2. JavaScript and its ever-expanding frameworks & libraries!
Ever google Sketch questions and ended up getting SketchUp answers? Developers get the same cringe when people confuse Java with JavaScript. I won’t get into the details (or A funny comparison) but let’s just say learning JavaScript (JS) is potentially more beneficial.
JS is a scripting language. Which means it defines any interaction you made within a website eg. Clicking on a button or adding an item to cart. Interactions play a large role in the UX field and could get you a better understanding of how data is handled and executed.
Where to start?
I recommend continuing your journey with Web Development Free courses on Codecademy. Conveniently there’s a JavaScript section which contains all the basics you need to know to create interactivity on a web page.
Plus: After becoming more comfortable with JavaScript. Did you know that You can also create Figma Plugins! (It uses TypeScript which was built as a superset of JS)
Note: During your study, jQuery might get mentioned from time to time here and there. I wouldn’t recommend going too much into it. It used to be really popular back in the olden days. Now JavaScript and many Node.JS Packages on NPM is more than capable of doing most of what jQuery does
The above mentioned should provide you with more insights on how frontend developers work on a modern-day basis.
Where to start?
Many of what I have mentioned contains a lot of documentation and basics of it that you would find pretty easy to understand.
If you don’t understand it much or these documentations don't make any sense. There’s a staggering amount of tutorials online. Find the one that you think suits your learning style the most. I learned my fair share of JavaScript via Learn JavaScript
4. Native app madness (for mobile app designers)
Learning a native iOS and Android language is challenging and as much of a curveball as pulling off 3d motion graphics after completing a photoshop course. Don’t be afraid though, as some of these tutorials are so good even complete beginners can understand the logic behind them!
Native development, be it Swift or Kotlin should teach you the basics of Object-Oriented Programming (OOP). It could be daunting at first, but the principle of these practices (like how you define a class and using Model-View-Controller (MVC) structure) could go a long way as OOP is really common amongst many popular programming languages and get you an insight into how each app basically operates.
Where to start?
If you’re learning Swift (language to develop iOS apps), you’re in luck. Swift offers this Beautifully Playgrounds app made by Apple that is incredibly fun to go through. It’s not that useful against actually writing the code but I put it there so you can get familiar with OOP. You can then try to be more serious with yourself and look for a more detailed guide in Intro to App Development with Swift on Apple Books that will get you started developing apps. It’s all free. go nuts!
Kotlin (Android), on the other hand, is also offering free good Training Courses for beginners who are new to the world of OOP and creating an app. I'd also encourage you to try out some good courses online if you’re finding these tutorials hard to understand.
But I needed more!
By this point, it should be enough for you to learn and get comfortable with how a programming world works in general. if you’re here because you wanted to up your game regarding working with developers. Those will be more than enough.
However, if you feel like this is fun and interesting. I’ll throw you more suggestions just in case.
5. Backend & CMS (or JAMstack!)
We’re going into an overkill effort here. But if you’re still interesting to 'really getting into it' I recommend you try to:
Dip your hands into a framework like WordPress or Laravel. I mostly preferred you try and study Laravel as it is actually pretty fun and more flexible in general.
Or try looking up a static website generator like Hugo. Understand the basics of Jamstack | JavaScript, APIs, and Markup and try out Headless CMS where you can start implementing it and create your own static website like a blog or design portfolio in no time!
...But wait, if you're feeling adventurous, how about learning NodeJS and get crazy with React. Or work your way towards Ruby on Rails framework (using Ruby language) and apply for OOZOU? /wink
Ever heard developers said that they’re a ‘full-stack’? Knowing both client software (frontend) and server-side software (backend) will generally do just that. When you master the basics of how databases work. You may be able to create and made public (deploy) your own app/website with ease.
I recommend you start with finding popular Query Languages to learnregarding SQL or NoSQL. Find out what their core differences are and take your pick (or learn both!). You can even go ham with a concept of a RESTfulAPI and try out GraphQL to broaden your skillset.
You can also skip all that and start looking for a way to make public (deploy) your work. Many of the repository or host websites (SaaS) such as Github, Heroku, or even Amazon Web Services (AWS) offers a free (and paid) tier of cloud services that will help you deploy your website quick and easy following a few steps.
And that's it for my tips, you reached open waters now!
The following should realistically take you months to finish. At this point onwards, I consider what you’ve learned to reach a point of diminishing return. Especially if you’re looking for just a quick understanding of programming, there is going to be a lot of unnecessary stuff that you basically ‘don't need to know’ to further your current career path of a product designer.
But hey, It's pretty fun and exciting to learning new stuff every day and keep coming back for more! You know it in your heart that learning something is always a good habit to have in this day and age!
And as Steve Jobs once said, you never know when all this might come together in the end!
