SYZYGY.DE SketchApp Meetup Germany Round #1
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 SYZYGYArs 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
Clients
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
Sketch Meetup Germany Clickbait
SYZYGY.DE
SYZYGY.DE
CEO, Stephen Elop
SYZYGY.DE
but somehow,we lost.”
“We didn’t doanything wrong,
SYZYGY.DE
SYZYGY.DE
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
SYZYGY.DE
CEO, Stephen Elop
SYZYGY.DE
Sketch Meetup Germany 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
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
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
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
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
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
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
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
Sketch Meetup Germany 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
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
2017 Photoshop CC 2017
2015 Photoshop CC 2016
2016 Photoshop CC 2016
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
2017 Photoshop CC 2017
2015 Photoshop CC 2016
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
2017 Photoshop CC 2017
2015 Photoshop CC 2016
SYZYGY.DE
© WebDesignerDepot Staffhttp://www.webdesignerdepot.com/2015/03/infographic-sketch-vs-photoshop
SYZYGY.DE
SYZYGY.DE
SYZYGY.DE
SYZYGY.DE
SYZYGY.DE
SYZYGY.DE
SYZYGY.DE
SYZYGY.DE
SYZYGY.DE
SYZYGY.DE
SYZYGY.DE
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
Sketch Meetup Germany 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
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 noch mehr Demo Magie
SYZYGY.DE
Sketch Shortcuts
https://designcode.io/sketch-keyboard
SYZYGY.DE
Eigene Kurzweg-Tasten definieren
OsX Systemeinstellungen
SYZYGY.DE
Sketch Meetup Germany 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 1KonzeptFeedback an Kunde
Entwicklung / Umsetzung
Briefing per Ticketsystem
Feedback von Kunde
Shared Pattern library
per AnnotationPrä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
SYZYGY.DE
SYZYGY.DE
AtomicNumber
Symbol
AtomicMass
Name
Electron Configuration
Electron Shells
1A 8A
2IIA2A
13IIIA3A
14IVA4A
15VA5A
16VIA6A
17VIIA7A
3IIIB3B
4IVB4B
5VB5B
6VIB6B
7VIIB7B
8 9VIII8
10 11IB1B
12IIB2B
Periodic Table of the Elements
LanthanideSeries
ActinideSeries
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
AlkaliMetal
AlkalineEarth
TransitionMetal
BasicMetal 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
Demo-Time
SYZYGY.DE
Workflow Collaboration & Assetmanagement
SYZYGY.DE
Collaboration & Assetmanagement mit Zeplin
SYZYGY.DE
Demo-Time
SYZYGY.DE
Workflow 1 Fazit
SYZYGY.DE
1 Fazit
konsistent, transparent, skalierbar, effizient abstrakt, arbeitsintensiv, kompromisslos
SYZYGY.DE
Sketch Meetup Germany 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
3 Lizenzen
SYZYGY.DE
-50% / 3 Monate - Für Alle!3 Lizenzen
#CODE: ZEPLIN LOVES SMG
SYZYGY.DE
Bis bald.
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
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.