Choose SketchApp over Photoshop for UI/UX

SYZYGY.DE
#uxce17
Choose SketchApp over Photoshop for UI/UX

SYZYGY.DE
Jens Hoffmann 
Creative Director @ SYZYGY 
web | ux | design | strategy
@wrybit
Me.

SYZYGY.DE
New York
SYZYGY
Ars Thanea
London
SYZYGY
Hi-ReS!
Berlin
Hi-ReS!
USEEDS
Frankfurt
SYZYGY
Hamburg
SYZYGY
Warschau
SYZYGY 
Ars Thanea
Bad Homburg
SYZYGY
615 employees
12 units
1995 founded
München
SYZYGY
gross income65m €
SYZYGY Group
Digital Marketing & Technology Digital Creatives 3D, Gaming & Mobile Digital Concept & User Insights

SYZYGY.DE
Awards
More than 200 Awards

Development
Teamlead Frontend 
Frontend Dev / PHP Dev / TYPO3 Dev
Design
User Experience Architect / Art Director 
Concepter / Copywriter
Consulting
Account Manager / Project Manager
Service
DevOps / IT Support
Hello ;)
www.syzygy.de/jobs

SYZYGY.DE
UXcamp Europe 2017 
Choose Sketch!

SYZYGY.DE
Choose Sketch!
BenefitsClickbait Skills
Worflow Organisation

SYZYGY.DE
Choose Sketch! 
Clickbait

SYZYGY.DE
but somehow,
we lost.”
“We didn’t do
anything wrong,

SYZYGY.DE
Evolution of Nokia
1987
MOBIRA CITYMAN 900
1994
NOKIA 232
1998
NOKIA 282
2000
NOKIA 3310
2007
NOKIA N81
2008
NOKIA 6220 CLASSIC
2011
NOKIA N9
2011
NOKIA LUMINA 930

SYZYGY.DE
Evolution of Nokia
1987
MOBIRA CITYMAN 900
1994
NOKIA 232
1998
NOKIA 282
2000
NOKIA 3310
2007
NOKIA N81
2008
NOKIA 6220 CLASSIC
2011
NOKIA N9
2011
NOKIA LUMINA 930
2007
iPhone 2G

SYZYGY.DE
Choose Sketch! 
Skills

SYZYGY.DE
Basis skills
Technical  
knowledge
Innovative  
ideas
Theoretical  
knowledge
Precise 
look
Empathy
Aesthetic 
intuition
Interdisciplinary
knowledgeSelf-Reflexion
Arguments
Abstraction

SYZYGY.DE
Frontend  
Frameworks
Atomic  
Design
Responsive  
Web Design
CSS3, SVG, ..
Modern technical paradigms
Assets 
Production
…

SYZYGY.DE
Design Process
DescriptionDiscovery DesignDefinition Development

SYZYGY.DE
Design Process
Personae
User stories
User journeys/flows
Information architecture
Moodboards
Description
Research/Analytics
Solution Workshops
Key-Requirements
Discovery
Visual design
Hi-Res Prototype
Styleguide
Asset Optimization
Design Pattern
Design
Sketching
Wireframes
Low-Res Prototype
UseLab
Ideation
Content
UX Concept
IxD Concept
Definition
Quality assurance
Optimization
Backend coding
Frontend coding
DevOps
Hosting
Development

SYZYGY.DE
Design Process
Personae
User stories
User journeys/flows
Indesign
Tracker
MindNote
OmniGraffle
Moodboards
Keynote
Description
Research/Analytics
Solution Workshops
Key-Requirements
Keynote
Browser
Word
Discovery
Visual design
Hi-Res Prototype
Styleguide
Asset Optimization
PhotoshopSketch
InVision
Zeplin
AxureProto.io
After Effects
Framer
Design Pattern
ImageOptiZeplin
Design
Sketching
Wireframes
Low-Res Prototype
UseLab
Ideation
Content
UX Concept
IxD Concept
Pen/Paper
OmniGraffle
Axure
HotJar
Whiteboard
Keynote Word Excel
Analytics
BrowserWord Excel
Definition
Quality assurance
Optimization
Backend coding
Frontend coding
DevOps
Hosting
Atom.io Brackets.io
Development

