I recently wrote about how to make your designs as modular as your code. As I explained in the article, Atomic Design is an incredible way to create designs that can be replicated and communicated easily across your team.
Along with increasing your ability to communicate within your team, modular design also makes changing styles across your design incredibly simple. Done properly, modular design exponentially decreases your production time
and increases your bottom line.
“Done properly, modular design exponentially decreases your production time and increases your bottom line.”
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.
But it doesn’t have to be this way.
On a good development team, code is created to be handed off. Developers use best practice techniques, such as Block, Element, Modifier (BEM) syntax, to create clean, maintainable code that can easily be handed off and taken over. While there’s no denying you still have to play with the code to truly understand it, the learning curve isn’t nearly as steep because the person who created the code had you in mind while developing it.
“On a good development team, code is created to be handed off.”
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 who takes over to understand the flow you’ve set up. By creating a visual walk through, you make the handoff 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:
Board Name v0.0.0 — Modifier [Event Name — Modifier]
Essentially BEM for design. Sometimes I name my layers as well but, as you can clearly see in these examples, I don’t always. Here are some examples of the way I name things.
Obviously without animation it’s hard to visualize an event, but if we create an understandable flow with descriptive labels, we can make it easier to piece together. Here are some artboards that demonstrate events.
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 an index for the project.
I don’t recommend doing this manually, as it can get tedious. Download the Sort Me Sketch plugin and it’ll do it for you.
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.
“Design doesn’t always happen linearly.”
Designing demands a dynamic workflow, but all too often our design files and assets are static. By turning your elements into symbols in Sketch your workflow becomes much more dynamic.
Modular design helps negate some of this pain. When we make symbols out of the modules we design, it’s easier to make changes across a project. When we build modular styles and elements that are kept descriptively organized design stops being work and becomes a breeze. Change a variable in one module and watch it change across your project. Beautiful.
“For a more dynamic workflow, turn your elements into symbols in Sketch.”
I talked about why symbols are important in my last article, but you don’t truly realize how much creating symbols helps until you‘re working on a project with too many screens and layers to count. Make life easy on yourself—start using symbols in your designs.
Organization FTW
I first learned to think about organization this way when I was working at Made Movement. The lead devs there 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—a total dev move.
Then they asked if I’d ever heard about how Van Halen made sure everything was done right.
During their 1982 world tour, Van Halen had a stipulation in their concert contract that said the venue must provide them with a bowl of M&M’s backstage—but all brown M&M’s had to be taken out. They made this request because it showed how much the person managing the show paid attention to detail.
The idea was that if their manager couldn’t even handle a simple task like removing the brown M&M’s, how could you trust that they paid enough attention to other details? Van Halen would have the stage, the lights, and any other important variables double checked to make sure they were paid the attention they needed.
Hard to argue with that.
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. Start making your designs more organized and modular today.
It may feel meticulous and unnecessary at first, and I can understand your feelings, but when this process becomes a habit you’ll thank yourself. And so will your team.
“By creating descriptive, modular designs you’re extending user experience into teamwork.”
By creating descriptive, modular designs you’re extending user experience into teamwork. And only great things can come out of that.
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.
Sketch 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
Sort Me Sketch keeps your artboards and layers in order without having to arrange them manually.
by Joe Toscano
Former Experience Design consultant for R/GA at Google, Joe now runs a 501(c)(3) non-profit called Design Good that is working to make the Internet safe and re-establish trust in consumers. If you want to keep up with what he's doing outside of InVision, email him at joe@designgood.tech or follow him on Twitter or Medium!
