Jens Hoffmann, profile picture
Uploaded byJens Hoffmann
PDF, PPTX1,362 views

Choose SketchApp over Photoshop for UI/UX

The document outlines the advantages of using Sketch over Photoshop for UI/UX design. It discusses various design processes, tools, and workflows involved in digital marketing and technology. Additionally, it highlights the evolution of prominent design software and emphasizes the need for innovative design approaches and improved productivity in creative teams.

Embed presentation

Download as PDF, PPTX
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 Clients
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
SYZYGY.DE CEO, Stephen Elop
SYZYGY.DE but somehow, we lost.” “We didn’t do anything 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 CEO, Stephen Elop
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 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 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 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 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 2017
 Photoshop CC 2017 2015
 Photoshop CC 2016 2016
 Photoshop CC 2016
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 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
SYZYGY.DE
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
SYZYGY.DE Shared Pattern Library via Craft-Plugin Prototype Sync Data Library Duplicate Freehand
SYZYGY.DE Library Duplicate Sync
SYZYGY.DE Data
SYZYGY.DE Freehand
SYZYGY.DE Prototype Presentation
SYZYGY.DE Versioning, collaboration & asset management via zeplin.io
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
SYZYGY.DE 
 See you.

More Related Content

PDF
SketchApp Meetup Frankfurt - #1st Round
byJens Hoffmann
 
PDF
UX-Vision for the next TYPO3 CMS
byJens Hoffmann
 
PDF
Prototyping invision vs axure
byAndrii Rusakov
 
PDF
Optimising your design process for a short timeframe
byTiffany Teng
 
PPTX
Prototyping
byMatt Hurley
 
PPTX
Prototyping tools
byJoël Plas
 
PPT
Design Prototyping
byFrancis Rowland
 
PPTX
Design Prototyping: Bringing Wireframes to Life
bygoodfriday
 
SketchApp Meetup Frankfurt - #1st Round
byJens Hoffmann
 
UX-Vision for the next TYPO3 CMS
byJens Hoffmann
 
Prototyping invision vs axure
byAndrii Rusakov
 
Optimising your design process for a short timeframe
byTiffany Teng
 
Prototyping
byMatt Hurley
 
Prototyping tools
byJoël Plas
 
Design Prototyping
byFrancis Rowland
 
Design Prototyping: Bringing Wireframes to Life
bygoodfriday
 

What's hot

PPTX
Prototyping in the design process
byIndustrial Design Center
 
PDF
Lean prototyping - Talk @ Alibaba UED
byTony (Soo) Kim
 
PDF
Prototyping
byChad Udell
 
PDF
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
byNorthernUX
 
PDF
Goto berlin 10-2014
byCourtney Hemphill
 
PDF
A New Era at IBM. Lean UX leading the way. Agile 2013
byAriadna Font Llitjos
 
PPTX
Lean Prototyping - A Practical Guide
byFramebench
 
PPTX
UX Army of One
byJanna Hill
 
PDF
Building a UX Portfolio
byLauren Lamonica Rosenthal
 
PDF
UX Portfolio Workshop for exploreUX
byMichelle Chin
 
PDF
Think you know your user? Think Again (Agile 2013)
byAriadna Font Llitjos
 
PDF
Ship your product with zero code - No Code Conf 2019 Workshop
byWebflow
 
PDF
Designing At Scale: IBM & MURAL
byMURAL
 
PDF
IBM Design Thinking Overview at Hannover Messe 2017
byRyan Boyles
 
PDF
UX/UI Portfolio
byNaman Bhatnagar
 
PDF
A New Toolbox: Artifact Providence 2013
byKevin Sharon
 
PDF
Design Tools Workshop
byprecious design studio
 
PDF
IBM Design Thinking - nano - Workshop @Sprint Collaboration Day
byAdilson Chicória
 
PDF
The Quest for the Ultimate UX Portfolio
byPradeep Nayar
 
PPTX
Design for Startups
byJenny Lam
 
Prototyping in the design process
byIndustrial Design Center
 
Lean prototyping - Talk @ Alibaba UED
byTony (Soo) Kim
 
Prototyping
byChad Udell
 
Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing
byNorthernUX
 
Goto berlin 10-2014
byCourtney Hemphill
 