SYZYGY.DE
Design Process
Personae
User stories
User journeys/flows
Indesign
Tracker
MindNote
OmniGraffle
Moodboards
Keynote
Description
Research/Analytics
Solution Workshops
Key-Requirements
Keynote
Browser
Word
Discovery
Visual design
Hi-Res Prototype
Styleguide
Asset Optimization
Photoshop
InVision
Zeplin
AxureProto.io
After Effects
Framer
Design Pattern
ImageOptiZeplin
Design
Sketching
Wireframes
Low-Res Prototype
UseLab
Ideation
Content
UX Concept
IxD Concept
Pen/Paper
OmniGraffle
Axure
HotJar
Whiteboard
Keynote Word Excel
Analytics
BrowserWord Excel
Definition
Quality assurance
Optimization
Backend coding
Frontend coding
DevOps
Hosting
Atom.io Brackets.io
Development
Sketch

SYZYGY.DE
Choose Sketch! 
Benefits

SYZYGY.DE
2011 
Fontcase 2.0
Evolution of Bohemian Coding Sketch
2010 
Sketch 1.0
2012 
Sketch 2.0
2014 
Sketch 3.0
2016 
Sketch 40
2004 
DrawIt 1.0
2009 
Fontcase 1.0
2008 
DrawIt 3.0
2006 
DrawIt 2.0
Founder 
Pieter Omvlee
2017 
UXcamp

SYZYGY.DE
Evolution of Adobe Photoshop
1988 
Photoshop 0.07
1989 
Photoshop 0.87
1990 
Photoshop 1.07
1993 
Photoshop 2.01
1995 
Photoshop 3.0
1996 
Photoshop 4.0
1997 
Photoshop 5.0
2000 
Photoshop 6.0
2002 
Photoshop 7.0
2003 
Photoshop CS1
2005 
Photoshop CS2
2007 
Photoshop CS3
2008 
Photoshop CS4
2010 
Photoshop CS5
2012 
Photoshop CS6
2013 
Photoshop CC
2014 
Photoshop CC 2014
2016 
Photoshop CC 2016
2017 
Photoshop CC 2017
2015 
Photoshop CC 2016

SYZYGY.DE
1988 
Photoshop 0.07
1989 
Photoshop 0.87
1990 
Photoshop 1.07
1993 
Photoshop 2.01
1995 
Photoshop 3.0
1996 
Photoshop 4.0
1997 
Photoshop 5.0
2000 
Photoshop 6.0
2002 
Photoshop 7.0
2003 
Photoshop CS1
2005 
Photoshop CS2
2007 
Photoshop CS3
2008 
Photoshop CS4
2010 
Photoshop CS5
2012 
Photoshop CS6
2013 
Photoshop CC
2014 
Photoshop CC 2014
2017 
Photoshop CC 2017
2015 
Photoshop CC 2016
2016 
Photoshop CC 2016

SYZYGY.DE
1988 
Photoshop 0.07
1989 
Photoshop 0.87
1990 
Photoshop 1.07
1993 
Photoshop 2.01
1995 
Photoshop 3.0
1996 
Photoshop 4.0
1997 
Photoshop 5.0
2000 
Photoshop 6.0
2002 
Photoshop 7.0
2003 
Photoshop CS1
2005 
Photoshop CS2
2007 
Photoshop CS3
2008 
Photoshop CS4
2010 
Photoshop CS5
2012 
Photoshop CS6
2013 
Photoshop CC
2014 
Photoshop CC 2014
2017 
Photoshop CC 2017
2015 
Photoshop CC 2016

SYZYGY.DE
Sketch benefits
Data connections
sketchapp.com/features
Value overrides
Open company
Development oriented
Native, fast, light application
Non-Destructive
Active plugin community
Web engine rendering
Small, open files
Nested symboles Resolution independent

SYZYGY.DE
Sketch 
Bohemian
Photoshop 
Adobe
Affinity 
Serif
+

SYZYGY.DE
Interesting design tooling
affinity.serif.com webflow.com
figma.com
froont.com
weebly.com
macaw.co
sketchapp.com
webydo.comsubformapp.com
Design @ Web-CMSDesign @ Web
Design @ Desktop
Prototyping Tools
antetype.com
framer.com
proto.io
invisionapp.com
flinto.com
uxpin.com
adobe.ly/xd

