September 18, 2018
Expanding our Creative Team Toolbox: Working Smarter, not Harder with Sketch
For decades, the Adobe Creative Suite, now known as Creative Cloud, has been the go-to toolbox for designers of all disciplines. It was what we learned in school, what was posted on the job descriptions for internships and dream careers, and hence, what was listed on our resumes, and still is.
It’s not that it provided an all-in-one solution, but Adobe offered a suite of tools, each with a specific purpose it was built to fulfill: Photoshop for image editing and manipulation, compositing, and digital art; Illustrator for logos, icons, and of course, vector illustration; and InDesign for all things layout design and publishing, in-depth typography work, and now, interactive digital collateral.
Today, a Creative Cloud subscription gives designers access to many more apps than the three mentioned above. It’s not uncommon that we find ourselves breaking into Premiere Pro and After Effects to do some video or motion graphic work as the need arises. Even some new apps like Adobe XD have proven beneficial to our workflow, especially when it comes to putting together quick, clickable prototypes for a proof-of-concept or interaction study.
Each Creative Cloud app serves a specific purpose, and when used for what it was built for, will allow you to get the job done quickly and seamlessly. So it’s pretty clear that we still use these products, and they are definitely still listed on our resumes and in our job descriptions. In fact, jumping between the aforementioned apps on a daily basis becomes increasingly common as the work we’re doing grows to be more and more integrated.
As time goes on, the nature of a “designer’s” job function continues to change. The day-to-day workload will change, along with the types of asks and project briefs that come across our desks. And as designers, the pressure is on to keep ourselves relevant and up-to-date, as well as keeping an eye on where we’re headed.
Likewise, we realized the way that we use websites and apps has changed, and naturally, the way we design and build them has changed as well—and will continue to. With that realization, the need for a different tool became apparent, specifically one to create these digital interfaces.
A lot of tools that we had tried out in the past, either in an attempt to speed up or improve different deliverables, did not provide a good enough return on investment. Either literally—we were paying too much to use a tool and not getting enough out of it—or the learning curve was too high for the level of work the tool was being used produce.
In the past, we would use Photoshop or Illustrator to create static page comps and mockups of websites to show clients. Sure, they looked really awesome. But we would then have to painstakingly spend hours spec’ing out said files so our developers could make sense of our designs. Don’t even get us started on what happened when we needed to make one small change to that thing that was used on the numerous pages you’ve designed so beautifully in Illustrator. ?
With Sketch, we have a tool that helps us design better digital experiences, and empowers us, as designers, to do our best work.
There was obviously still a learning curve to using Sketch, but it was quick, user-friendly, and nearly intuitive. Being a MacOS-specific app, much of app’s functionality reflected that of other Mac apps we’re used to using. It also bore similarities to other creatives tool we frequently used.
The learning curve was quickly overcome, but of course, there are things that we are still learning every day, which are quickly shared with the rest of the team and followed by a chorus of ohs and ahs.
By the time you read this, we have probably found 5 more favorites, but here are some of our favorite features that we think will always stay near the top of the list:
Spacing and Consistency
There’s so much customization you can do to your grid and document layout it’s not even funny. We’ve set a standard for ourselves so our layouts stay consistent no matter who is working on them. The native spacing and distance visualization is such a small feature, but so imperative to our work that this has been the most beneficial feature by far.
Organization and Symbols
As we get into actually designing and building out anything from websites to digital ads, we can now do so faster and with greater consistency. With symbols, we can quickly add in global components and make sure they stay the same from the homepage down to the contact form.
Not only do symbols make building out projects faster and easier, but when it’s time for revisions, we are turning around simple changes in a snap. Instead of finding every instance of a CTA and changing the radius on the corners from 4px to 6px or changing the fill from red to blue, we go to one place and it updates across the entire project. As we’ve become more familiar and comfortable with Sketch, we’ve started using symbols in new ways that work best for us, like building nested components and relying more on symbol overrides. Plus, when it comes time to organize your file, there’s almost no work to be done, as Sketch collects all of your symbols in one place, and allows you to sort and organize simply by the naming structure—which helps keep our creative team even more in line. ?
Plug-ins and Integrations
There are an incredible amount of resources available as plug-ins and extensions to the app itself. Some of our favorites include: Zeplin is great for extracting specs, assets, and code snippets for our Dev team; Sketch Runner creates an interface similar to the Spotlight search on your Mac, speeding up actions and commands right inside the app; Craft Manager, which ties Sketch to InVision, makes it almost too easy to create fast, clickable in-app prototypes, pull real data into our designs, and sync right up to our InVision accounts to share with our team members and clients for feedback and review.
Dev Handoffs and Presentations
Dev handoffs have become much more efficient. We’re spending a lot less time manually spec’ing out our files and more time on refining the design. Utilizing some of our favorite plug-ins and integrations, our dev team can pull out the information that is relevant to them. They have access to all the attributes, assets, and specs they need, and as a whole, our teams have the opportunity to work together more collaboratively.
On top of the tools mentioned above, we’re also always testing and trying new software that pops up on our radar. Some other, more experimental tools in our current rotation include InVision Studio, Framer X, Adobe XD, and Lottie. At the end of the day, a tool is just that. Fundamentals, best practices, and our innate design sensibilities still reign supreme, no matter what application we’re working in.
As our world becomes increasingly digital, we’re looking forward to utilizing the tools we have at our disposal to produce the best experiences possible.