How my deeper understanding for code has elevated and is taking me to places I never thought were even possible.
Code. Ah yes. That four-letter word that holds so much power. And to be honest; fear. Because we/I fear what we/I don’t understand.
But when you realize that the only way of climbing further up that imaginative ladder in most companies is becoming a manager, sit in endless meetings and only use Microsoft Office for the rest of your miserable life the prospect of learning more about code suddenly feels really important. Please managers take no offense I’m happy for your sake, it’s just not my way to work-happiness.
? A bit of background to this story
I have been building websites with WYSIWYG editors for more than 15 years. Started with DreamWeaver in 1999/2000 and used it for a while but was always really frustrated. Then I discovered another weaver, (RapidWeaver) in about 2011–2012 I don’t remember well (I’m old get over it). But I always felt that nagging feeling. Me talking to myself: ”-You should learn how to code or you will get a pile of ? thrown at you, you will get unemployed and your children will suffer. Also their future children will become mutants.”
Yikes.
So, I tried to learn code. Didn’t go so well. Uninspiring tutorials, even more uninspiring design examples/assets that came with them. I care about stuff like that you know.
? Then this happened {in no particular order}
• I discovered Design+Code – Finally, beautiful design together with great content. It’s more than a course, it’s a whole learning platform and they keep on adding new content on a regular basis. Highly recommended!
• I started learning how to animate with Keyshape. Keyshape is really simple. But when you want to input your exported code-friendly animations and have them behave nicely in RapidWeaver (or other framework) you will need to do some editing to your code. Very small edits but some. So, I learned.
• I got a really great developer friend whom I ask a lot of questions (poor guy, luckily he’s like the most patient dude in the galaxy).
• I started writing stuff like this article. See I’m a designer, very visual, not used to words. And you know where else you type a lot of stuff. C-O-D-E. Yup.???⭐️
• I started Designforventures.co as a side-project
– Which led up to releasing stuff like a free pre-animated SVG-alphabet. See? Coooode.
? Tips for designers
• Learn while working. Say that you are designing a website or an app or whatever that would really benefit from a couple of animated thingies. You don’t need to have a degree in motion design to animate an icon. Just watch my tutorials (ha! got ya). Or other people’s tutorials they also have great ones.??
• Ask a lot of questions!
• Experiment with apps like Keyshape, Haiku, Framer that (in a way) forces you to get a better understanding of code
• By getting a deeper understanding of how code works you will get even better at your own job as a designer.
• Your dev team will get a lot happier and a happy dev team is stellar for the final output, trust me on this one
• It’s really empowering to be able to build your own prototypes with real code. The key thing is to know when to code and when to use simpler prototyping apps like Flinto, InVision, Marvel etc. I read a great article about it here.
? Afterthoughts
I love being a designer. I will always love crafting things together that actually makes sense and helps other people do their work better. But by getting closer to the code I’m in fact becoming even better at my job. Which is crafting beautiful and meaningful user experiences.
Important! I’m not trying to convert all designers into developers, god no. But I think that we need to work much closer to stay relevant ?
Wow thanks for reading this far!
Now a little something ??
? Just one more thing
Me and my friend Fredrik are working on a really cool thing. Basically it’s Sketch to React. Right now it’s just for building prototypes that live on your computer but we don’t want to stop there. The cool thing is; it forces you as a designer to think more like a developer. It’s not magic. You will need to follow certain structures inside of Sketch for it to even work. You will need to learn a very basic version of Atomic CSS. Trust me, it’s really simple. I learned it ?
Our goal is to be able to copy/paste the code generated like this into a real React application or website.
Disclaimer: We don’t know if this is ever going to be released to the public or if we even succeed with what we want to achieve. Keep you posted as they say.
????? Edit: We created a very simple workshop website for our project where you guys can sign-up to be included when we roll this out to more people.
?
