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 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

http://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

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

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




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





SYZYGY.DE

© WebDesignerDepot Staffhttp://www.webdesignerdepot.com/2015/03/infographic-sketch-vs-photoshop

http://www.webdesignerdepot.com/2015/03/infographic-sketch-vs-photoshop

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

http://sketchapp.com/features

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

http://affinity.serif.com

http://webflow.com

http://figma.com

http://wix.com

http://froont.com

http://weebly.com

http://macaw.co

http://sketchapp.com

http://webydo.com

https://subformapp.com

http://antetype.com

http://framer.com

http://proto.io

http://invisionapp.com

http://flinto.com

http://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

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

E [email protected]

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.