Ifyou haven’t already, I highly recommendstarting out with Part1 of this guide, which establishes aproper foundation of design best practices and will ensure your journey beginson the right foot.
Part 2 of our series helpsyou dial in your productivity potential by teaching you how to make your toolswork for you instead of against you.
Tools like Sketch, Figma, and Photoshop are absolute powerhouses of functionality, but everytool has its limits, so don’t stop where the features end.
There are millions ofgifted users in the world, and lots of them have built utilities known asadd-ons, plugins, or extensions for doing all kinds of new and wacky thingsbeyond the base functionality of the tool.
Think of your design toollike a video camera. Here’s a fancy one that production teams in Hollywood liketo use:
The body of a cameraprovides its core functionality: recording and storing footage. But mostcameras come equipped with slots, plugs, threads, and clamps for adding allkinds of tools: lenses, monitors, microphones, etc:
These additional toolsallow me to do things faster and better than I could with the base tool itself:Footage is sharper, audio sounds cleaner, and batteries last longer.
Extending the capabilitiesof your design tool will save you time and allow you to do things that would beextremely difficult with the base tool alone.
Sketch, for instance, hasaccumulated a substantial ecosystem of plugins from the developer community.These plugins allow designers to supplement their workflow with resources likeexternal data, translation services, and accessibility testing. On its own,Sketch doesn’t provide these types of features, but plugins make them possible.
Don’t forget to optimizeyour workflow with ancillary tools, too. These are accessory utilities forperforming specific tasks really, really well — tasks like renaming layers,generating charts, or simulating color-blindness.
There are all kinds ofmenu bar apps, browser extensions, and utilities that can improve yourworkflow. Here are some of my favorites:
· ForSketch: RunnerPro, ConnectionArrows, Anima Toolkit, ChartFull, ArtboardManager, Symbol Organizer, RenameIt, Stark, Kopie
· ForChrome: WhatFont, Dimensions, WindowResizer, DesignGrid Overlay
· MacApps: NucleoIcons, TheNoun Project, SkyFonts, BetterTouchTool
Note: I’d beremiss to not address the potential dangers of plugins and add-ons. Plugins andadd-ons are kind of like using aftermarket parts on your car. You’ll probablybe fine, but they’re not made by the original vehicle manufacturer, so you runthe risk of them breaking and wreaking all kinds of havoc.
I stronglyrecommend familiarizing yourself with the development team(s) of your favoriteplugins and add-ons. If a tool is maintained by a single person, I’d cautionyou against making it central to your workflow, particularly if the tool isfree. You never know when they might stop maintaining it, much to the detrimentof your work.
· Why it made mebetter: Extensions give me superpowers, helping mework 4x faster than before. My design tool feels like an extension of my braininstead of a barrier to progress. Using extensions has completely changed mymindset about product functionality, and I recommend extensions and add-ons asproduct and business opportunities to clients allthe time.
· Furtherreading: AdobeXD: Plugins 2018 by Abhishek SM, 11Must Have Sketch Plugins to Improve Your Design Workflow by
Jason Chan, and SuperchargeIllustrator With VectorScribe and VectorFirstAid by Scott Lewis
I spent the first year atmy agency serving clients in all kinds of different industries, dreaming upsolutions to a multitude of design problems.
After we conducted theappropriate amount of research and discovery, each project started at squareone: setting up my file, creating styles, and assembling the usual collectionof elements and components, like buttons, fields, checkboxes, dropdowns, datepickers, etc.
Initially, I enjoyed theexploratory, creative freedom. It was an opportunity to start fresh and buildthings from scratch.
But redesigning the samestuff over and over again started to drive me crazy. I became obsessed withfinding a better way to start new projects. I found great inspiration in Bootstrap, the first mainstream frontend UI framework for helping developersbuild websites and apps faster.
Inspired by Bootstrap’sstreamlined out-of-the-box experience, I decided to build my own boilerplatetemplate for designing apps. I examined past projects to identify the commonelements in each design, then built a file template with these pieces alreadyconstructed.
Since all of theseelements and components are already designed, it frees up time to explore andexperiment with visual style, micro-interactions, layout, and ultimately, thedesign solution itself.
A chef shouldn’t ever haveto spend time chopping carrots and onions during dinner service, so that’s all done aheadof time. This is no different.
Recognize when you’rerepeating a process over and over, then figure out a way to “templatize” it,either on your own, with other resources, or by using extensions.
· Why it made mebetter: By building templates, I forced myself toperfect and optimize the construction of repeatable elements so that inreal-world usage scenarios, they were flexible, scalable, and maintainable. Ihave grown more as a designer building reusable tools than through any othertechnique in this guide.
· Furtherreading: UXPower Tools by
Jon and Christian, Everythingyou need to know about Design Systems by Audrey Hacq, SketchApp Sources by Galya Iliev and Todor Iliev
This one is hard to fightwhen you’re a new designer. It’s tempting to want to “make a splash” and standout. Every element in your design feels ripe for innovation and reinvention —convention and protocol be damned.
There is a time and placefor reinvention, but the beginning of your career is not that time. Arguably,you can have a successful and fruitful career without ever pushing theenvelope, so long as you continue solving problems.
Case in point: As much as I’d love to fundamentally change the micro-interactionof type-ahead searching, it’s simply not worth my time. Perhaps there is abetter way to design type-ahead search — maybe it’s faster, more predictive, oraccurate — but unless it’s a central feature of the product (ahem, Google),then I’ll focus instead on the bigger, more important design challenges.
Conventions andestablished patterns exist because they’re reused habitually and with muchsuccess. Changing or challenging the way something is done simply to bedifferent isn’t a reason for reinvention. You’re creating extra work foryourself and wasting time that would be better spent on a larger designchallenge or augmenting the product/business in some other way.
Furthermore, using commondesign patterns establishes trust and reliability with your stakeholders.They’ll notice that you consistently deliver thoughtful and effective solutionsand feel more confident about returning to you with future projects.
· Why it made mebetter: My mental fatigue decreased. Instead oftrying to invent 25 unique solutions for every little interaction on a page, Icould focus on the bigger picture of the user experience as a whole.
· Furtherreading: Netflixdesign patterns and flows by
Kari Meric, GreatUI Design Inspiration Websites and Why You’ll Find Them Useful by Tricia
If I used a stopwatch totime where I spend my energy assembling a design, I can say with pretty highconfidence that most of it goes toward ruminating over fake usernames,searching for placeholder avatars, and authoring dummy data.
To be honest, I actuallykind of love inventing these fake stories. I bought a typewriter last year andit makes me feel like Ernest Hemingway, so let’s just blame it on my hipstertendencies. But you shouldn’t have to spend your time this way.
The crux of every designis the content or data itself,so it’s important to be thoughtful and intentional with the copy from thebeginning. Without data, your design cannot, and will not, tell a story. “Loremipsum” is meaningless, but your design shouldn’t be. Stakeholders will have amuch more difficult time deriving value and following a workflow if the data isnonsense, so it’s worth your time to communicate the functionality of yourdesign through the data or content you put into it.
So yeah, that all soundslike a great idea, but data tables like this one are particularlytime-consuming to design because of data volume and disparity:
Instead of typing everyrow by hand, I’ll use auxiliary design resources to help me generate realisticdummy data. Every IP address, name, and category in the image above wasauto-generated using external data sources, which saved me a considerableamount of time.
Sketch has a built-in data populator that lets you source dummy datafrom a plain-text file. You can find random data lists online (my favoriteis Populate), or create your own from scratch:
With realistic dummy datain hand, I can now use my design tool (or a third-party plugin/add-on) topopulate my design. Here’s how it works in Sketch:
You can find collectionsof images too, and pull them directly from the web using tools like Craft from InVision:
· Why it made mebetter: Designs feel closer to reality since thedata isn’t repeated, complete nonsense, or irrelevant. This also makes reviewswith key stakeholders much more productive because, quite simply, the design iseasier to follow. Furthermore, it’s imperative to test with real data so youproperly prepare your design for issues like overflow and truncation.
· Furtherreading: Howto Use Lists.design by
Lists.design, SeedYour Salesforce Org with Mock Data by
Andy Schmiechen, ModernDesign Tools: Using Real Data by
Josh Puckett, DatumIpsum: Designing real-time visualizations with realistic placeholder data by Matthew Ström
Tool enhancements likeadd-ons, plugins, and external resources will help you work smarter, notharder. Used effectively, you’ll accomplish more, faster, without increasedeffort.
While designing more isn’tnecessarily a goal, efficiency gains on the execution side of design willenable you to spend more effort (or even take more risks) elsewhere in thedesign process. This could mean more time for research, more time refining aworkflow, or more time innovating.
Your design tool should benothing more than a means to an end… it’s simply an instrument for visualizingthe ideas in your head.
We’ll finish this seriesin Part 3 by discussing more “cerebral” growth opportunities that will help youmake better design decisions before you ever put pixel to screen.
Article source: https://modus.medium.com/the-ultimate-guide-to-becoming-a-great-designer-part-2-of-3-9d79f8f30703