Design shipped! My experiences from designer to developer handoff. Learning the importance to think as a developer about your own design work.

8 min readOct 1, 2019

This was my coding strategy! The plan of how to get to code that website.

This article is about me being a designer-developer hybrid for the past two weeks. The importance of a good designer-developer collaboration is so vital that we had a crash course into HTML and CSS within our UX/UI bootcamp. We switched roles from being designers to developers in order to learn the fundamentals of Web Programming and understand basic principles to build webpages and apps.

“Designers roles will get accomplish when we started collaborating & communicating with a multidisciplinary team of designers, devs, business people” -Jhony Vino.

This is so true! I believe that the role as designers are purely social and they are not completed till you get to collaborate also with the developers. But should you learn how to code to achieve that collaboration? Keep reading till the end.

This is the result of the landing page for the North-Sea Jazz festival I did code the HTML and CSS

The Challenge

The challenge for this project was to code (HTML and CSS) a website designed by one of our colleagues. So, I took the role of a developer to code the designs for landing page and mobile from designer Seline Valentgoed for the North-Sea Jazz festival.

The CSS code. I did not only droom about it but it really happened for real. Here is the prove!

Why should a UX Designer learn how to code?

If you are a UX/UI designer, code based programming is the main technology of this sector. So, no good UX/UI designer should be ignorant of code. Or at least conceptually, to know how the technology works in order to design something with it.

Everyone should learn to code

Personally, I think that it depends! But at leats, you should learn how to understand and read code!

I liked the experience learning HTML and CSS. I did manage the past 2 weeks to just think about code, even have dreams the whole night about it. And I’m still not sure if I should name them just dreams or nightmares, but I remember seeing myself sitting there just happy coding, but that happiness was kind of stressful because my mind did not want to get off. I’m afraid that’s what the lifestyle of a developer looks-a-like. So, I thought this could be maybe a sign for me! Coding can turn out addictive.

But, hey to code or not to code?

So, back to the statement if designers should be learning to code, this sounds to me that coding itself, it is just the goal, and I barely can picture myself thinking that my mission is just to write lines of pure Javascript. Just writting more and more code isn’t even something necessary, actually I have learned that is totally the opposite. And the world is moving towards that direction. That’s the future!

I totally consider coding an important asset to your design skillset, I really was very curious to learn about it and at least to understand the coding world, but I do have my focus on to solve problems in another scenarios. Even though coding is also about solving problems. I don’t advocate learning to code just for the sake of learning how to code. It is even worse to aspire to learn coding to name yourself an unicorn in the hunt for success. You are never be that unicorn anyway. Because it is never going to be enough. There is always more and more to come. Lately, I have even read on posted vacatures, companies asking for crazy tittles, that imply hybrid skillsets, not only about the typical unicorn but literally for a cruising between a pitbull and a labrador. What the *? Please only aim to be yourself!

So, do what you love, and get into code if you love it, not just for the hype of doing it, otherwise you are going to be that annoying person complaining about coding all the time and being disrespectful with the people that work with passion in this field. Because one thing that I learned this week is that developers can be people very passionated about what they do. And you should respect that and the way someone does his job.

Instead, I suggest that as a designer you start spending a lot of time on learning how to improve the designer-developer communication, how to get developers involved early with your work, telling your developer colleagues about what you are working on and asking them a lot of questions.

This was my focus during coding week. To get to understand the mindset and work of developers to can collaborate better with them. I was very lucky, because I got Laura Pascual as a teacher. She is not only very committed to her work but also very passionated about her role as a developer and she has also that extra skills to be very good at teaching, explaining and making yourself enthusiastic about coding. She excels at translating the programming world to beginners and specially to designers making a first encounter with coding. Seriously, I needed to ask a lot of questions to Laura to feel myself now more confident about coding, she helped me to achieve my goals but specially to get to know developers, from her I learned about how to think as a developer. I think that I got just what I needed to feel much more confident doing this kind of collaborations and I’m pretty happy with the result.

The brain of a “devigner” or whatever the most current label is for designers who code and do front-end development.

Communicating effectively with developers is key. Put yourself in the shoes of others. I learned the importance to think as a developer about my own work. You can achieve that only doing a lot of research to understand how the things around your work as a designer technically work at least a basic level, I think these are more important things and it should be enough for a successful design handoff.

What is a design handoff?

Handoff is the process of handing off the designed material to the developers so they can implement the design and make it workable. So the design handoff is that moment within the product development process where developers implement the finished design. But more often, this phase doesn’t go as smoothly as it should.

This is the result for the website I did code

Let’s discuss why this happens and how to prevent handoff failure.

What can go wrong?

Poor designer-developer communication. If you never talk that often to your developer before, just start breaking the ice.

Lacking a design system or consistency on your design. Your developer colleague is going to have a lot struggles in case you didn’t make your design consistent.

You didn’t get developers involved early in the process. Ask for feedback on time because finding out later that your designs are technically impossible to develop can represent a lot of costs and waste of time for you, the developer and the company.

What you need to focus on?

To learn the concepts around divs, sections, tags, elements, classes, flexbox and grid.
How the box model works, and how to float those boxes.
Get your Cheat Sheet bookmarked, or just print it out, to quickly find the elements you need.
I never though that paddings and margins could be so annoying! and crucial when doing CSS. So mind your paddings from the beginning!
Mastering CSS takes patience and lots of practice. So start practising to see improvements.
Get curious and explore interesting websites you have found with the ‘Inspect’ option to check their code. That way you also get to learn a lot.

What I liked the most about coding week?

Everything and the experience! From this experience I would always keep as a reminder to think about how others would have to handle with my own design work. This is something Nadia Garcia always explained and told to us during classes but I thought it was just because she was a developer. But only once you do something is finally when you will understand for real, how it is to be in the shoes of that other person that has to deal with your work after you think you finished. Because not, the work isn’t finished, when you just handed off your work to a developer, now it is when it is just about to get it started.

To get to know and work with the awesome teacher and developer Laura, that took the time and patiente to guide us thought this journey with the assistance of the awesome Nadia. Yes, here at Ironhack there are only awesome people!
I think that the pixels talk better than words, so have a look on my Github to see the results of my coding skills, I think I could not have done all this myself alone without Laura’s support.
I’m glad this project was part of the UX/UI curriculum. I take all these learnings with me for the future. We had again a great time!
And, I’m so excited and feeling that confident to start coding my own portfolio? I would love to if I get the time! ;-) After this weeks it does not seem that difficult. So I guess I’m able now to do it by myself.