Disclaimer: I just ate, so food is on my mind. Roll with me.
If you watch The Travel Channel or The Food Network as much as I do, you’ll have seen plenty of amazing kitchens from the top restaurants around the world.
Something they all have in common? Squeaky-clean kitchens.
A kitchen so clean that they let the patrons watch! Photo by star5112 on Flickr. CC BY-SA 2.0.
Restaurants like Alinea in Chicago take their cleaning very seriously, and the proof is in their pudding (though I doubt a 3-Michelin star restaurant serves pudding). Here’s what someone said regarding the Alinea kitchen cleaning ritual:
We cleaned at least 4 times during the 9 to 10 hours that I was there [visiting]. Four big all out cleans, and numerous smaller cleans. Add that on to constant line sweeps, and vacuuming every 20 minutes. Everyone’s station was spotless, and if it was less than perfect, the chef was sure to sweep over, scold you, and fix it. It was conducive to working clean, having such a clean environment. Everything was shiny, no ‘kitchen grime’ anywhere. All the equipment—the coolers, the bottom shelf on the prep table, the bottom of the pots and pans, the bottoms of the hotel pans, the backs of the equipment, the shelves under the line, the windows—everything was clean. This was a kitchen in which any surface was clean enough to eat off of. (more here)
The cleaner your kitchen is, the better your product will be. Here are a couple recommendations for avoiding the “kitchen grime” in your Sketch designs so you stay efficient, and your deliverables stay polished:
“The cleaner your kitchen is, the better your product will be.”
1. Stick to a baseline grid
I’m not gonna tell you to use any particular size, just as long as you stick to it. I personally prefer an 8px baseline grid because it plays nicely with various typographic standards and has more divisors (1, 2, 4, 8px versus 1, 5, 10px), but I know 10px baseline grids are popular since all design applications ship with Shift+← as 10px. So use whatever floats your tugboat. You can use Nudg.it to change the default Shift+← distance to save yourself time. This does wonders when you’re designing in a style like Google Material Design that works off of an 8px grid.
Sticking to a grid will make spacing components a breeze—and it’ll ensure perfect visual rhythm. It removes guesswork when spacing out components, because distances must be multiples of your baseline grid value. As a bonus, your developers will love you because they’ll likely be working with a layout framework that adheres to a grid system.
2. Use bounding boxes
Once you’ve set your baseline grid, it’s incredibly useful to use bounding boxes to keep objects on your artboard organized and spaced consistently. In the image below, I use bounding boxes for each tab item, and I don’t actually have to put any space between the tab groups. The spacing is built into the bounding box, so each tab is snug against the one next to it.
Using a plugin like Ken Moore’s Relabel Button will allow you to create evenly spaced tabs like this in seconds.
Additionally, objects with bounding boxes have larger click areas and allow you to use things like inner shadows as dividers or highlighters. Which brings us to…
While we’re on the topic of click area sizes, can we talk about how difficult it is to grab a line segment?! It’s like Sketch is saying “We know there are 2 million pixels on the screen, but you need to click just this one. Not that one… nope… the… nope… almos… nailed i… nope.”
Secondly, even if you select the Fit to Pixel option in Sketch preferences, drag-resizing a line will always put it on sub-pixels. Super aggravating, and it’ll really mess up your spacing elsewhere because the ruler will round up values for any object that sits on sub-pixels.
So what should you do instead? I recommend using inner shadows to draw lines. Draw a rectangle and give it an inner shadow like so:
Why is this better? You now have a much larger click area, you’re protected from the dreaded sub-pixel, and, most importantly, you can use it as a style. Imagine you’re creating a list of items and you want a line separating each item. Instead of a bunch of text plus a line, now you can set your bounding box and give it an inner shadow. How cool is that?!
Note: Until Sketch supports borders with controllable sides, I’ve found inner shadows to be the best method for things like this.
4. Organize your styles and symbols
This one is easy. Did you know you can create style and symbol submenus in Sketch? By putting slashes in your style and symbol names, you can create an organized “folder” structure for finding things later.
It even alphabetizes things in your submenu for you! Thanks, Sketch!
5. Name your layers—all of them
Select an object on your artboard and learn this hotkey sequence:
Command+Shift+J
Command+R
Got it? It should select the layer in your layers list, then highlight the layer name to allow you to change it.
Pro-tip: Use the Tab key to jump to the next layer in your layers list to rename that one, too! I recommend this plugin by Rodrigo Soares to rename multiple layers at once, find and replace, and rename with sequencing!
In the screenshot above, you’ll see that I’ve called the “Jason Burke” layer “Name”. Why? Well, because that’s what it is. By default, Sketch names the layer to whatever the text is inside of it, but seeing “Jason Burke” in a list of potentially hundreds of layers isn’t particularly useful for me.
So what? It’s not a huge deal. Not really, no. But where it becomes exceptionally useful is when you can do things like this:
Confession: I used to never use the Search function to find layers, but once I started naming layers semantically to describe what the content was and not what the content said, then I realized the power of searching layers.
One last thing: Clean as you go. When you finish designing that list item, rename it! Group it! If you’re feeling wild… symbolize it! Tiny amounts of work along the way will save you a ton of time in the long run.
No one likes cleaning a tower of dirty dishes after spending an hour cooking dinner, so do yourself a favor and clean as you go.
Happy Sketching! 🌟
Many of the images used in this post were taken directly from the UX Power Tools that we’ve been meticulously designing with these (and other) techniques in mind. Check it out here.
This post was originally published on Medium.
from InVision Blog http://blog.invisionapp.com/keep-sketch-clean/