A New Era at IBM. Lean UX leading the way. Agile 2013
byAriadna Font Llitjos
 
Lean Prototyping - A Practical Guide
byFramebench
 
UX Army of One
byJanna Hill
 
Building a UX Portfolio
byLauren Lamonica Rosenthal
 
UX Portfolio Workshop for exploreUX
byMichelle Chin
 
Think you know your user? Think Again (Agile 2013)
byAriadna Font Llitjos
 
Ship your product with zero code - No Code Conf 2019 Workshop
byWebflow
 
Designing At Scale: IBM & MURAL
byMURAL
 
IBM Design Thinking Overview at Hannover Messe 2017
byRyan Boyles
 
UX/UI Portfolio
byNaman Bhatnagar
 
A New Toolbox: Artifact Providence 2013
byKevin Sharon
 
Design Tools Workshop
byprecious design studio
 
IBM Design Thinking - nano - Workshop @Sprint Collaboration Day
byAdilson Chicória
 
The Quest for the Ultimate UX Portfolio
byPradeep Nayar
 
Design for Startups
byJenny Lam
 

Similar to Choose SketchApp over Photoshop for UI/UX

DOCX
Jyo_UI-UX Designer Resume
byjyothsna joy
 
PDF
User Experience: An Industry (Always) in Transition
byGino Zahnd
 
PDF
How Do I UX?
byDave Stadler
 
PPTX
UI/UX Fundamentals
byDijup Tuladhar
 
PDF
How Do I UX by Quick Left
byQuick Left, Inc.
 
DOC
Ashishuiuxdesigner resume-doc-97-2003
byAshish Kumar
 
PDF
UX Tools
byHong Qu
 
PDF
Design Learnings
byQuikr
 
PPTX
The Right Tools for the Job: Designing Your UX Approach
byCaroline Sober-James
 
PDF
UX Bootcamp @ General Assembly Atlanta
byJacklyn Burgan
 
PDF
Fundamentals of Web Design - Professional Development Workshop
byBrenna Mickey
 
PDF
UX, UI design portfolio for mobile and tablet applications
byPrasad Coorg
 
PPTX
User Experience Design
byAngela Wise
 
PDF
Crafting Experience
byReza Budi Prabowo
 
PDF
UX/UI Introduction
byShrutee Aneja
 
PDF
Graphic Designer Resume and Portfolio_Jeeva
byJeevanandham Mahalingam
 
PDF
Adobe Tools for UX Designers
byDee Sadler
 
KEY
Designing the mobile experience
byJoseph Dickerson
 
PPT
User Experience Roles Competencies
bySameer Chavan
 
PPTX
Design Strategy for Nanobi
byKarthikeyan P
 
Jyo_UI-UX Designer Resume
byjyothsna joy
 
User Experience: An Industry (Always) in Transition
byGino Zahnd
 
How Do I UX?
byDave Stadler
 
UI/UX Fundamentals
byDijup Tuladhar
 
How Do I UX by Quick Left
byQuick Left, Inc.
 
Ashishuiuxdesigner resume-doc-97-2003
byAshish Kumar
 
UX Tools
byHong Qu
 
Design Learnings
byQuikr
 
The Right Tools for the Job: Designing Your UX Approach
byCaroline Sober-James
 
UX Bootcamp @ General Assembly Atlanta
byJacklyn Burgan
 
Fundamentals of Web Design - Professional Development Workshop
byBrenna Mickey
 
UX, UI design portfolio for mobile and tablet applications
byPrasad Coorg
 
User Experience Design
byAngela Wise
 
Crafting Experience
byReza Budi Prabowo
 
UX/UI Introduction
byShrutee Aneja
 
Graphic Designer Resume and Portfolio_Jeeva
byJeevanandham Mahalingam
 
Adobe Tools for UX Designers
byDee Sadler
 
Designing the mobile experience
byJoseph Dickerson
 
User Experience Roles Competencies
bySameer Chavan
 
Design Strategy for Nanobi
byKarthikeyan P
 

Recently uploaded

PPTX
SoundSource 6.0.0 Crack for MacOS Full Version Download
bySoftware
 
PPTX
coverpage for acr on professional code of ethics.pptx
byMariaTeresitaArandia1
 
