If you work in anything related to software then you’ve heard of Agile. It’s a methodology that emphasises a ‘just enough’ approach. That is, just enough to get to the next stage of a product release which in theory includes no or very little documentation.
Agile teams are meant to work closely together and old processes like handing over work from designers to developers are rejected and called names like waterfall. At least, so the theory goes.
Agile: Theory vs reality
In my experience (and in reality) there exists a chasm between design and development that can’t be crossed by simply working in the same room with your colleague who has a different job title.
I’m a user experience consultant with deep skills in visual design. A large portion of my role is dedicated to designing interfaces and interactions for digital platforms (websites, apps and the like).
These days, my design process isn’t as linear as it used to be. An openness to iterate frequently means that deliverables move forwards, backwards, diagonally and sideways during the life cycle of a project. In order to keep up with this, a team must communicate early and continue to communicate often.
Sometimes, talking isn’t enough
This isn’t practically done by swapping pleasantries at the water cooler and has necessitated the creation of design artifacts that explain layouts and interactions. Without these artifacts products can easily mutate into a Frankenstein that doesn’t align with design aspirations nor user’s needs.
Don’t get me wrong, I’m not advocating for documentation. It’s the least fun part of design, but despite what’s espoused in the Agile manifesto, it’s proven to be a necessary component of executing well-designed product. … At least that was until Zeplin came along.
Introducing Zeplin
Zeplin is a new collaboration tool, and before you scoff and think ‘yeah great another real time design collaboration platform is just what I need’, note that Zeplin is designed as a tool for designers and developers to communicate. Created by a small dev and design team who needed to ‘scratch their own itch’ (eww!), Zeplin is proving to be a game changer around the DiUS office.
It’s a tool that integrates with Sketch, a design package that designers like myself use to create wireframes and mock-ups of websites and apps and other digital products. Traditionally designers would provide documentation to accompany designs to describe the design in the language the developers can interpret into code. This sort of documentation has a history of bloating the design process and the potential to slow down the design process and product development as a whole. With Zeplin however, the whole process is streamlined, with just a click designs are exported to Zeplin where team members can view designs, get specific detail on sizes, colours, and fonts without out any extra preparation from the designer. And because everything is stored in the cloud, everyone can access the most up to date and current designs.
The benefits we are all experiencing;
Developers
- Any changes to a design happen in real time, there is no need to question or track down the most up to date version.
- By simply clicking on a design element developers are able to get details needed for creating front end code.
- Elements are marked up in a language developers understand. CSS can be exported the developers can use
Designers
- All comments are housed in the one spot, not need to sift through notes and feedback channels to find the most recent feedback.
- Style guides are always up to date. I’ve found that this compels me to keep my designs cleaner.
- And, perhaps most importantly, I’m a much happier designer because I no longer spend days writing documentation.
It’s a win for everyone because there is a clearer understanding of what the latest designs are. Everyone is working off the same page. And, less time is spent in meetings and more time working on getting the job done.
The next steps for Zeplin (I hope)
Clearly I’m a big fan, however there are a few things I’d like to see in Zeplin’s future updates.
1. Assign Status
Assigning a status to a layout would be a nice feature. For example ‘In progress’, ‘For review’, ‘Ready for dev’. And the ability to mark a status as complete.
2. Presentation mode
Full-screen preview, or some way to mimic how the page would look in the browser for showcasing to stakeholders.
3. Archive / History
The ability to look back at earlier versions of the designs and past notes associated to it.
4. Clickable hot spots
This one might be a bit of a stretch given the purpose of Zeplin is not to be a prototype. I have however observed on a few occasions team members try to click on a nav item expecting it to link to the appropriate page.
So to that itchy dev/design team from Zeplin, if you’re listening – great work so far. I hope to see some of these changes in your next release so I can remain your biggest fan.
Images for this blog taken from: Zeplin.io