Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Pixelschubsen oder Frontend-Framework?

Pixelschubsen oder Frontend-Framework?

UI-Wildwuchs? Pixel-genaue Design-Spezifikationen? Code-Duplizierung im Frontend? Überall Browser-Hacks? Inkonsistenter Markenauftritt? HTML, das keiner versteht?
Diese Zeiten sind vorbei, wenigstens bei AutoScout24. Wir haben ein Framework aufgebaut, das es allen Designern und Entwicklern ermöglicht, schnell neue Seiten im Corporate Design zu bauen. Im Vordergrund stehen dabei Klarheit, Wiederverwendung und die Möglichkeit, das Portal-übergreifende Design an einer zentralen Stelle zu ändern. Konstruktive Zusammenarbeit hat dafür gesorgt, dass Aussprüche wie "das sieht ja keiner" von Entwicklern oder "schieb das noch zwei Pixel nach rechts" von Designern der Vergangenheit angehören.

Simon Hohenadl

October 28, 2013
Tweet

More Decks by Simon Hohenadl

Other Decks in Programming

Transcript

  1. www.autoscout24.de
    Pixelschubsen
    oder Frontend-Framework?
    DWX 2013 | 24.6. | Mareike Graf, Simon Hohenadl

    View full-size slide

  2. Simon Hohenadl
    Head of Vehicle Market IT
    [email protected]
    @SimonHoh

    View full-size slide

  3. Mareike Graf
    Team Lead Design
    [email protected]

    View full-size slide

  4. Pixelschubsen oder Frontend-Framework?
    1. AutoScout24
    2. Rückblick
    3. Zusammenarbeit Design – Entwickler
    4. Framework
    5. Learnings und Ausblick

    View full-size slide

  5. Über 300 Millionen virtuelle Fahrzeugbesichtigungen pro Monat
    15,6 Millionen Nutzer jährlich in Deutschland
    1,8 Millionen Fahrzeugangebote
    Europaweit größter Online-Fahrzeugmarkt
    Über 10 Millionen Menschen nutzen AutoScout24 jeden Monat europaweit
    Rund 90.000 Motorräder
    Über 100.000 gebrauchte Nutzfahrzeuge

    View full-size slide

  6. Werkstattportal

    View full-size slide

  7. Zusammen-Arbeit

    View full-size slide

  8. Pixelschubsen

    View full-size slide

  9. Innen solide
    außen marode

    View full-size slide

  10. Nachhaltiges
    Frontend

    View full-size slide

  11. Wiederverwendung

    View full-size slide

  12. Zusammenarbeit

    View full-size slide

  13. Bob
    Ross
    Will
    Kate

    View full-size slide

  14. Globals
    Elements
    Components
    Buttons
    Button Feedback
    Category Checkbox
    Datepicker
    Form elements
    Icons
    Lines & Shadows
    Lists with icons
    Box Picture
    Box Placeholder
    Box Sticky
    Bubbles
    Carousel
    Custom Dropdown
    Font
    Grid
    Spacings

    View full-size slide

  15. Industrialisierung
    des Screens

    View full-size slide

  16. Was noch fehlt...

    View full-size slide

  17. Entwickler
    sind auch Menschen

    View full-size slide

  18. Designer
    sind auch Menschen

    View full-size slide

  19. Fragen...
    Und ja,
    wir stellen ein.

    View full-size slide