Designing at 1x
The Ideal Product Designer’s Workflow
It was only about a year ago that I made the full switch from Adobe Creative Cloud to Sketch for UI design, and a bit later that I came to what I think is the ideal design workflow for a product designer and design team.
As a product designer, it’s critical to work as quickly and efficiently as possible, especially when considering multiple platforms at once.
I began to explore solutions to work as effectively and quickly as possible after being fed up with bloated PSD files with more layer comps than I could count. This became even more painful when designing for varrying screen sizes and densities across platforms. With Sketch’s artboard and vector system, I saw productivity increase by almost 2 times.
After doing some research and talking to a buddy of mine over at Google, I was finally convinced that designing at 1x would be the solution to many of our problems.
What did this transition look like? Well first of all, the majority of our current designs were in photoshop at 2x for web and iOS, and sometimes 3x or even 4x for Android. This meant asset sizes were all over the place with source elements tracing back to Illustrator and PSD files depending on the platform or feature.
After making the switch, designs all took place in the form of Sketch files at 1x. To supplement we soon had a Sketch sticker sheet that anyone of us could use for new designs or product ideas, maximizing on efficiency.
So where do I start?
Before doing anything, I make sure everyone has “font anti-aliasing” turned off (un-checked) in their Sketch preferences. Otherwise, type looks terrible. I won’t get into why, but trust me. It does. (Updated: This is no longer an option in Sketch’s latest update.)
Create 1x Canvas Sizes
The end goal here is to take advantage of Sketch’s vector system, which allows the re-use of elements across multiple platforms and utilize its fantastic exporting system.
Our canvas sizes are as follows:
- Desktop: 1440 x 900
- Web: 1440 x 900
- iOS iPhone 6: 375 x 667
- Android Nexus 5: 360 x 640 (mdpi)
Porting and Creating Designs
For us, we had a handful of designs in PSD format that we needed to port over to Sketch. Because we were designing for high density screens, many of our designs were in 2x and sometimes upwards of 4x for Android designs. Unfortunately, for many, you’ll have to redraw assets. For others it’s possible to take advantage of Adobe Illustrator for vector assets and copy, paste over to Sketch.
Before redrawing everything, start with the PSD designs that is either most complete or has the most assets. This will allow the re-use of elements along the way as you begin to fully convert over to Sketch.
For the case of Android, I converted Nexus 5 xxhdpi (1080 x 1920) down 3x.
Create A Sticker Sheet
After designing core product screens in Sketch at 1x, it’s time to make a sticker sheet that will allow the re-use of UI elements for other pieces of your product either right away or down the road.
Our first versions of the sticker sheet was more web centric. But as we continued to design, our sticker sheet began to evolve with sections for each platform. This is extremely helpful for brand and style alignment.
Use Symbols and Shared Styles
After establishing the product design language and sticker sheet, one of the best things we took advantage of is the Symbols and Shared Styles in Sketch
Symbols are used for a group of layers that define a UI element. The equivilent might be a layer comp in Photoshop, except applied to a group of layers. This is extremely helpful when you’re dealing with multiple states of UI. An example might be signed in/signed out states of a header, or play/pause controls for video.
Shared Styles are useful for single layer items, such as typography or shapes such as a divider in a side tray or transparent overlay for a sheet.
Using both Symbols and Shared Styles, takes many of the questions a designer on a team might have out of the equation — “What’s the font size I use for a heading and sub heading again?”, “What is the spacing from a header to body?”.
Conclusion
Designing at 1x and using Sketch has improved productivity drastically. Not only has been it helpful for sharing assets and styles across platforms, but it has also allowed us to forget about the complexity of varying screen sizes and densities and focus on building good product. Of course, no tool or workflow is perfect; however, I’d say this particlar one has been ideal.