PPTX
Driver Easy Pro Key 7.1.0.2641 Full Mac Crack Free Activated Download [2026]....
bysanaolikhnn
 
PPT
THEORY OF ARCHITECTURE - LECTURE NOTES FOR REFERENCE
bykanakatharak1
 
PPTX
Staffing Board - MICU1111111111111111111
byaustinpuckett2808
 
PDF
induction and two in one event with party
byrosaleaaprilacebuche1
 
PPTX
Wondershare Filmora 15.0.11 Crack for Mac Key Full Download [Latest] pptx
bysanaolikhnn
 
PDF
Morgenbooster_Drakonheart_Designing_for_creative_kids.pdf
by1508 A/S
 
PDF
Cultural dimensions and global web user interface design
byfiorellacastanedat
 
PPTX
AnyTrans for iOS 8.9.14.20251127 With Crack for MacOS [Latest] pptx
bysohlakhnn
 
PPTX
Become a Professional UI/UX Designer by Learning How to Create Beautiful, Use...
bykandi4191
 
PDF
Architect Saleem khattak (Archi) Portfolio
byArSaleemktk
 
PPTX
iStat Menus 7.20 Crack for MacOS 2026 Full Version [Latest] pptx
bysohlakhnn
 
PPTX
block chain and their importance in real life.pptx
byjeevanreddypappu
 
PDF
International Journal of Information Technology, Modeling and Computing (IJITMC)
byZac Darcy
 
PPTX
PowerISO 9.2 Mac Crack + Serial Key Free Download 2026 [Latest] Software.pptx
bysanaolikhnn
 
PPTX
Test Powerpoint with embedded video.pptx
bystuartfeldman9
 
PPTX
Construction area photographs site visit
byArpitJha13
 
PPTX
Artificial Intelligence basic notes for engineering.pptx
byKiranG764628
 
PPTX
iTools 4.5.1.9 Crack for macOS 100% Working 2026 Fully Unlocked pptx
bysohlakhnn
 
SoundSource 6.0.0 Crack for MacOS Full Version Download
bySoftware
 
coverpage for acr on professional code of ethics.pptx
byMariaTeresitaArandia1
 
Driver Easy Pro Key 7.1.0.2641 Full Mac Crack Free Activated Download [2026]....
bysanaolikhnn
 
THEORY OF ARCHITECTURE - LECTURE NOTES FOR REFERENCE
bykanakatharak1
 
Staffing Board - MICU1111111111111111111
byaustinpuckett2808
 
induction and two in one event with party
byrosaleaaprilacebuche1
 
Wondershare Filmora 15.0.11 Crack for Mac Key Full Download [Latest] pptx
bysanaolikhnn
 
Morgenbooster_Drakonheart_Designing_for_creative_kids.pdf
by1508 A/S
 
Cultural dimensions and global web user interface design
byfiorellacastanedat
 
AnyTrans for iOS 8.9.14.20251127 With Crack for MacOS [Latest] pptx
bysohlakhnn
 
Become a Professional UI/UX Designer by Learning How to Create Beautiful, Use...
bykandi4191
 
Architect Saleem khattak (Archi) Portfolio
byArSaleemktk
 
iStat Menus 7.20 Crack for MacOS 2026 Full Version [Latest] pptx
bysohlakhnn
 
block chain and their importance in real life.pptx
byjeevanreddypappu
 
International Journal of Information Technology, Modeling and Computing (IJITMC)
byZac Darcy
 
PowerISO 9.2 Mac Crack + Serial Key Free Download 2026 [Latest] Software.pptx
bysanaolikhnn
 
Test Powerpoint with embedded video.pptx
bystuartfeldman9
 
Construction area photographs site visit
byArpitJha13
 
Artificial Intelligence basic notes for engineering.pptx
byKiranG764628
 
iTools 4.5.1.9 Crack for macOS 100% Working 2026 Fully Unlocked pptx
bysohlakhnn
 

