UX Power Tools – Medium | Jon Moore

Methodology & Efficiency

I’m not crying, YOU’RE CRYING.

If you’ve ever watched a cooking show for like…oh I dunno, 8 seconds?…then you’ve probably seen them chopping something. Onions. Garlic. Carrots. Celery. Peppers. Cucumbers. Whatever. Chop chop chop. That’s all they seem to do, and they’re paid a lot of money to do it. I’ll julienne a bike tire for that kind of money!

Fun Fact: Egyptians believed that onions possessed magical powers and would ensure success in the afterlife. I believe that they ensure I’m not getting kissed tonight. Fun Fact #2: There’s a “National Onion Association”. Wut.

Let’s shine a spotlight on the humble onion. Do you know how to chop an onion? Like…the right way? Here’s a quick tutorial from Chef Ramsay:

Now go turn on The Food Network, The Travel Channel, PBS, Julia Child, or any Instagram chef account, and as long as they have still have all ten fingers, then they’re probably chopping an onion the same way.

It’s not that you can’t or shouldn’t chop an onion any other way. But the technique Ramsay showcases above is probably the most efficient way.

Not to mention you won’t slice off your nose-picking finger. Priorities. ?

Even though an onion is always prepped the same way, there are dozens of cooking methods. Cooking, after all, is the artistic part.

So why are we talking about onions?

Well for one, I’m hungry right now, but I have to fit into a tuxedo this weekend, so I’m writing away my hunger.

I’ve written about preparing your Sketch mise en place before, but it’s worth restating here. Every morning before a restaurant opens, chefs arrange the mise en place — chopping vegetables, making sauces, trimming cutlets — all in preparation for another day of cooking. It’s the same every time. The same ingredients. The same process. Over. And over. And over. And over.

And over. And over. And over. And over. And over. And over. I’m all out of tears for you, baby.

Treat design projects like a restaurant.

Restaurants have mastered efficiency. They’re engineered for it. Everything from the cooks they employ to the layout of the kitchen itself…it’s all optimized for speed and consistency. If you prepare yourself the same way each time, you’ll rarely mess up, and you’ll have more time to be artistic.

Actual photo from my trip to Slovenia. Seriously, go visit. Source.

If I had a nickel for every time I’ve made a text box or a button from scratch, I could probably just retired now and open a bed and breakfast in Slovenia (beautiful country, btw ??). Recreating these elements time and again got so monotonous that I threw my arms up in the air and decided to figure out the right way to do it so that I could automate this tedious process.

After a week of testing and experimentation, I landed on what was the most scalable design for a plain old text box I could come up with. It was simple but sophisticated. Smart but understandable. Unique but repeatable. I could represent dozens of states with just one symbol. I could resize it in every direction. And like chopped onions, I could prepare it however I wanted in order to fit the design recipe I was after.

I’d learned how to chop an onion.

It’s not that it was the “right” way. There is no right way. But it certainly was the most efficient.

Here’s the thing about scaling efficiency.

Optimization is all about increasing efficiency and/or using fewer resources. Because my professional life is spent designing interfaces, I’m always on the lookout for places where I can save time now, or save time later.

This is an important note.

Efficiency gains aren’t always immediate. In fact, it took me a couple months to finish my design system templates. In a kitchen, the mise en place takes hours to prepare, and chefs arrive early in the morning to begin work.

But…

…when it comes time to make a dish worthy of Three-Michelin Stars, it takes minutes instead of hours. The efficiency gains are staggering.

Ways to Optimize

What follows is an unorganized list of ways to scale efficiency during the design process. Tiny changes will have dramatic effects in the long run, so no method or trick is too small:

• Organize Your Folders: Can’t find a file? That’s 15 seconds you could have spent on an interaction. Why not automate it? No one likes spring cleaning, but organization is the first step in developing efficient habits.
• Configure Some Hotkeys: Reaching for the “Center Vertically” button? You just wasted 5 seconds you could’ve been answering a client on Slack. Control-Z is a good start, but you can do better.

Shortcuts, Hotkeys, and Gestures: 5 Ways to Become a Design Ferrari in Sketch

