How to Create Killer Design Workflows and Save Bundles of Time

Killer design workflows

While smaller websites and apps still need a certain amount of attention, designing on a larger scale can be especially challenging and time-constricting. Every case is different ? it depends on the complexity of the design and the size of the team ? nonetheless, this is my ultimate workflow as a Sketch user who designs user interfaces. Don't worry, they'll be lots of room for flexibility where you can swap-in your favoured tools!

Start by Sketching Ideas and Iterating Quickly

Quickly spin out random ideas using pen and paper, and keep iterating until you end up with a layout (or several) that makes sense to the user. If you put some time into this step, you’ll save a lot more further down the road when you're mocking up the design in Photoshop or Sketch.

Sketching with pen and paper

Organizing Folders and Files

  • Sketch files: keep your Sketch files backed up in the cloud. I keep all my files in iCloud, but Dropbox or Google Drive will work fine (or Creative Cloud for Adobe users).

  • Icons: store these in the cloud too, and use IconJar for quick-access.

  • Fonts: SkyFonts is a terrific way to manage fonts on your system, and also to download Google Fonts directly to your local computer.

  • System backup: do weekly time machine backups (or the Windows equivalent) on external hard drives, because clouds can sometimes become inaccessible due to bad internet connection or loss of data (attacks/hacks, etc).

Have Your Plugins Ready

Before you dive into designing with Photoshop or Sketch, you should spend a few minutes setting up your workspace so that your design process remains uninterrupted throughout. If you can organize your workspace well enough, designing becomes a breeze. Think about the issues you keep encountering, the things that slow you down, and search for plugins that can help you overcome them.

Here are the plugins I use in Sketch.

  • Craft: Craft allows you to quickly populate your design with realistic-looking content such as names, dates, article headings, images from Unsplash, and much more, so that you can focus more on the design itself. Say "bye bye" to lorem ipsum!

  • Sketch Runner: Sketch Runner boosts your productivity by allowing you to type out your commands (think macOS Spotlight for Sketch). Great for when you can't remember certain keyboard shortcuts or when you need to access nested menu tools!

  • SVGO Compressor/Bitmap Compressor: both of these are official Sketch plugins used to remove unnecessary data from SVG and bitmaps images respectively. The end result is a readable, compact SVG file or a bitmap file (JPG/PNG) optimized for the web.

  • Rename It: Rename It helps you automate the process of renaming layers to keep your Layer List organized. Your developer and future-self will thank you for this, trust me!

  • Sympli: and then of course there's the Sympli Plugin for Sketch (available for Photoshop too) that lets designers handoff designs with ease ? more on that in a bit.

Organizing Screens Into Pages and Artboards

When designing websites, use Pages for each individual webpage, along with its variations (i.e. what it looks like at different screen sizes, what it looks like when scrolled or interacted with). When designing apps on the other hand, you can show the user flows horizontally and alternative versions of the same screen vertically.

Regardless of what you’re designing though, keep Symbols, style guides, and wireframes on their own Pages.

Tip: if you're using Sympli you can tag Artboards in Sketch to specify the order in which they're handed off.

Organizing Pages and Artboards

Organizing Shared Styles and Symbols

Shared Styles and Symbols are a brilliant way to keep designs consistent, but even they need organizing.

Shared Styles

Shared Styles encourage a unified design language as well as speed up your design process. These are very ideal for headings, backgrounds, etc ? anything you'd reuse.

Modular Symbols

Since Sketch introduced nested Symbols it's become best practice to create small reusable components as Symbols and use them inside bigger Symbols to make up larger components ? this helps to reduce arbitrary Symbols, keeping your Symbols workflow clean.

Symbols and Shared Styles

Communicating With Your Team

Communication should be thriving during the beginning, middle and end of your overall team workflow. Slack a useful way to go about it because it integrates with so many other apps, bringing your tasks, files and even designs into the context of the conversation.

Most of the apps mentioned in this article (Dropbox, Sympli, etc) integrate flawlessly with Slack.

Handing Off Designs

And finally there's the design handoff. Sympli is useful during all stages in the design workflow ? for requesting feedback or for delivering final specs to developers. Plus, Sympli has extensions for both Android Studio and Xcode, so it fits in with the developers workflow too!

Conclusion

It's not about the tools that you use, it's about how you use them. Google Drive isn't better than Dropbox for example, switching between one or the other won't make automatically make a difference to the efficiency of your workflow. It comes down to your individual preferences.

As long as you can identify majority of the speed bumps ahead of time, you should be able to craft a killer workflow in no time. It's a trial-and-error process.

What does your workflow look like? Send us a tweet to let us know!