For many designers, the best way to learn front-end development is on the job. A lot of companies want to attract designers who code, but many fall short of providing enough support. Similarly, many designers who could code don’t do it in their jobs – not because they don’t want to, but because their workplaces don’t take any steps to support them. So what helps turn a workplace into an environment that empowers designers to code?
THE RIGHT ENVIRONMENT
At Etsy we get new employees set up to contribute code as part of our on boarding process. Designers go through a tutorial in their first few days and push a small code update to Etsy.com. To do this they have to set up their development environment and understand our process for deploying. From this point on there is no barrier to them coding on production. Regardless of your workflow, teach new designers your development workflow early.
There’s usually a lot more to learn than just how to set up a development environment. Pairing designers with different team members throughout the process gives them a wider support network, and helps them start building relationships.
It’s harder for new coders to build up confidence if they are afraid of breaking things. While services like CodePen can be great places to practice coding, it’s better if designers can work with the same code they’ll use on production. Most organisations use Git for version control. Git branches are a good place to experiment with production code while keeping it away from the main codebase.
At Etsy, we set up sandbox environments for prototyping design, using the same style guide we use on production. These make it easy for designers to explore layouts in the browser, and can be used as a replacement for design tools like Sketch.
DOCS AND TOOLS
Documentation allows people to be autonomous, but can be hard to keep up-to-date. There’s no silver bullet, but you can reduce discrepancies by building documentation updates into other processes. Updating documentation when you update code is a good practice to follow.
Use routine events such as training and on boarding to review documentation. Make it your process to check through material before running a session, make notes of issues as you run the session, and ask for feedback afterwards. Tooling can make designing in code much more enjoyable. As your engineering team grows, it’s likely you’ll start to build tools that help with your development workflow. Consider how they might also help designers.
Make it easy for designers to see when their code impacts the UX and they’ll start to learn better practices. At Etsy we have a toolbar that shows us information such as page performance and accessibility issues. It’s highly visible, so everyone can see if they’re impacting the quality of the product while working on the site.