Why streamlining workflows may be more effective than a new tool.
Whether in-house or agency, design teams have to work like clockwork when shipping projects on time and on budget. Over-communication between developers and designers is essential for success. It’s essential because it helps designers and developers get on the same page mentally about how projects are expected to look and behave.
Ensuring projects are developed as they were intended, has brought on a slew of new design tools attempting to make handoff stages more efficient.
These tools focus on creating efficiencies within the project handoff stage to reduce friction. It is evident in Invisions inspect feature which allows developers to see technical specifications within prototypes, Zeppelin which pulls technical specifications directly from sketch, and Framer X which allows developers to export production-ready React friendly code.
The problem with these tools lies in their focus on changing the end. When the focus should be on streamlining the means.
To help bridge the gap that often exists in handoff meetings, we should help facilitate streamlined workflows instead of promoting a new tool. Workflows that contain enough constraints to keep the designer focused but with enough flexibility to not limit the results.
By including subtle constraints within a design workflow, we can get closer to matching the constraints developers often face within development cycles. Doing so helps inform designers in the act of designing rather than being told by a developer later. Searching for the latest and greatest design tools might not always be the answer. Instead, why not try to add constraints to your design workflow that mimic constraints that exist within your team's development stack?
Adjust constraints. When people are on the same page, friction is reduced.
Here at Tennis, we wanted to increase the rate at which we could create and iterate early on in the design process. This stage being low fidelity wireframing. We also wanted to make it easier to communicate designs with developers in feasibility meetings and handoff stages.
Instead of looking for another design tool to help us with this, we decided to find a way in which we could augment a tool we currently use in the design stack. Doing so to help accommodate the way development works and understands design prototypes. This theoretically allows us to better align the mindsets of developer and designer without the added work of adoption.
In our development stack, developers utilize the Pure CSS library to provide the base for the front end of most of our projects. Pure CSS is our chosen method due to its flexibility, phenomenal documentation, and ease of use.
We thought it would be efficient if we utilized the same Pure CSS library—recreating the Pure CSS library into a sketch template—within our low fidelity wireframing stages. Theoretically, doing so would allow us to constrain ourselves as designers with a preset library to use for creating quick iterative prototypes that our developers will instinctively understand. Allowing us to focus on the user experience without the distraction of visual design creeping in and without the need for the adoption of a new tool. The result is a constrained but focused workflow that reinforces a focused state of iterative design thinking, within a design tool we already are familiar with. The refined workflow generates an end product prototype that developers will have fewer questions about in feasibility and handoff meetings.
Utilizing a UI library based on a framework already implemented in the development stack has its perks. Low fidelity prototypes that utilize Pure CSS UI elements to communicate their affordances help designers communicate user interface functionality with developers with less confusion. Not having to interpret how the prototype works and rather just instinctively know cuts out a lot of the friction that generally occurs in feasibility meetings.
This methodology helps mental models become aligned between designer and developer before the handoff even happens. This can lead to less time in handoff meetings and less time spent on front end quality assurance.
But we didn’t want to be the only ones to benefit from this Sketch library, so we included a link to download it! We would love to hear your thoughts and opinions.
Download The Pure CSS Sketch Library
Download Pure CSS Sketch Library here
