SketchApp Meetup Frankfurt - #1st Round

SYZYGY.DE
SketchApp  
Meetup Germany
Round #1

SYZYGY.DE
New York
SYZYGY
Ars Thanea
London
SYZYGY
Hi-ReS!
Unique
Berlin
Hi-ReS!
USEEDS
Frankfurt
SYZYGY
Hamburg
Unique
Warschau
SYZYGY 
Ars Thanea
Bad Homburg
SYZYGY
600 employees
13 units
1995 Gegründet
München
SYZYGY
gross income60m €
SYZYGY Group
Digital Marketing & Technology Digital Media Digital Creatives 3D, Gaming & Mobile Digital Concept & User Insights

SYZYGY.DE
Awards
Mehr als 200 Awards

Development
Teamlead Frontend 
Frontend Dev / PHP Dev / TYPO3 Dev
Design
User Experience Architect / Art Director 
Concept / Copywriter
Consulting
Account Manager / Project Manager
Service
DevOps / IT Support
Hallo neuer Kollege
www.syzygy.de/jobs

SYZYGY.DE
Sketch Meetup Germany 
Darum Sketch!

SYZYGY.DE
Darum Sketch!
VergleichMomentum Anforderungen

SYZYGY.DE
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
Skills

SYZYGY.DE
Basis Fähigkeiten
Handwerkliches  
Fachwissen
Innovative  
Lösungen
Theoretisches  
Fachwissen
Präzises  
Auge
Empathie
Ästhetische  
Intuition
Interdisziplinäres
FachwissenSelbstreflexion
Argumentation
Abstraktion

SYZYGY.DE
Frontend  
Frameworks
Atomic  
Design
Responsive  
Web Design
CSS3, SVG, ..
Moderne technische Paradigmen
Assets 
Production
…

SYZYGY.DE
Design Process
DescriptionDiscovery DesignDefinition Development

SYZYGY.DE
Design Process
Personae
User stories
User journeys/flows
Information architecture
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
Produkte

SYZYGY.DE
2011 
Fontcase 2.0
Evolution von 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
2017 
Meetup FFM
Founder 
Pieter Omvlee

SYZYGY.DE
Evolution von 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
© WebDesignerDepot Staff
http://www.webdesignerdepot.com/2015/03/infographic-sketch-vs-photoshop

SYZYGY.DE
Sketch Kernvorteile
Datenanbindung
sketchapp.com/features
Verschachtelte Symbole
Interessiertes Unternehmen
Entwicklungsorientiert
Performante & Kompakte App
Nicht-Destruktiv
Plugin-Community
Auflösungsunabhängig
Kleine & Offene Dateien

SYZYGY.DE
Sketch 
Bohemian
Photoshop 
Adobe
Affinity 
Serif
+

SYZYGY.DE
Zukunftweisendes Tooling
affinity.serif.com webflow.com
figma.com
wix.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

SYZYGY.DE
Einsteiger Tutorial

SYZYGY.DE
Alles was ihr hier seht ist gratis!

SYZYGY.DE
Tutorial „Was erwartet euch“
Teil 1 für Anfänger Teil 2 für Fortgeschrittene
Grundlegender Aufbau
Pages / Artboards / Layer
Grid & Layout
Diverse Elemente anlegen
Maskierungen
Symbole anlegen
Arbeiten mit Symbolen - The Royale Way
Iconfonts
Resizing
Tastenkürzel

SYZYGY.DE
Zeit für Demo Magic

SYZYGY.DE
Zeit für noch mehr Demo Magie

SYZYGY.DE
Sketch Shortcuts
https://designcode.io/sketch-keyboard

SYZYGY.DE
Eigene Kurzweg-Tasten definieren
OsX Systemeinstellungen

SYZYGY.DE
Workflow

