So I’ve recently started working as Head of Design at a digital studio called Numiko in Leeds. I’ve been invited to the team to raise the quality bar and streamline the design process. From the outside looking in they have a pretty nice looking portfolio and the work was way more useful and cultural than the marketing lead work I did previously. This was the main draw for me but it was just time for a change - I like change - be that keeping on top of new programs that speed up the job or new locations to explore.
The design and development team set up
So one of the first things on my list was to see how the design team was working at Numiko and how they collaborated with the rest of the team. As you can imagine this was a bit of a suck and see process. I just wanted to watch how the whole group worked together. First impressions were good. Admittedly very different to my last place, The Neighbourhood, as the digital team was much bigger (5 at the 'hood - 20 at Numiko). Mainly just a lot more developers and a clear split between front-end and back-end whereas I was used to working with developers of the full-stack variety. The company has a much more developer centric attitude that other places I’ve worked which is great in some ways; as I feel I’m at the helm of a starship with a tonne of awesome engineers, and bad in others;
The design workflow
The designers use Photoshop. I haven’t used Photoshop to design since…. When I worked at De-construct about 7 years ago so this was going to be fun. At some point when I was freelancing, and continuing at AllofUs, I moved to using Illustrator to design. It was (still is) faster and art-boards happened to be super useful. The design to developer handoff process wasn’t as smooth as it could have been - talk through designs and hand over PSDs. To be honest its pretty standard way of working in the industry although I think now we have better tools for the job. Presenting to clients was also a bit sluggish PNGs > Basecamp > Skype + producers & clients adding comments. Quite hard to keep track of whats going on and can be open to interpretation as clients can be looking at the designs in whatever image viewer - maybe not at 100% - not understanding the feel of the website etc.
Where does Zeplin fit in the workflow?
I’m a big fan of working in Sketch, designing at speed, with many eyes on the work (developers & client) to reduce the time spent designing unwanted things. I wanted to introduce, and enhance, the workflow out that I’d developed at my last company: Design in Sketch. Send clickable prototypes to the client in Invision. Provide Invision to developers and give them Sketch files to pull design details from - or if I have time produce a style guide of some description (not very often sadly). Sketch is a load easier for front-end developers to use than Photoshop - its been built from the ground up with these things in mind. The only problem was that half the developers work on Windows at Numiko and Sketch is Mac only. I needed a way of translating this work into something useful for those guys - after a quick google I stumbled onto zeplin.io which looked ideal. In fact it looked better than ideal - it was going to further streamline the process. After a quick test we cracked straight on and started a project with Zeplin being used to create a more developer friendly design environment.
Things I am loving about Zeplin
- Being able to create a style guide of all the elements and see little inconsistencies in typography and colours. If I’ve create a couple of type sizes or colours that are almost the same I’ll try and merge them - and if I can’t I know why. Its not just a designing fast oversight.
- Being able to update a design, sling it into Zeplin, and have the team updated via Slack. This although at the start of the project can be a bit OTT in Slack its a huge time/mistake saver nearer the end the project. Trying to keep a small team updated of every small tweak is hard as I don’t want to spoil their working flow. But if the client, producer or developer asks a question about something, I can modify the design and upload it and its ready to go.
- Seeing the relief on a developers face the first time they open Zeplin and see all the code neatly written up for them to grab. Yeah its not perfect and will require work but its just saved them a day open and closing various Photoshop files looking for type sizes and line heights, spaces between objects etc.
- A single point of truth. The Zeplin project area is the place the team go for the latest designs. Not the server for Sketch files or PSDs. This is a huge benefit. I’m not sure how other companies create projects on their servers but I’m yet to see one that is minimal enough to be easy to use. They are generally over convoluted and a pain the ass.