I use a lot of hotkeys.

• “Templatize” Your Artboards: Doing a mobile app? You’re probably gonna need a Splash, Registration, Login, Forgot Password, Settings, and My Profile page. Simply setting up a file with empty artboards named for these pages will save you time, help scope the project, and serve as a nice “to-do list” right insight of Sketch. Here’s a free file I made with some common mobile app pages, ready to be designed by you, the artist!

• Templatize Your Styles: Always creating the same text styles? Always making a “UI/Brand Color” layer style? Why not do it once, save that as a template, then start every project using that file? No more wasting time creating and organizing styles. Now you can just customize them and sync your changes.

Making Stylesheets in Sketch

• Templatize Your Components: Sketch makes this easy with symbols, and you can take it even further with nested symbols. The trick with components is to consider all of the potential variations you might want. Will this button ever be a different color? Will the text ever be light instead of dark? Will it ever be rounded instead of squared? Will it have an icon? On the left? On the right? Many of the components I’ve created in my design system template are sophisticated nested symbols with cascading effects allowing me to change colors, icons, and text quickly and efficiently. Follow the cardinal rule of development: D.R.Y…Don’t Repeat Yourself.

• Templatize Your Emails: It may sound robotic, but if you’re regularly sending updates to a client, manager, or developer, they’ll actually appreciate a consistent message structure. Here’s a sample:

Hi Arthur,
I’ve made some updates to the existing screens and added some new ones. They have been pushed to InVision, so take a look.

Updates:
– Change #1 [link to this screen]
– Change #2 [link to this screen]

New Screens:
– New Screen #1 [link to this screen]
– New Screen #2 [link to this screen]

Project Link:
[link to InVision/Jira/Trello/etc.]

— — — — — — — — — —

Next Up:
– The next screen(s) I’m doing

Backlog:
– A more generic summary list of remaining epics, stories, and/or tasks

Thanks!
❤ Jon ❤

• Templatize Your Schedule: When I started blocking off my calendar to have scheduled working time on the same days, at the same time every week, my stress level dropped, I was able to dedicate unbroken time to the task(s) at hand, and my coworkers learned when not to bother me. I am TERRIBLE with planning, and I’m rarely allowed to even schedule things at my agency because I still haven’t quite grasped Google Calendar, but this small change had a huge effect on my productivity.

Shockingly, I actually do get 8am-5pm to myself on Wednesdays. It’s nice!

• Plugins Plugins Plugins: I can’t overstate these enough. I’ll do a separate article with all of my favorites, but for now, just go play on SketchAppSources, SketchLand, and AwesomeSketch. You get bonus points for mapping plugins to hotkeys, trackpad gestures, and touchbar buttons. You get extra bonus points if you actually code your own plugins. You get extra EXTRA bonus points if you want to help me create a plugin. I already know how it should work! ?

Closing

If you were efficient reading this article, then you probably just read the headlines and looked at the photos. That’s okay. But you may have missed the freebie, so scroll back up and download that.

If you leave having learned anything, I hope you at least know how to properly chop an onion. These are important life lessons, people. ?

If you can’t be bothered to implement any of these Sketch template ideas on your own, you can use mine!

UX Power Tools

Lots of designers are using it already:

Nice mobile UI kit using some very organised @sketchapp techniques ? https://t.co/vx2AV7PHSS #design #UI #UIkit via @uxpowertools

 — @AdhamDannaway

Currently trying out this piece of awesomeness! @uxpowertools https://t.co/f2TXuWOyea

 — @DesignByNikos

solid #ux design system starter for #mobile: https://t.co/HRqFye97Dv @uxpowertools #mobileapps

 — @dejmejia

Happy onion chopping!

When I’m not chopping onions, I’m working on Sketch design tools at UX Power Tools to make you a better, more efficient designer.

Follow UX Power Tools on Twitter
Follow me on Twitter

Designers: Do you know the most efficient way to chop an onion? ? was originally published in UX Power Tools on Medium, where people are continuing the conversation by highlighting and responding to this story.