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.

Transcript

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

   View Slide

2. Simon Hohenadl
   Head of Vehicle Market IT
   shohenadl@autoscout24.com
   @SimonHoh
   

   View Slide

3. Mareike Graf
   Team Lead Design
   mgraf@autoscout24.com
   

   View Slide

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

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

6. Werkstattportal
   

   View Slide

7. Team
   

   View Slide

8. Redesign
   

   View Slide

9. Zusammen-Arbeit
   

   View Slide

10. Frontend
    

    View Slide

11. Qualität
    

    View Slide

12. Produktion
    

    View Slide

13. Pixelschubsen
    

    View Slide

14. View Slide

15. View Slide

16. Innen solide
    außen marode
    

    View Slide

17. Nachhaltiges
    Frontend
    

    View Slide

18. Wiederverwendung
    

    View Slide

19. View Slide

20. Zusammenarbeit
    

    View Slide

21. Dialog
    

    View Slide

22. Bob
    Ross
    Will
    Kate
    

    View Slide

23. 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 Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. UI Library
    

    View Slide

36. Industrialisierung
    des Screens
    

    View Slide

37. Was noch fehlt...
    

    View Slide

38. Entwickler
    sind auch Menschen
    

    View Slide

39. Designer
    sind auch Menschen
    

    View Slide

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

    View Slide

41. Danke...
    

    View Slide