Adobe vs. Sketch

UI Design Software Cage Match
ADOBE VS. SKETCH
© 2016 CapTech Ventures, Inc. All Rights Reserved.

WHO AM I?
Rob Musser
Visual Designer
at CapTech in Richmond, Virginia
5+ years in Interaction & Visual Design
BFA in Graphic Design, James Madison University

MY EXPERIENCE
1.5 years
3 years
1 year
1 month
1 week
Time spent using apps for
UI design work

MY PAIN POINTS Frustration with UI design
software (prior to 2014)
Software lag
Hidden functionality
Visual noise
Decision fatigue
Multiple massive files

The
CONTENDERS

PHOTOSHOP
May 10, 2016, http://www.adobe.com/products/photoshop
Take your creativity to new places.
The world’s best imaging and design app is at the core  
of almost every creative project. Work across desktop and  
mobile devices to create and enhance your photographs,  
website and mobile app designs, 3D artwork, videos and more.

ILLUSTRATOR
Create beautiful vector art.
The industry-standard vector graphics app lets you create logos,
icons, sketches, typography and complex illustrations for print, web,
interactive, video and mobile.
May 10, 2016, http://www.adobe.com/products/illustrator© 2016 CapTech Ventures, Inc. All Rights Reserved.

INDESIGN
Craft elegant layouts at your desk or on the go.
The industry-leading page design and layout toolset lets you work
across desktop and mobile devices to create, preflight and publish
everything from printed books and brochures to digital magazines,
iPad apps, eBooks and interactive online documents.
May 10, 2016, http://www.adobe.com/products/indesign© 2016 CapTech Ventures, Inc. All Rights Reserved.

SKETCH
Unleash your imagination.
We created Sketch specifically for designing interfaces,  
websites, icons… whatever is in your head.
May 10, 2016, http://www.sketchapp.com/features© 2016 CapTech Ventures, Inc. All Rights Reserved.

EXPERIENCE DESIGN
A new experience in user experience.
Design and prototype websites and mobile apps with Adobe
Experience Design (formerly Project Comet), the first all-in one  
tool for UX designers. Test drive the XD preview for Mac and tell us  
what you think.
July 25, 2016, http://www.adobe.com/products/experience-design.html© 2016 CapTech Ventures, Inc. All Rights Reserved.

The
WEIGH-IN

Data as ofJuly 25, 2016
APP SIZE
1.07 GB1.93 GB 498 MB 44.7 MB66.3 MB

Sketch & XD are roughly
30x SMALLER
than Photoshop
( 15x smaller than Illustrator and 10x smaller than InDesign. )
Based on sample data© 2016 CapTech Ventures, Inc. All Rights Reserved.

ROUND 1
Performance

Data as of May 10, 2016
LOAD TIME Time taken to open a file with
the same simple graphics
7.90 sec
8.03 sec
1.08 sec
7.10 sec
0.88 sec*
* Load time may
differ with full
commercial release

Sketch & XD can open a file
4x FASTER
than Photoshop, Illustrator & InDesign
( Imagine how much faster it is to do actual design work. )

Data as of May 10, 2016
MEMORY USAGE Memory required to run a file
with the same simple graphics
308.7 MB
325.5 MB
119.1 MB
526.9 MB
165.1 MB*
* Memory usage may
differ with full
commercial release

Sketch & XD use
4x LESS MEMORY
than Photoshop
( …and roughly 2.5 less memory than Illustrator or InDesign. )

FILE SIZE Size of a file with the same
simple graphics
3.3 MB
4.7 MB
2.5 MB
516 KB
179 KB*
* File size may differ
with full commercial
release
Data as of May 10, 2016© 2016 CapTech Ventures, Inc. All Rights Reserved.

Sketch & XD files are at least
9x SMALLER
than Photoshop
( 6x smaller than Illustrator and 4x smaller than InDesign. )

Winners
Lean App Size: Work faster, endure fewer crashes, generate smaller files,  
and use fewer files.
PERFORMANCE

ROUND 2
Organization

Canvas
Artboard/Page
STRUCTURE

Canvases
Artboards
Layers
Artboards
Layers
Artboards
Layers
Pages
Layers
Not present
at time of
photo
(a.k.a. No layers
panel)
Artboards
STRUCTURE

With Sketch, only
ONE DESIGN FILE
is needed for an entire project

UX
How easily can Photoshop modify color, shadow & alignment?

Chaotic UX | Relevant functionality is dispersed in nested/hidden panels
UX

UX
How easily can Photoshop (Design Space) modify color, shadow & alignment?

