You’re Burning Budget on Design: How to Save Time and Money with Modular Design
I recently wrote an article 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 will exponentially decrease your production time and increase 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 that created the code had you in mind while developing it.
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:
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 a index for the project.
This can get tedious if you do it manually. I don’t recommend doing this manually. Download the Sort Me Sketch Plugin that will 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.
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.
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 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.
Then they asked if I had ever heard about how Van Halen made sure everything was done right, which I hadn’t.
Apparently Van Halen used to ask for a bowl of M&M’s before shows and wanted all the brown M&M’s removed. Not because brown M&M’s were disliked, but 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 anymore. 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. 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.
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.
Again, all of these plugins can be installed using the Sketch Toolbox, which I highly recommend. But if you’re that other kind of person that likes to peek at the code, feel free to click through the links to each plugin and check them out.
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.
I’ve found a few ways to solve this, or at least make it easier, but none of my solutions are end all. However, a company named Protein.io may be solving our designer woes.
Team Protein is working on creating what is essentially GitHub for design. The product isn’t production ready yet, but when it is you know I’ll be digging in! I definitely recommend checking it out at the very least. If their product works the way they claim it does, it’s going to be a game changer.
If you liked this article, please share it so other people stumble upon it as well!! You can also sign up for the designgood.tech newsletter and join over 1,400 people who have already done the same!
Or connect with me across the web: Medium // Twitter // LinkedIn
If you liked this article, please recommend it so others stumble upon it as well! You might also like some of my other articles:
