Why I Switched to Sketch & InVision for UI Design

by | Oct 17, 2014 | All, Case Study, Tutorial, User Interface, Workflow | 3 comments

A while ago, I discovered a dedicated UI design tool called Sketch. It has two key advantages over Photoshop that made me switch almost instantly.

To be honest, I didn’t use Photoshop for digital design much. I preferred Fireworks because it fit my workflow faster, though Adobe never made it retina-ready. That’s when Sketch became a game-changer.

This article explains how I accelerated the final stages of my UI design process using Sketch and the powerful InVision apps.

What is Sketch?

Sketch is a professional digital design tool for Mac. It offers power, flexibility, and speed in a lightweight, easy-to-use package. You can focus on what matters most: designing. It also works brilliantly on retina displays, something some Adobe software still struggles with.

What is InVision?

InVision is a design prototyping tool that transforms your designs into fully interactive prototypes with gestures, transitions, and animations for web, iOS, and Android.

Why I Switched

These two tools offered features that made my workflow faster and more efficient, though I still use Photoshop for complex image editing and photo manipulation.

Killer Feature 1: Assigning Styles

In Sketch, you can assign a style to any object—text, color, or shape—and then create a style palette. Updating a style in the palette automatically updates all instances across your document, saving huge amounts of time compared to Photoshop.

UI Colour & Text Styles Palette in Sketch

 

Colour & Text Style Palette in Sketch

Imagine updating a heading style or color across 20-30 screens in Photoshop—it would take ages. In Sketch, it’s done in seconds.

Killer Feature 2: Exporting & Syncing

Sketch has advanced export functionality. You can export all screens in one click, sync via InVision Craft Manager, and instantly see updates in the cloud for client review. You can export multiple resolutions and formats simultaneously, streamlining your workflow.

InVision also integrates with Photoshop via plugins for collaboration and screen sharing, and some tools automatically extract screens from PSDs based on layer names. Adobe CC updates are improving, but Sketch and InVision are still leading in efficiency for small, agile teams.

How do you approach UI design? Do you prefer Sketch, Photoshop, or a combination? I’d love to hear your thoughts.

3 Comments

  1. chad

    Are you exporting as pages or artboards? Do the jpgs need to be placed in the Screens folder or the Source Files folder?

    Thanks!

    Reply
    • Sasha

      Hi Chad. I export artboards as .pngs straight into the “Screens” folder. Thanks for your comment!

  2. Abigail Jaffe

    Hi there,
    Just wanted to let you know that yesterday, InVision announced integration with Sketch! The integration will allow users to create high-fidelity Sketch designs that will transform Sketch files into beautiful, fully interactive prototypes with gestures, transitions and animations for web, iOS and Android — without writing a single line of code.

    Let me know if I can share the press release, or feel free to email with more questions.

    Best,
    Abigail

    Reply

Leave a Reply to chad Cancel reply

Your email address will not be published. Required fields are marked *

Got a project in mind?
Let’s chat — book a call, or