dwx 2016 - atomic design – frontend und design im rwd-zeitalter - pluswerk

Click here to load reader

Post on 14-Apr-2017

2.476 views

Category:

Design

2 download

Embed Size (px)

TRANSCRIPT

  • ATOMIC DESIGNDIE EINHEIT VON FRONTEND UND DESIGN IM RWD-ZEITALTERPATRICK LOBACHER | +PLUSWERK AG | 22.06.2016 | DEVELOPER WEEK

  • 2

    Patrick Lobacher Vorstandvorsitzender+Pluswerk AG ConsultantTrainer(Agile) CoachAutor

    Fullservice Agentur fr digitale Transformation 12 Niederlassungen in DACH, Polen & Kapstadt 130+ Mitarbeiter 999+ Projekte in den letzten 20 Jahren

  • 3

    Consulting

    StrategieberatungAgile Coaching

    Online MarketingProjektmanagementInnovationsberatung

    Kreation

    MarkenentwicklungKonzeption Design / CI

    UX / Usabilty Text / Redaktion

    Technik

    Websites Portale

    E-CommerceSystementwicklung

    Operations

    Fullservice Agentur fr digitale Transformation

  • 4

    DESIGN IN AGILEN ZEITEN

    Warum ist heute pltzlich alles anders?

  • 5

    DIE GUTEN ALTEN ZEITEN

    Alle Agenturen welche es in die Grundauswahl geschafft haben,

    werden dann in der nchsten Phasedazu aufgefordert einen Designvorschlag zu erstellen.

  • 6

    DIE GUTEN ALTEN ZEITEN

    Planung Wireframes Design Entwicklung Content Qualitts-sicherung

    1 -24 Monate

  • 7

    THE GOOD OLD DAYS

  • 8

  • 9

    WHATS WRONG WITH THIS?

  • 10

    WHATS WRONG WITH THIS?

  • 11 http://opensignal.com/reports/2015/08/android-fragmentation/

    WHATS WRONG WITH THIS?

    24.093 Android Gerte (2015) / 18.796 (2014) / 11.868 (2013)

  • 12 http://opensignal.com/reports/2015/08/android-fragmentation/

    WHATS WRONG WITH THIS?

  • 13 http://atomicdesign.bradfrost.com/chapter-1/

    WHATS WRONG WITH THIS?

  • 14 http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/

    WHATS WRONG WITH THIS?

  • 15

    RWDResponsive Web Design

  • 16

    BERGANGSZEITEN

    Planung Wireframes Design Entwicklung Content Qualitts-sicherung

    Logo Logo Logo

  • 17

    BERGANGSZEITEN

    Planung Wireframes Design Entwicklung Content Qualitts-sicherung

    Logo

    Logo

  • 18

  • 19

    Frontend Planning / Contract

    RWD

    Proto- typing

    ContentStrategy

    DeviceTesting

    StyleTileAtomic DesignContent

    Testing

    CreateContent

    ContentWireframe

    LinearDesign

    JETZT: RWD-PROZESS

  • 20

    ATOMIC DESIGNWarum ist heute pltzlich alles anders?

  • 21

    Were not designing pages, were designing systems of

    components. Steven Hay

  • 22

  • 23

  • 24

  • 25

    FRAMEWORKS? Vorteile liegen auf der Hand

    Rapid Prototyping

    Viele Beispiele / Best Practices

    Hohe Browserkompatibilitt

    Stetige Weiterentwicklung durch Vendor

    Aber Festlegung auf Konventionen, Benennung & Struktur

    one-size-fits-all / individuell

    Viel zu viel nicht bentigter Code

    schlecht skalierbar

  • 26

    PATTERNS - NICHT NEU

    http://patternlab.io/resources.html

  • 27

    One of the biggest advantages atomic design provides is the ability to traverse between abstract and concrete. We can

    simultaneously see our interfaces broken down to their atomic elements and also see

    how those elements combine together to form our final experiences.

    Brad Frost

  • 28 http://joshduck.com/periodic-table.html

  • 29 http://bradfrost.com/blog/post/atomic-web-design/

    ATOMIC DESIGN

  • 30 http://bradfrost.com/blog/post/atomic-web-design/

    ATOME HTML-Tags Farben Schriften Animationen o..

  • 31 http://bradfrost.com/blog/post/atomic-web-design/

    MOLEKLE Kombinierte Atome Backbone des

    Design Systems Zweckmssige

    Einheiten

  • 32 http://bradfrost.com/blog/post/atomic-web-design/

    ORGANISMEN Konkretisierung

    (Interface) Organismen

    bestehen aus hnlichen und/oder verschiedenen Molekl-Typen

  • 33 http://bradfrost.com/blog/post/atomic-web-design/

    TEMPLATES Weitere

    Konkretisierung Kontext fr

    Molekle & Organismen

    Layout in Action

  • 34 http://bradfrost.com/blog/post/atomic-web-design/

    SEITEN Spezifische

    Instanzen der Templates

    Platzhalter-Content wird iterativ durch richtigen ersetzt

  • 35 http://atomicdesign.bradfrost.com/chapter-2/

    TEMPLATES & SEITEN

  • 36 http://atomicdesign.bradfrost.com/chapter-2/

    ATOMIC DESIGN

  • 37

    PATTERNLABLets get started

  • 38

    http://patternlab.io

  • 39 http://patternlab.io

    http://patternlab.io

  • 40 https://github.com/pattern-lab/patternlab-php

  • 41 https://github.com/pattern-lab/patternlab-php

  • 42 https://github.com/pattern-lab/patternlab-php

  • 43 http://www.netcraft.com/active-sites/

    JSON-Dateien mit Dummy-Daten

    Patterns (Mustache, JSON)

    CSS (Plain & SCSS)

    Schriften

    Bilder

    JavaScript

  • 44

    php core/builder.php -wr

    WATCHER

    source/_patterns source/_data

  • 45

    MUSTACHE

    http

    ://m

    usta

    che.g

    ithub

    .io/m

    usta

    che.5

    .htm

    l

  • 46

    BEISPIEL

    mkdir source/_patterns/01-molecules/08-textbild

    Molekl Text mit Bild, welches aus den drei Atomen Quadratisches Bild, Titel und Absatz besteht

  • 47

    BEISPIELcd source/_patterns/01-molecules/08-textbildtouch 00-text-mit-bild.mustache

    Text mit Bild {{> atoms-square }} {{ title }} {{> atoms-paragraph }}

  • 48

    REAL LIFE DEMOPattern Lab im Einsatz

  • 49

    REAL LIFE DEMOhttp://styleguide.typo3.org/?p=all

    http://styleguide.typo3.org/?p=all

  • 50

    REAL LIFE DEMOhttp://styleguide.europeana.eu

    http://styleguide.europeana.eu

  • 51

    REAL LIFE DEMOhttp://patterns.frostfinery.com

    http://patterns.frostfinery.com

  • 52

    REAL LIFE DEMOhttp://patterns.frostfinery.com

    http://patterns.frostfinery.com

  • 53

    REAL LIFE DEMOsevenheadsdesign.com/patterns/

    http://sevenheadsdesign.com/patterns/

  • 54

    REAL LIFE DEMO

  • 55

    REAL LIFE DEMO

  • 56

    REAL LIFE DEMO

  • 57

    QUELLENZum Thema Atomic Design

  • 58

    REAL LIFE DEMO

    http://atomicdesign.bradfrost.com

  • 59

    QUELLEN

    http://atomicdesign.bradfrost.com

    http://de.slideshare.net/bradfrostweb/atomic-design

  • 60

    QUELLEN

    http://atomicdesign.bradfrost.com

    https://vimeo.com/67476280

  • 61

    DAS BESTE ZUM SCHLUSS

    Die ultimative Top-5 Liste

  • 62

    #1CONTENT FIRST

  • 63

    #2MOBILE SECOND

  • 64

    #3KEINE PSD!

  • 65

    #4KEINE

    LAYOUTS!!

  • 66

    #5ATOMIC DESIGN

  • 67

    VIELEN [email protected]

  • 68

    KONTAKT

    Patrick [email protected]

    +4989130 145 20

    www.pluswerk.ag

    +Pluswerk AGWilhelm-Hale-Str. 5380639 MnchenGermany

    http://okr-beratung.dehttps://www.facebook.com/pluswerk

    https://twitter.com/pluswerkag

    https://twitter.com/patricklobacher

    https://www.linkedin.com/company/-pluswerk-ag

    https://plus.google.com/113397823770862988928

    mailto:[email protected]?subject=http://www.creativestyle.dehttp://okr-beratung.dehttps://www.facebook.com/pluswerkhttps://twitter.com/pluswerkaghttps://www.linkedin.com/company/-pluswerk-aghttps://plus.google.com/113397823770862988928

  • 69

    PORTFOLIOFullservice Agentur fr digitale Transformation

    Strategy Consulting Digital Technology Operations

    Digitalisierung / Digitale Transformation

    New Work / OKR (Digital) Leadership / Management 3.0

    Agile / Lean

    CRM / CMSE-Commerce

    IoT

    z.B. SEO / SEM / SMM / Innovation

    Coaching / SparingPM / Beratung Digital Agentur z.B. Continuous Integration

    ServerRedaktion

    Content