Orderly(ish) UX | Some relevant functionality is united in context panel
UX

How easily can Illustrator modify color, shadow & alignment?
UX

How easily can InDesign modify color, shadow & alignment?
UX

How easily can Experience Design modify color, shadow & alignment?
UX

Orderly UX | Most relevant functionality is united in context panel
UX

How easily can Sketch modify color, shadow & alignment?
UX

Orderly UX | Relevant functionality is united in context panel
UX

Sketch’s and XD’s
OPTIMIZED UX
complements UI designers’ workflow

Winner
Canvases, Artboards & Layers: Organize entire project in one design file.  
Inspector Panel: Timely access to all relevant functionality (with no visual noise)  
enables an orderly, stress-free workflow.
ORGANIZATION

ROUND 3
Eﬃciency

QUICK GRID
# of Columns
Column Width
Gutter Width
Margins
Total Width
n/a
n/a
Grid elements that can be
easily setup across artboards

Measure distances between Layers & Artboards | Smart Coordinates
SMART DISTANCES

Measure distances between Layers, Artboards & Layer-Artboard
SMART DISTANCES

Add, Subtract, Multiply & Divide (Position, Size, Transform & RGB fields)
MATH OPERATIONS

Duplicate Vertically & Horizontally | Control Gutters
DUPLICATE CONTENT

Give objects resizing states | Perfect for responsive design
RESIZING GROUPS

QUICK EXPORTING
Create multiple exports in various sizes and formats (Design Space only)

Create multiple exports in various sizes and formats | Export states
QUICK EXPORTING

QUICK EXPORTING
Create multiple exports in various sizes and formats

Winner
Quick Grids: Fast grid setup. Smart Distances: Pixel perfect layout of layer elements.  
Math Operations: Goodbye mental math. Duplicate Content: Quickly add unique
rows/columns of content. Resizing Objects: Easily configure element sizes and
positioning for different screens. Quick Exporting: Easily generate assets for multiple
resolutions in multiple file formats.
EFFICIENCY

ROUND 4
Reusability

COLORS
Redefine-able Colors
Redefine-able Gradients
Color Swatches
Gradient Swatches
Color Naming
Illustrator & InDesign offer superior color management

TEXT STYLES
Redefine-able styles | Global preview + update | Obstructive modals

TEXT STYLES
Redefine-able styles | Global preview + update | Obstructive modals
“ ”Similar UX to Photoshop

TEXT STYLES
Redefine-able styles | Local preview + global update | No obstructive modals

TEXT STYLES
Not present at time of photo
(a.k.a. No text styles)

LAYER STYLES
No redefine-able styles
“ ”Similar UX to Illustrator (see next)

LAYER STYLES
Redefine-able styles | Obstructive modals | No Inner Shadow style

LAYER STYLES
Redefine-able styles | Local preview + global update | No obstructive modals

LAYER STYLES
Not present at time of photo
(a.k.a. No layer styles)

Redefine-able Layers/Groups | Independently Editable Text & Imagery
SYMBOLS

Winner
Colors: Enough color management to get the job done.
Text Layers & Layer Styles: Create CSS-driven styles and make easy revisions with
global updates. Symbols: Update all buttons, headers, footers, etc. by modifying
one instance of that symbol
REUSABILITY

REF REVIEW

Winner
Sketch clearly outshines Photoshop, Illustrator, InDesign, and even XD (at present)  
for Performance, Organization, Efficiency, and Reusability.
BEST APP
FOR UI DESIGN

POST-FIGHT
Trash Talk

• Robust CSS snippet output | position, top, left, width, height, z-
index, font-size, font-family, color, line-height, text-align, border-
radius, background-image | vendor prefixes included
• Glyph panel
• Lots of UI kits
• Plays well with… | Framer, InVision, Marvel, Proto.io
• Excellent plugins | Browser Preview, Craft (Duplicate, Photos,
Type), Font Hero, Prisma, PS Export Panel, Sympli | Most are
$20+
• Asset sharing | Across Adobe Creative Suite with Libraries
• Familiar keyboard shortcuts
• Mac & Windows compatible
PROPS

• Visual noise | Lots of irrelevant tools/values that DO NOT
translate to CSS (Standard Photoshop)
• Steep learning curve
• Limited “Back” ability | Limited CMD+Z/CTRL+Z (Standard
Photoshop)
• No text frame transformation | Cannot change a single line to
an area text frame (and vice versa)
• Expensive | $49/month (BUT includes Illustrator, InDesign,
Experience Design, etc)
BURNS

