2016 has been a watershed year for UI design tools. Adobe finally launched XD, their direct competitor to Sketch. Sketch itself has not stopped evolving and is about to switch to a subscription model, and the venerable Photoshop remains a default install for many a UI and visual designer.
Though UI design is only one aspect of UX, it is the part of the process that defines the look and feel, as well as creating the assets for development. In that respect, choosing the best tool can have a big impact on both the quality of the designerโs work as well as their efficiency.
So, has the rise of Sketch and the advent of XD changed the playing field? Visual designer Rob Musser presents his analysis of Photoshop, Illustrator, InDesign, XD, and Sketch.
Get ready to RUMBLE!!!
1. UI Design Software Cage Match
ADOBE VS. SKETCH
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
2. WHO AM I?
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
Rob Musser
Visual Designer
at CapTech in Richmond, Virginia
5+ years in Interaction & Visual Design
BFA in Graphic Design, James Madison University
3. MY EXPERIENCE
1.5 years
3 years
1 year
1 month
1 week
Time spent using apps for
UI design work
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
4. MY PAIN POINTS Frustration with UI design
software (prior to 2014)
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
Software lag
Hidden functionality
Visual noise
Decision fatigue
Multiple massive files
6. 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.
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
7. 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.
8. 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.
9. 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.
10. 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.
12. Data as ofJuly 25, 2016
APP SIZE
1.07 GB1.93 GB 498 MB 44.7 MB66.3 MB
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
13. 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.
15. 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
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
16. Sketch & XD can open a file
4x FASTER
than Photoshop, Illustrator & InDesign
( Imagine how much faster it is to do actual design work. )
Based on sample dataยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
17. 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
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
18. Sketch & XD use
4x LESS MEMORY
than Photoshop
( โฆand roughly 2.5 less memory than Illustrator or InDesign. )
Based on sample dataยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
19. 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.
20. Sketch & XD files are at least
9x SMALLER
than Photoshop
( 6x smaller than Illustrator and 4x smaller than InDesign. )
Based on sample dataยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
21. Winners
Lean App Size: Work faster, endure fewer crashes, generate smaller files, โจ
and use fewer files.
PERFORMANCE
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
25. With Sketch, only
ONE DESIGN FILE
is needed for an entire project
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
26. UX
How easily can Photoshop modify color, shadow & alignment?
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
27. Chaotic UX | Relevant functionality is dispersed in nested/hidden panels
UX
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
28. UX
How easily can Photoshop (Design Space) modify color, shadow & alignment?
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
29. Orderly(ish) UX | Some relevant functionality is united in context panel
UX
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
30. How easily can Illustrator modify color, shadow & alignment?
UX
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
31. Chaotic UX | Relevant functionality is dispersed in nested/hidden panels
UX
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
32. How easily can InDesign modify color, shadow & alignment?
UX
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
33. Chaotic UX | Relevant functionality is dispersed in nested/hidden panels
UX
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
34. How easily can Experience Design modify color, shadow & alignment?
UX
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
35. Orderly UX | Most relevant functionality is united in context panel
UX
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
36. How easily can Sketch modify color, shadow & alignment?
UX
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
37. Orderly UX | Relevant functionality is united in context panel
UX
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
38. Sketchโs and XDโs
OPTIMIZED UX
complements UI designersโ workflow
Based on sample dataยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
39. 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
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
41. QUICK GRID
# of Columns
Column Width
Gutter Width
Margins
Total Width
n/a
n/a
Grid elements that can be
easily setup across artboards
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
42. Measure distances between Layers & Artboards | Smart Coordinates
SMART DISTANCES
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
43. Measure distances between Layers, Artboards & Layer-Artboard
SMART DISTANCES
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
44. Add, Subtract, Multiply & Divide (Position, Size, Transform & RGB fields)
MATH OPERATIONS
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
45. Duplicate Vertically & Horizontally | Control Gutters
DUPLICATE CONTENT
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
46. Duplicate Vertically & Horizontally | Control Gutters
DUPLICATE CONTENT
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
47. Give objects resizing states | Perfect for responsive design
RESIZING GROUPS
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
48. QUICK EXPORTING
Create multiple exports in various sizes and formats (Design Space only)
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
49. Create multiple exports in various sizes and formats | Export states
QUICK EXPORTING
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
51. 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
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
54. TEXT STYLES
Redefine-able styles | Global preview + update | Obstructive modals
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
55. TEXT STYLES
Redefine-able styles | Global preview + update | Obstructive modals
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
โ โSimilar UX to Photoshop
56. TEXT STYLES
Redefine-able styles | Global preview + update | Obstructive modals
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
โ โSimilar UX to Photoshop
57. TEXT STYLES
Redefine-able styles | Local preview + global update | No obstructive modals
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
58. TEXT STYLES
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
Not present at time of photo
(a.k.a. No text styles)
59. LAYER STYLES
No redefine-able styles
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
โ โSimilar UX to Illustrator (see next)
61. LAYER STYLES
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
Redefine-able styles | Local preview + global update | No obstructive modals
62. LAYER STYLES
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
Not present at time of photo
(a.k.a. No layer styles)
63. Redefine-able Layers/Groups | Independently Editable Text & Imagery
SYMBOLS
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
64. 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
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
66. Winner
Sketch clearly outshines Photoshop, Illustrator, InDesign, and even XD (at present) โจ
for Performance, Organization, Efficiency, and Reusability.
BEST APP
FOR UI DESIGN
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
68. โข 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
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
69. โข 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
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
70. โข Glyph panel
โข Asset sharing | Across Adobe Creative Suite with Libraries
โข Familiar keyboard shortcuts
โข Mac & Windows compatible
PROPS
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
71. โข Limited CSS snippet output | background, font-family, font-
size, color | vendor prefixes included
โข Visual noise | Lots of irrelevant tools/values that DO NOT
translate to CSS
โข Poor web-style rendering | e.g. Shadows
โข No text frame transformation | Cannot change a single line to
an area text frame (and vice versa)
โข No Auto Align to Artboard
โข Expensive | $49/month (BUT includes Photoshop, InDesign,
Experience Design, etc)
BURNS
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
72. โข Glyph panel
โข Asset sharing | Across Adobe Creative Suite with Libraries
โข Familiar keyboard shortcuts
โข Mac & Windows compatible
PROPS
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
73. โข Visual noise | Lots of irrelevant tools/values that DO NOT
translate to CSS
โข No text frame transformation | Cannot change a single line to
an area text frame (and vice versa)
โข No Auto Align to Artboard
โข Expensive | $49/month (BUT includes Photoshop, Illustrator,
Experience Design, etc)
BURNS
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
74. โข 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
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
75. โข 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
โข No text frame transformation | Cannot change a single line to
an area text frame (and vice versa)
โข Not Windows compatible | Yet. Due out in late 2016.
BURNS
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
76. โข 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
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
77. โข 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
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
78. โข 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
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
79. Winner
What software are other UI designers using?
http://tools.subtraction.com/
YOU DECIDE!
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
80. ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
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?
81. 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
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.
82. 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
ยฉ 2016 CapTech Ventures, Inc. All Rights Reserved.