SYZYGY.DE
Choose Sketch! 
Workflow

SYZYGY.DE
Workflow & communication (.. so 2013)
PM send PNG via Mail
Concept
Feedback to client
Development
File_v1.psd File_v2.psd
File_final-final-final.psd
.PNG mit Annotation and
Comments via Ticketsystem
Briefing via Call / Mails
Printed .PNG
with handwritten annotation
scanned, send via Mail or Fax
Feedback CD
verbal
Feedback from client
File_v3.psd
File_xxx.psd
File_xxx.psd
verbal update
verbal / via Ticketsystem

SYZYGY.DE
Workflow & communication
Sketch-FileConcept
Feedback to client
Development
Briefing via Ticketsystem
Feedback from client
Shared Pattern
library
via Annotations
Presentation,
Prototyping,
Collaboration,
Assetmanagement
1
PERFECT WORK!
But .. we dislike our own  
brand color, replace that!
via Annotations
2017
sync

SYZYGY.DE
Choose Sketch! 
Organisation

SYZYGY.DE
Future friendly manifesto
futurefriend.ly #ffly @future_friendly

SYZYGY.DE
Atomic
Number
Symbol
Atomic
Mass
Name
Electron Configuration
Electron Shells
1A 8A
2
IIA
2A
13
IIIA
3A
14
IVA
4A
15
VA
5A
16
VIA
6A
17
VIIA
7A
3
IIIB
3B
4
IVB
4B
5
VB
5B
6
VIB
6B
7
VIIB
7B
8 9
VIII
8
10 11
IB
1B
12
IIB
2B
Periodic Table of the Elements
Lanthanide
Series
Actinide
Series
Element symbol represents state at room temperature.
Solid, Liquid or Gas
[Rn]5f107s2[Rn]5f97s2[Rn]5f67s2 [Rn]5f77s2
[Xe]4f75d16s2[Xe]4f56s2[Xe]4f46s2[Xe]4f36s2[Xe]4f15d16s2[Xe]5d16s2 [Xe]4f96s2 [Xe]4f106s2 [Xe]4f116s2 [Xe]4f126s2 [Xe]4f136s2 [Xe]4f146s2[Xe]4f66s2 [Xe]4f76s2
[Rn]5f146d17s2
[Xe]4f145d16s2
[Rn]5f76d17s2[Rn]5f46d17s2[Rn]5f36d17s2[Rn]5f26d17s2[Rn]6d27s2[Rn]6d17s2
[Rn]7s2[Rn]7s1
[Xe]6s2[Xe]6s1
[Kr]5s2[Kr]5s1
[Rn]5f147s2[Rn]5f137s2[Rn]5f127s2[Rn]5f117s2
1s1
[Rn]5f146d107s27p2*[Rn]5f146d107s27p3*[Rn]5f146d107s27p4*[Rn]5f146d107s27p5*[Rn]5f146d107s27p6*[Rn]5f146d107s27p1*[Rn]5f146d107s2*[Rn]5f146d97s2*[Rn]5f146d87s2*[Rn]5f146d77s2*[Rn]5f146d67s2*[Rn]5f146d57s2*[Rn]5f146d47s2*[Rn]5f146d37s2*
[Xe]4f145d66s2 [Xe]4f145d76s2 [Xe]4f145d96s1 [Xe]4f145d106s1 [Xe]4f145d106s2 [Xe]4f145d106s26p1 [Xe]4f145d106s26p2 [Xe]4f145d106s26p3 [Xe]4f145d106s26p4 [Xe]4f145d106s26p5 [Xe]4f145d106s26p6
[Kr]4d105s25p1[Kr]4d105s2[Kr]4d10[Kr]4d85s1[Kr]4d75s1[Kr]4d55s2[Kr]4d55s1[Kr]4d45s1[Kr]4d25s2[Kr]4d15s2 [Kr]4d105s1 [Kr]4d105s25p2 [Kr]4d105s25p3 [Kr]4d105s25p4 [Kr]4d105s25p5 [Kr]4d105s25p6
[Ar]3d104s24p1[Ar]3d104s2[Ar]3d84s2[Ar]3d74s2[Ar]3d64s2[Ar]3d54s2[Ar]3d54s1[Ar]3d34s2[Ar]3d24s2[Ar]3d14s2 [Ar]3d104s1 [Ar]3d104s24p2 [Ar]3d104s24p3 [Ar]3d104s24p4 [Ar]3d104s24p5 [Ar]3d104s24p6
[Ne]3s23p1 [Ne]3s23p2 [Ne]3s23p3 [Ne]3s23p4 [Ne]3s23p5 [Ne]3s23p6
[Ar]4s1
[Ne]3s1
[He]2s22p1 [He]2s22p2 [He]2s22p3 [He]2s22p4 [He]2s22p5 [He]2s22p6[He]2s1
[Ar]4s2
[Ne]3s2
[He]2s2
1s2
[Xe]4f145d56s2[Xe]4f145d46s2[Xe]4f145d36s2
[Rn]5f146d27s2*
[Xe]4f145d26s2
114 115 116 117 118
1
3 4
11 12
19 20 21 22 23 24 25 26 27 28 29 30 31
13
5
32
14
6
33
15
7
34
16
8
35
17
9
36
18
10
2
37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
55 56 57-71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
87 88 89-103
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
104 105 106 107 108 109 110 111 112 113 [298] unknown unknown[269] [268] [269] [272] [277] unknown [289] unknown
[254] 257.095 258.1 259.101 [262]
[261] [262] [266] [264]
232.038 231.036 238.029 237.048 244.064 243.061 247.070 247.070 251.080
162.500 164.930 167.259 168.934 173.055 174.967
227.028
138.905 140.116 140.908 144.243 144.913 150.36 151.964 157.25 158.925
200.592 204.383 207.2 208.980 [208.982] 209.987 222.018
223.020 226.025
88.906 91.224 92.906 95.95 98.907 101.07 102.906 106.42 107.868 112.414 114.818 118.711 121.760 127.6 126.904 131.249
132.905 137.328 178.49 180.948 183.84 186.207 190.23 192.217 195.085 196.967
1.008
6.941 9.012
22.990 24.305
39.098 40.078 44.956 47.88 50.942 51.996 54.938 55.845 58.933 58.693 63.546 65.38 69.723
26.982
10.811
72.631
28.086
12.011
74.922
30.974
14.007
78.971
32.066
15.999
79.904
35.453
18.998
84.798
39.948
20.180
4.003
84.468 87.62
Hydrogen
Lithium Beryllium
Sodium Magnesium
Potassium Calcium Scandium Titanium Vanadium Chromium Manganese Iron Cobalt Nickel Copper Zinc Gallium
Aluminum
Boron
Germanium
Silicon
Carbon
Arsenic
Phosphorus
Nitrogen
Selenium
Sulfur
Oxygen
Bromine
Chlorine
Fluorine
Krypton
Argon
Neon
Helium
Rubidium Strontium Yttrium Zirconium Niobium Molybdenum Technetium Ruthenium Rhodium Palladium Silver Cadmium Indium Tin Antimony Tellurium Iodine Xenon
Cesium Barium Hafnium Tantalum Tungsten Rhenium Osmium Iridium Platinum Gold Mercury Thallium Lead Bismuth Polonium Astatine Radon
Francium Radium
Lanthanum Cerium Praseodymium Neodymium Promethium Samarium Europium Gadolinium Terbium Dysprosium Holmium Erbium Thulium Ytterbium Lutetium
Actinium Thorium Protactinium Uranium Neptunium Plutonium Americium Curium Berkelium Californium Einsteinium Fermium Mendelevium Nobelium Lawrencium
Rutherfordium Dubnium Seaborgium Bohrium Hassium Meitnerium Darmstadtium Roentgenium Copernicium Ununtrium Flerovium Ununpentium Livermorium Ununseptium Ununoctium
Alkali
Metal
Alkaline
Earth
Transition
Metal
Basic
Metal
Metalloid Nonmetal Halogen
Noble
Gas
Lanthanide Actinide
Uup Lv Uus UuoRf Db Sg Bh Hs Mt Ds Rg Cn Uut Fl
Am Cm Bk Cf Es Fm Md No LrTh Pa U Np Pu
Eu Gd Tb Dy Ho Er Tm Yb Lu
Ac
At Rn
Fr Ra
La Ce Pr Nd Pm Sm
Cs Ba Hf Ta W Re Os Ir Pt Au Hg Tl Pb Bi Po
H
Li Be
Na Mg
K Ca Sc Ti V Cr Mn Fe Co Ni Cu Zn Ga
Al
B
Ge
Si
C
As
P
N
Se
S
O
Br
Cl
F
Kr
Ar
Ne
He
Rb Sr Y Zr Nb Mo Tc Ru Rh Pd Ag Cd In Sn Sb Te I Xe
2 8 18 32 9 22 8 18 32 8 22 8 18 31 8 22 8 18 30 8 22 8 18 29 8 22 8 18 28 8 22 8 18 27 8 22 8 18 25 9 22 8 18 25 8 22 8 18 24 8 22 8 18 23 8 22 8 18 22 8 22 8 18 21 8 22 8 18 20 8 22 8 18 18 9 2
2 8 18 32 32 9 22 8 18 32 32 8 22 8 18 32 31 8 22 8 18 32 30 8 22 8 18 32 29 8 22 8 18 32 28 8 22 8 18 32 27 8 22 8 18 32 25 9 22 8 18 32 25 8 22 8 18 32 24 8 22 8 18 32 23 8 22 8 18 32 21 9 22 8 18 32 20 9 22 8 18 32 18 10 22 8 18 32 18 9 2
2 8 18 32 32 18 82 8 18 32 32 18 72 8 18 32 32 18 62 8 18 32 32 18 52 8 18 32 32 18 42 8 18 32 32 18 32 8 18 32 32 18 22 8 18 32 32 17 22 8 18 32 18 8 22 8 18 32 18 8 1 2 8 18 32 32 15 22 8 18 32 32 14 22 8 18 32 32 13 22 8 18 32 32 12 22 8 18 32 32 11 2 2 8 18 32 32 16 22 8 18 32 32 10 2
2 8 18 32 18 82 8 18 32 18 72 8 18 32 18 62 8 18 32 18 52 8 18 32 18 42 8 18 32 18 32 8 18 32 18 22 8 18 32 18 12 8 18 18 8 22 8 18 18 8 1 2 8 18 32 15 22 8 18 32 14 22 8 18 32 13 22 8 18 32 12 22 8 18 32 11 2 2 8 18 32 17 12 8 18 32 10 2
2 8 18 18 82 8 18 18 72 8 18 18 62 8 18 18 52 8 18 18 42 8 18 18 32 8 18 18 22 8 18 18 12 8 18 9 22 8 18 8 22 8 18 8 1 2 8 18 16 12 8 18 15 12 8 18 14 12 8 18 13 12 8 18 12 1 2 8 18 182 8 18 10 2
2 8 18 82 8 18 72 8 18 62 8 18 52 8 18 42 8 18 32 8 18 22 8 18 12 8 9 22 8 8 22 8 8 1 2 8 15 22 8 14 22 8 13 22 8 13 12 8 11 2 2 8 16 22 8 10 2
2 8 82 8 72 8 62 8 52 8 42 8 32 8 22 8 1
2 8
2
2 72 62 52 42 32 22 1
1
Periodic system

SYZYGY.DE
Atomic Design
atoms molecules organisms templates pages

SYZYGY.DE
Atomic Design
• Consistent design principle
• Improved workflows
• Unified vocabulary
• Easter to test
• Useful reference

SYZYGY.DE
Molecules
Atomic Design - Example
Organisms PagesAtoms

SYZYGY.DE
Shared Pattern Library via Craft-Plugin
Prototype
Sync
Data
Library
Duplicate
Freehand

SYZYGY.DE
Library Duplicate Sync

SYZYGY.DE
Prototype Presentation

SYZYGY.DE
Versioning, collaboration & asset management via zeplin.io

SYZYGY.DE
Sketch Meetup Frankfurt 
Join us, there.

SYZYGY.DE
Next
Jan Feb Mär Apr Mai Jun Jul Aug Sep Okt Nov Dez
Prototyping Plugins Pro Users

SYZYGY.DE
Meetup Location Sponsor?
1 !
75 "
25 #$
Rhein/Main area

Choose SketchApp over Photoshop for UI/UX

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Choose SketchApp over Photoshop for UI/UX

Ähnlich wie Choose SketchApp over Photoshop for UI/UX (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Choose SketchApp over Photoshop for UI/UX