• Glyph panel
• Asset sharing | Across Adobe Creative Suite with Libraries
• Familiar keyboard shortcuts
• Mac & Windows compatible
PROPS

• Limited CSS snippet output | background, font-family, font-
size, color | vendor prefixes included
translate to CSS
• Poor web-style rendering | e.g. Shadows
• No Auto Align to Artboard
• Expensive | $49/month (BUT includes Photoshop, InDesign,
BURNS

translate to CSS
• No Auto Align to Artboard
• Expensive | $49/month (BUT includes Photoshop, Illustrator,
BURNS

• Shallow learning curve
• Tools/values translate very well to CSS
• Prototyping | Easily create, record & share interactive
prototypes | Modify Transition, Ease & Duration | Manage
shared links
• Drag & drop text files into text fields
• Drag & drop images into shapes
• Easy Layer Lock/Unlock
• Paste SVG files
• Non-destructive boolean operations
• Familiar keyboard shortcuts | For the most part
PROPS

• Unusable for most projects | Sorely limited functionality | Full
commercial release expected by March 2017?
• No CSS snippet output
• Cannot lock object proportions | Relies on holding SHIFT
• Very limited UI kits
• Doesn’t play well with… | Anyone. Yet?
• Some buried functionality | e.g. Masking, Exporting | Relies on
keyboard shortcuts
• Limited text formatting
• Not Windows compatible | Yet. Due out in late 2016.
BURNS

• Support for Creative Cloud Libraries (CreativeSync)
• Enhanced design features, including support for gradients,
richer text, effects and blend modes.
• Improved color picker
• Support for working with layers
• More control over the sharing of prototype links
• Authoring of scrollable content for prototypes
• Micro-interactions for prototyping
• Real-time design preview on mobile devices
ROADMAP

• Shallow learning curve
• Tools/values translate very well to CSS
• Lots of UI kits
• Asset sharing | Across projects with Craft Libraries plugin
• Non-destructive boolean operations
• Sketch Mirror | Real-time design preview on mobile devices
• Text frame transformation | Change a single line to an area text
frame (and vice versa)
• Plays well with… | Flinto, Framer, InVision, Marvel, Proto.io
• Excellent Plugins | Checkpoints Plugin, Craft (Data, Duplicate,
Library), Generate GIF, GIT, Compo, Nudg.it, Runner, Sympli, Zeplin
• Affordable | $99/seat, 1 yr of updates | Save on multiple seats
PROPS

• No Glyph panel
• Limited CSS snippet output
• INCLUDED: background-image, box-shadow, border-radius,
font-family, font-size, color
• NOT INCLUDED: line-height, height, width, position, z-index
• No vendor prefixes | e.g. -moz-box-shadow, etc.
• Some unfamiliar keyboard shortcuts
• Limited text formatting | No Character Styles
• Not Windows compatible
BURNS

Winner
What software are other UI designers using?
http://tools.subtraction.com/
YOU DECIDE!

Adobe must overcome a big
functionality gap to allow for
comprehensive UI design
capabilities in Experience
Design
InVision must release the
Craft Prototype plugin to
allow for native prototyping
in Sketch
THE BIG QUESTION
Which app will be the ﬁrst to deliver comprehensive  
UI design AND native prototyping capabilities?

Special Bonus
Instructions | https://support.invisionapp.com/hc/en-us/articles/208434466-Craft-
Enabling-beta-releases-of-Craft-plugins
Activation Codes | rob-sid01, rob-sid02, rob-sid03, rob-sid04, rob-sid05,
rmusser-cap01, rmusser-cap02, rmusser-cap03, rmusser-cap04, rmusser-cap05
TRY CRAFT PROTOTYPE

Why you should switch from Photoshop to Sketch:
http://www.creativebloq.com/web-design/why-you-should-switch-photoshop-
sketch-11618620, January 11, 2016
Photoshop vs. Sketch: The Battle for the Cleanest HTML/CSS:
http://www.sitepoint.com/exporting-code-sketch-vs-photoshop/,  
May 12, 2015
Infographic: Sketch vs. Photoshop:
http://www.webdesignerdepot.com/2015/03/infographic-sketch-vs-photoshop/,
March 20, 2015
The Sketch Manual Part 1: How & why I moved to Sketch:
http://hackingui.com/sketch-design/why-i-moved-to-sketch/, September 15, 2014
FURTHER READING

Adobe vs. Sketch

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Adobe vs. Sketch

Similaire à Adobe vs. Sketch (20)

Dernier

Dernier (20)

Adobe vs. Sketch