SYZYGY.DE
Workflow & Kommunikation (so 2013)
.PNG per Mail
Konzept
Feedback an Kunde
Entwicklung /
Umsetzung
Datei_v1.psd Datei_v2.psd
Datei_final-final-final.psd
.PNG mit Bemaßungen und
Anmerkungen per Ticketsystem
Briefing per PMS / Mails
ausgedrucktes .PNG
mit handschriftlichen Anmerkungen,
gescannt, per Mail
Feedback CD
mündlich
Feedback von Kunde
Datei_v3.psd
Datei_xxx.psd
Datei_xxx.psd
mündlich
mündlich/ per Ticketsystem

SYZYGY.DE
Workflow & Kommunikation
Sketch-Datei 1Konzept
Feedback an Kunde
Entwicklung /
Umsetzung
Briefing per Ticketsystem
Feedback von Kunde
Shared Pattern
library
per Annotation
Präsentation,
Prototyping,
Collaboration,
Assetmanagement
1
SUPER ARBEIT!
Aber unsere Hausfarbe gefällt
uns nicht. Bitte ändern!!!
per Annotation
2017
sync

SYZYGY.DE
Methodik - Design Systeme  
Atomic Design

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
Periodensystem

SYZYGY.DE
Atomic Design
atoms molecules organisms templates pages

SYZYGY.DE
Atomic Design
• Konsistentes Gestaltungsprinzip
• Verbesserte Arbeitsabläufe
• Einheitliches Vokabular
• Einfacher zu Testen
• Nützliche Referenz

SYZYGY.DE
Moleküle
Atomic Design - Anwendungsbeispiel
Organismus PageAtome

SYZYGY.DE
Atomic Design - Anwendungsbeispiel

SYZYGY.DE
Workflow  
Anlegen einer  
Pattern-Library

SYZYGY.DE
Shared Pattern Library mit Craft-Plugin
DUPLICATE
DATA
SYNC
LIBRARY
PROTOTYPE

SYZYGY.DE
Shared Pattern Library mit Craft

SYZYGY.DE
Workflow  
Collaboration &
Assetmanagement

SYZYGY.DE
Collaboration & Assetmanagement mit Zeplin

SYZYGY.DE
Workflow  
1 Fazit

SYZYGY.DE
1 Fazit
konsistent, transparent, skalierbar, effizient abstrakt, arbeitsintensiv, kompromisslos

SYZYGY.DE
Next

SYZYGY.DE
Round #2 - Prototyping 
Location? - April
 
Round #3 - Plugins 
Location? - Juni
Next
Jan Feb Mär Apr Mai Jun Jul Aug Sep Okt Nov Dez

SYZYGY.DE
Meetup Location Sponsor?
1 !
50 "
20 #$

SYZYGY.DE
-50% / 3 Monate - Für Alle!3 Lizenzen
#CODE: ZEPLINLOVESSMG

SYZYGY.DE
Impressum
Geschäftsführer:
Jan Bach, Felix Schröder,
Marco Seiler
HRB 6009
Amtsgericht Bad Homburg
UST-ID-NR. DE 173 621 238
SYZYGY Deutschland GmbH
Im Atzelnest 3
D-61352 Bad Homburg v.d.H.
T +49 (0)6172 9488-100
F +49 (0)6172 9488-270
E info@syzygy.net
Commerzbank AG
Konto Nr. 960 275 00
BLZ 500 800 00
SWIFT-BIC DRES DE FF
IBAN DE33 500 800 00 00
960 275 00
Die in dieser Präsentation dokumentierten Gedanken und Vorschläge sind  
geistiges Eigentum der SYZYGY Deutschland GmbH und unterliegen den geltenden
Urhebergesetzen.
Die unautorisierte Nutzung, die ganze oder teilweise Vervielfältigung sowie jede
Weitergabe an Dritte sind nicht gestattet.

SketchApp Meetup Frankfurt - #1st Round

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Viewers also liked

Viewers also liked (20)

Similar to SketchApp Meetup Frankfurt - #1st Round

Similar to SketchApp Meetup Frankfurt - #1st Round (20)

Recently uploaded

Recently uploaded (20)

SketchApp Meetup Frankfurt - #1st Round