What are you using these days to create your designs? Photoshop? Affinity Designer? Sketch? All of these tools are great—and each one has its own spot on my dock—but when it comes to prototyping and collaboration, my preferred set of tools includes Sketch, InVision, and Craft.
But it wasn’t always like that. Until somewhat recently, I was a die-hard Photoshop junkie—if we were talking about design, we were talking about Photoshop.
So why the switch? Well, there are two primary reasons:
But is prototyping really necessary? Yes, absolutely.
When you prototype your designs, you’re able to get more insight into the functionality and usability of your app. And by not having to switch apps to create your prototypes, you’re able to iterate on those designs much faster, and with less hassle. Plus, with InVision, you’re able to collaborate with everyone on your team—even if they don’t have Sketch.
Hey, I’ve never heard of InVision. What is it? Where can I get it? Don’t worry, we’ll take a quick look at each of these tools before learning how you can use them to improve your workflow.
Originally released in September 2010, Sketch is a design toolkit developed by Bohemian Coding. With Sketch, you can build designs for mobile apps, desktop apps, websites, or… well, anything you want.
At this time, Sketch is only available on macOS. However, Icons 8 recently released Lunacy, a Sketch viewer for Windows, which is currently in Beta. I’ve been trying it for awhile now, and while I’m not a Windows user, I do like what I’ve seen so far.
InVision, which was first launched in 2011, takes your static Sketch (and Photoshop) designs and turns them into interactive mockups. The mockups can then be shared online with others, offering a truly collaborative environment.
This is where the magic happens! According to their website, Craft is a suite of plugins that lets you design with data in mind. The plugins, which are managed using the new Craft Manager, work with Sketch and Photoshop; my application of choice for app design — more often than not — is Sketch.
Because Craft is such an important part of my design process, I want to take a closer look at what it is and how each part contributes to the overall process.
The suite of Craft plugins includes seven plugins and the Craft Manager. Let’s take a look at each plugin and how you can use it in your workflow.
Note: Craft works with both Photoshop and Sketch, but my preference is to use Sketch, so I’ll keep the focus there.
Stock allows you to browse and add images from your existing iStock or Getty Images account. You can quickly purchase new content or add content you already have. You can easily swap out images or resize the high-res images right inside Sketch.
Freehand lets you collaborate with others—in real-time—by mirroring your Sketch designs to your browser. Once mirrored, you can get immediate (and, again, real-time) feedback from your team. This is great for meetings.
For me, this is the game-changer! Being able to create prototypes directly in Sketch has increased my productivity, and has helped me iterate on my designs more efficiently. In the past, I would need to export my designs, and work on the prototype in another app; but now, I can create hotspots and link screens right inside Sketch. Brilliant!
Sync does exactly what you’d expect: it keeps your Sketch designs in sync with InVision. No more saving, exporting, copying, or emailing your designs to the team. Instead, you can click a button and send your designs directly to InVision.
Lorem ipsum is so last year. With the Data plugin, you can instantly bring in all sorts of data: names, addresses, images, and more. You can even use web data or populate your elements from a JSON feed or JSON file.
Note: If you’re looking for a new stock photo solution, be sure to check out the new Icons8 photos!
With Library, you’re able to share your project’s design assets and keep them up-to-date with the rest of the team. If something changes, you can sync those changes back to your design, and keep right on working. For teams, Library works with Box, Dropbox, and Google Drive.
Last, but certainly not least, is the Duplicate plugin. With Duplicate + Data, you’re able to quickly duplicate elements within your design, and populate those elements with unique data. You may choose to duplicate elements vertically, horizontally, or in both directions. You’re also able to set the spacing in between each duplicated element. The best part: you can go back to your duplicate control and modify these settings at any time.
With the Craft Manager, you’re able to install your plugins and keep them up-to-date. You’re also able to enable or disable individual plugins.
Now that you have a better understanding of the tools I use, let’s take a high-level look at my design process.
When I’m working on new designs, especially ones on which I’m collaborating, I start with hand-drawn sketches; then I move on to wireframes and mockups.
Here is part of a design I did for an app that’s in development for Just Write Code:
Once I have the mockups done, I’m ready to create my prototypes and send them to InVision using Craft.
Note: There are three types of static designs: sketches, wireframes, and mockups. There are also three types of prototypes: low, medium, and high fidelity. While there is some overlapping that occurs, it’s important to understand the difference between a design and a prototype. You can think of it this way: a design is static, and a prototype is something you can test-drive or play with using simulations.
I start by adding connections and hotspots to my design so my team can get a feel for the app when they play with it inside InVision:
The blue connection shown above connects the Login screen to the Dashboard screen. This connection was created using the Craft Prototype plugin:
Once I have the prototypes ready, I share my designs with the team. To do that, I use the Sync plugin, which sends things directly to InVision:
Once the sync is finished, my team can access the designs and prototypes inside InVision, and make comments, as necessary:
This process continues until everyone is satisfied with everything. Once we’re happy with how things look and feel, we begin development.
We also use Sketch and InVision for that too!
Inside Sketch, you can mark things as exportable, and you can add color schemes to the document. Once added and sent to InVision using the Sync plugin, the development team can access this information using Inspect.
Inspect, which is also part of InVision, allows developers to pull out the resources they need including assets, color codes, text, measurements, and more.
The design to development workflow has never been easier.
So if your current process is causing you to lose sleep at night, consider switching to Sketch + Invision.
About the Author
Tammy Coron is an independent creative professional and the host of Roundabout: Creative Chaos. She’s also the co-founder of Day Of The Indie, the organizer behind Indie DevStock, and the founder of Just Write Code. Find out more at TammyCoron.com.
This is where we place all the possible blocks that we use for our articles…
Creating illustrations for a children’s book is challenging, especially if you're not an artist. Learn…
Nostalgic typefaces are trendy and more varied than ever. Discover the story behind vintage typography…
Curious about the diverse world of nostalgic fonts? Keep reading to explore typography from the…
Check out arrow icons in different aesthetics and get some inspiration on how to implement…
Step-by-step tutorial on generating AI illustrations for the online school landing page design.
This website uses cookies.