You’re Burning Budget on Design: How to Save Time and Money with Modular Design

Joe Toscano⚡️
Nov 19, 2015 · 8 min read

Meaningful Communication Matters

One of the biggest problems I experience when working with another designer, or team of designers, is the handoff. When I need to take over someone else’s work, it’s not uncommon for the design to lack organization. At best, the design might be organized the way whoever handed it off to me prefers to work. Time wasted translating the design into something I can understand and work with becomes a deficit in the company’s bottom line.

What’s stopping us from doing this as designers?

Screen Flow

First, it should be considered that (for the majority of us) anyone you hand your designs off to reads left to right and top to bottom. If screens are scattered everywhere, you’re leaving it up the person that takes over to understand the flow you have set up. By creating a visual walk through, you make the hand off a much smoother transition.

Naming Artboards

The same goes for naming your screens. If you leave the names of your artboards up to Sketch, the learning curve is steeper for the person you hand the project to. Typically I name my artboards along the lines of:

Ordering Layers

Let’s not forget about layers. Similar to your screens, things speed up exponentially when your layers are organized. I order mine alphabetically so whoever I’m working with essentially has a index for the project.

Modularity Decreases Production Time

Along with proper naming conventions and organization, creating modular designs using symbols will allow you to gracefully cross the finish line. Think of it like Object Oriented Programming for design.

Build to Make Life Easier

We already know screen sizes vary. Not just phone to tablet to web, but even within each platform. And sometimes the pain of design isn’t even in building the responsive screens. Sometimes things just need to change even though you thought you were already done. As much as we’d like it to, design doesn’t always happen linearly.

Organization FTW

I first learned to think about organization this way when I was working at Made Movement. The lead devs at Made made me keep my style attributes in alphabetical order so my code was easier to review and work with, in general. At the time I thought it was total overkill — Total dev move.

Truth in Trial

Whether you’re working for clients that have deadlines or you’re creating your own business, time matters. Modular code saves you time, which saves you money. Don’t waste your time (or money) creating designs that aren’t fully thought through anymore. Start making your designs more organized and modular today.

Resources

As I mentioned in my previous article, I typically use Sketch and Sublime Text 3 to create. Here are some plugins and assets I use to help me keep my designs modular:

Atomic Boilerplates

Similar to an HTML boilerplate where all the essentials are already created for you, I’ve created a few Atomic Boilerplates with Sketch. All the atoms within the document have already been turned into symbols and are ready for you to start building with. Enjoy!

Sketch Toolbox

Sketch Toolbox isn’t a plugin, per se, but it allows you to very easily install and uninstall any plugin you could dream of. Unless you enjoy copying repos, downloading and manually installing plugins or checking out the source code directly, I don’t know why you wouldn’t use this.

Style Inventory

The Style Inventory plugin created by Florian Schulz is the most comprehensive style manager I’ve been able to find. Want to find a layer by color? How about border color? Text style? It can do all of that and more. It will also create a style guide for you to hand off to your developers, if you‘re into that.

Find and Replace

Similar to your Find and Replace in a text editor, you can use this plugin to find any word, or combination of words, and replace them all at the same time. Great for modifying text based elements across your design.

Sort Me Sketch

Keep your artboards and layers in order without having to arrange them manually. Pretty self explanatory. Life saver.

GitHub for Design

I’ve been talking to a lot of people lately about the way I work and the question I hear most is how to stay organized across your team. What happens when symbols change in one file and those changes don’t extend to the files on everyone else’s local machine? What do I do then.



RE: Write

Thoughts and stories from Studio, a product design masters program at CU Boulder, dedicated to re:working, re:designing and re:imagining the world of design and technology.

Joe Toscano⚡️

Written by

Founder, designgood.tech // Contributor, @smashingmag @adweek @invisionapp // prev XD, @rga @google. Changing the world w/ a smile, design & some code.

RE: Write

RE: Write

Thoughts and stories from Studio, a product design masters program at CU Boulder, dedicated to re:working, re:designing and re:imagining the world of design and technology.