Choose SketchApp over Photoshop for UI/UX

  • 1.
  • 2.
    SYZYGY.DE Jens Hoffmann
 Creative Director@ SYZYGY
 web | ux | design | strategy @wrybit Me.
  • 3.
    SYZYGY.DE New York SYZYGY Ars Thanea London SYZYGY Hi-ReS! Berlin Hi-ReS! USEEDS Frankfurt SYZYGY Hamburg SYZYGY Warschau SYZYGY
 ArsThanea 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
  • 4.
  • 5.
  • 6.
    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
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
    SYZYGY.DE but somehow, we lost.” “Wedidn’t do anything wrong,
  • 13.
  • 14.
  • 15.
    SYZYGY.DE Evolution of Nokia 1987 MOBIRACITYMAN 900 1994 NOKIA 232 1998 NOKIA 282 2000 NOKIA 3310 2007 NOKIA N81 2008 NOKIA 6220 CLASSIC 2011 NOKIA N9 2011 NOKIA LUMINA 930
  • 16.
    SYZYGY.DE Evolution of Nokia 1987 MOBIRACITYMAN 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
  • 17.
  • 18.
  • 19.
    SYZYGY.DE Basis skills Technical 
 knowledge Innovative
 ideas Theoretical 
 knowledge Precise
 look Empathy Aesthetic
 intuition Interdisciplinary knowledgeSelf-Reflexion Arguments Abstraction
  • 20.
    SYZYGY.DE Frontend 
 Frameworks Atomic 
 Design Responsive
 Web Design CSS3, SVG, .. Modern technical paradigms Assets
 Production …
  • 21.
  • 22.
    SYZYGY.DE Design Process Personae User stories Userjourneys/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
  • 23.
    SYZYGY.DE Design Process Personae User stories Userjourneys/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
  • 24.
    SYZYGY.DE Design Process Personae User stories Userjourneys/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
  • 25.
    SYZYGY.DE Design Process Personae User stories Userjourneys/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
  • 26.
    SYZYGY.DE Design Process Personae User stories Userjourneys/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
  • 27.
    SYZYGY.DE Design Process Personae User stories Userjourneys/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
  • 28.
    SYZYGY.DE Design Process Personae User stories Userjourneys/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
  • 29.
    SYZYGY.DE Design Process Personae User stories Userjourneys/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
  • 30.
    SYZYGY.DE Design Process Personae User stories Userjourneys/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
  • 31.
    SYZYGY.DE Design Process Personae User stories Userjourneys/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 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
  • 32.
  • 33.
    SYZYGY.DE 2011
 Fontcase 2.0 Evolution ofBohemian 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
  • 34.
    SYZYGY.DE Evolution of AdobePhotoshop 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
  • 35.
    SYZYGY.DE Evolution of AdobePhotoshop 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
  • 36.
    SYZYGY.DE Evolution of AdobePhotoshop 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
  • 37.
    SYZYGY.DE Sketch benefits Data connections sketchapp.com/features Valueoverrides Open company Development oriented Native, fast, light application Non-Destructive Active plugin community Web engine rendering Small, open files Nested symboles Resolution independent
  • 38.
  • 39.
    SYZYGY.DE Interesting design tooling affinity.serif.comwebflow.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
  • 40.
  • 41.
    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
  • 42.
    SYZYGY.DE Workflow & communication Sketch-FileConcept Feedbackto 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
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
    SYZYGY.DE Atomic Number Symbol Atomic Mass Name Electron Configuration Electron Shells 1A8A 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
  • 48.
    SYZYGY.DE Atomic Design atoms moleculesorganisms templates pages
  • 49.
    SYZYGY.DE Atomic Design • Consistentdesign principle • Improved workflows • Unified vocabulary • Easter to test • Useful reference
  • 50.
    SYZYGY.DE Molecules Atomic Design -Example Organisms PagesAtoms
  • 51.
  • 52.
    SYZYGY.DE Shared Pattern Libraryvia Craft-Plugin Prototype Sync Data Library Duplicate Freehand
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
    SYZYGY.DE Versioning, collaboration &asset management via zeplin.io
  • 58.
    SYZYGY.DE Versioning, collaboration &asset management via zeplin.io
  • 59.
  • 60.
    SYZYGY.DE Next Jan Feb MärApr Mai Jun Jul Aug Sep Okt Nov Dez Prototyping Plugins Pro Users
  • 61.
    SYZYGY.DE Meetup Location Sponsor? 1! 75 " 25 #$ Rhein/Main area
  • 62.