Skip to content

Demystifying Code for Designers

The more I think about it, I spend most of my time, as part of Team Sketch2React, demystifying code for designers. I think it’s because this is exactly what Fredrik Ward has done for me these last two years.

When we first started working together code was a total mess for me. I had struggled for years and years trying to find the right angle. Something that would open up my brain to a higher level of I-don’t-know-what actually ?

I started countless of online courses about HTML, CSS, React, Swift but never ever finished one of them. There was nothing hooking me up, nothing that actually got me excited about learning code.

I couldn’t connect the dots.

Since I’m a very visual learner being a designer, it needed to be a combination of design tool plus code. Lucky me then ?

People who don’t know me, when meeting me for the first time, actually think that I’m a developer and not a designer. It’s really weird to me since I don’t see myself like that. I have been a designer for so long (25+ years) it’s become an essential part of who I am. I guess I have evolved. ?

I actually wrote about 5% of this, the rest is S2R ?❤️

Connecting the dots

It’s all about context. If you can see what code looks like and at the very same time look at it visually, you will ”get it”. It’s not just about seeing the structure behind, it’s also about investing time to actually manually build things.

I would not have learned this much about code if I was using some kind of visual-to-code-wizard that translated my layout and design into workable code automagically. Not in a million years.

So by Sketch2React forcing me to live by a certain amount of rules, I feel like I’m really building something meaningful here. It’s known as the IKEA effect.

That of course gets amplified since I’m also 50% of Team Sketch2React and we develop design to code tools.

If I get value by using my own tools I know other people will probably too. Which is amazing and one of the things that keeps me going, writing even more articles, doing even more tutorials. Lots of work but I love it.

You will never, ever hear these words ever again

”Naaaah man that can’t be done, it’s waaaaaay to complicated”

Okey honestly first of all, I really have to think really hard to even remember when I heard that phrase the last time. I have been working very close to skilled & ambitious developers for a very long time, maybe it’s that. Maybe I’ve just been lucky over the years. Maybe I’m just a big pain in the b*tt and people tend to give up and do what I suggest? That I can believe. ? ?

But I know this happens and often it’s not about the technical limitations but due to the fact that your dear developer has better things to do, than trying out that fancy new animation thingie you just suggested. Or that weird sticky bottom bar nav you keep, annoyingly, talking about ALL THE TIME on every single coffee break. Every single BREAK. ☕️

Don’t get stuck in your pre-made roles

A theory here.

I think most times designers don’t venture into experimenting with code because of the pre-made roles we have.

I’m a designer so I design stuff. We have these developers and they develop stuff.

For real? Are you really going to let that stop you from having some fun in a project? Okey I admit, what I think is fun is of course very subjective…

I say this from my own experience. Just do it. People will be happy that you take things further, that you experiment a bit. Don’t be corporate zombies ?‍♂️

What are you afraid of? Rejection? We all are, but it’s just a part of being alive and human.

But be clear about it. You’re building prototypes. That actually can be used in production, but don’t let your PM know that. Just keep that between you and your developers.

The fine art of talking

Yes dear reader, talking is something we designers are REALLY good at. That’s because we’re used to other people scrutinizing & critizing our work all the frakking time. ??

Suddenly EVERYONE is an expert on color, form & function and do the UX please yes (HOW HARD CAN IT BE?!). And WHY IS IT TAKING SO MUCH TIME!!!???…

The developer in the team says something like “it’s going to undermine the performance of the website” and everyone just accepts this as a fact. See it’s really difficult to argue against things that you don’t understand.

Your team will ❤️ you

Here’s what you need to do; build it yourself with real code and show it to your team.

Chances are, they will see what you see and you’ll inspire your team to take things a bit further code-wise than before. Of course you will not always have the luxury to spend a couple of days doing real code prototypes, but from time to time these windows open.

Go get them tiger!

Leave a Reply

Your email address will not be published. Required fields are marked *