Responsive design workflow in Sketch
Scattered layouts and inconsistencies: responsive design can be a pain. To ease it, we're working on an effortless, automated workflow – and we’ve already got the first plugin ready.
We’ve all been there at some point: you’re designing for multiple screen sizes and you’re getting lost in the chaos of all those different screens, text styles and symbols.
At November Five, we’ve been trying to solve this issue for quite some time now. Many of our projects keep things fairly simple: we often only need to design for two breakpoints, or involve a straightforward one-pager where the amount of unique screens is limited. This makes it more than doable to maintain text-styles and symbols throughout the project.
But when you’re designing a 200+ page website, for 5 breakpoints? Then it gets messy. Very quickly.
Of course, prototyping layouts solves some of those issues, helping you spot problems in time, but the main goal of prototypes is still just to validate a design system up front.
Let’s describe our issues in some more detail – they’ll probably sound familiar…
Scanning for inconsistencies
Most of the time, we work in duos: one UX designer, one UI designer. However, this approach can make it hard to spot inconsistencies quickly when you’re creating various stages of a project simultaneously. Something can seem small, but then cause all kinds of problems during development. As an example, the grid might have an unforeseen issue, or a spacing may have been defined differently on a specific breakpoint.
Spotting such differences between breakpoints can be very time-consuming.
Multi-file vs. single-file approach
Then there’s the added difficulty of having multiple files. Usually, we would create a file for each device we design for. For applications or dedicated platforms, this approach works well. However, when you’re designing a responsive application or website, this only seems to scatter your project into oblivion. That’s why we have been shifting things around lately, reducing it to a single file for all design work and another one containing all wireframes.
Solutions: the bigger picture
Now, we don’t believe in preaching, and we’re still finding our ideal flow ourselves – but we have been thinking about where we want to go from here.
For one thing, Sketch and Anima introduced a few interesting constraint options that will easily let you scale or reposition a design. This is a huge step forward! However, it doesn’t solve our screen management and inconsistency problems. Not everything can be a symbol and sometimes specific reworks needs to be done.
Since recently, we’ve made sure that our development team has some dedicated time to work on plugins for our design team. We’re now in an exploration phase, testing some smaller setups and workflows – after all, we have some cool ideas, including automatically generating specific screens that match our current design work.
A few ideas we’re thinking about:
- Auto-generate flexbox and fixed grid structures
- Layout transformation of a specific breakpoint
- Template generation for project defined breakpoints
Meanwhile, plugin time!
While experimenting with the ideal flow to design for responsive layouts, we found that we could build one simple sorting plugin to already solve a bunch of our headaches.
Since we’re now designing in a single file, we can easily represent our artboards any way we want. This is useful because sometimes you want to focus on a single feature and compare it on all breakpoints at once, whereas other times you would like to view the entire project or a single flow on a specific device or breakpoint.
The plugin we’ve developed lets you sort your artboards on both of these representations, making it easy to switch setups.
How it works
First of all, we have our own way how we name our artboards here at November Five. All artboards are named using the following convention:
Breakpoint-Section-Screennumber-Screenname. I.e.: x-010-020-Homepage or m-250-013-Searchwindow-empty
This allows us to use the artboard naming for sorting. We offer two options:
Sort on section (shortcut ⌃⌥⌘C) This will sort your screens based on the section numbers, making it easier to group layers within a flow or section. This way you still get an overview of a flow for all breakpoints you’re designing for.
Sort on device (shortcut ⌃⌥⌘X) This mode will sort screens by grouping them by breakpoint first, and section second. This makes it easier to view all your Desktop screens at once.
Of course, this is only the start! We’ve got some more stuff planned for this plugin…
- We’re still having minor performance issues with large projects (250+ screens) that we need to solve
- Mobile screens tend to be longer than their desktop variants, so we want to fix the way we view those.