41
www.autoscout24.de Pixelschubsen oder Frontend-Framework? WTC 2013 | 28.10. | Mareike Graf, Simon Hohenadl

Pixelschubsen oder frontend framework

Embed Size (px)

DESCRIPTION

UI-Wildwuchs? Pixelgenaue Designspezifikationen? Codeduplizierung im Frontend? Überall Browserhacks? 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.

Citation preview

Page 1: Pixelschubsen oder frontend framework

www.autoscout24.de

Pixelschubsen oder Frontend-Framework?

WTC 2013 | 28.10. | Mareike Graf, Simon Hohenadl

Page 2: Pixelschubsen oder frontend framework

Simon HohenadlHead of Vehicle Market [email protected]@SimonHoh

Page 3: Pixelschubsen oder frontend framework

Mareike GrafTeam Lead [email protected]

Page 4: Pixelschubsen oder frontend framework

Pixelschubsen oder Frontend-Framework?

1. AutoScout242. Rückblick3. Zusammenarbeit Design – Entwickler4. Framework5. Learnings und Ausblick

Page 5: Pixelschubsen oder frontend framework

Über 300 Millionen virtuelle Fahrzeugbesichtigungen pro Monat

15,6 Millionen Nutzer jährlich in Deutschland1,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

Page 6: Pixelschubsen oder frontend framework

Werkstattportal

Page 7: Pixelschubsen oder frontend framework

Team

Page 8: Pixelschubsen oder frontend framework

Redesign

Page 9: Pixelschubsen oder frontend framework

Zusammen-Arbeit

Page 10: Pixelschubsen oder frontend framework

Frontend

Page 11: Pixelschubsen oder frontend framework

Qualität

Page 12: Pixelschubsen oder frontend framework

Produktion

Page 13: Pixelschubsen oder frontend framework

Pixelschubsen

Page 14: Pixelschubsen oder frontend framework
Page 15: Pixelschubsen oder frontend framework
Page 16: Pixelschubsen oder frontend framework

Innen solideaußen marode

Page 17: Pixelschubsen oder frontend framework

Nachhaltiges Frontend

Page 18: Pixelschubsen oder frontend framework

Wiederverwendung

Page 19: Pixelschubsen oder frontend framework
Page 20: Pixelschubsen oder frontend framework

Zusammenarbeit

Page 21: Pixelschubsen oder frontend framework

Dialog

Page 22: Pixelschubsen oder frontend framework

Bob

Ross

Will

Kate

Page 23: Pixelschubsen oder frontend framework

Globals

Elements

Components

ButtonsButton FeedbackCategory CheckboxDatepickerForm elementsIconsLines & ShadowsLists with icons

Box PictureBox PlaceholderBox StickyBubblesCarouselCustom Dropdown

Font GridSpacings

Page 24: Pixelschubsen oder frontend framework
Page 25: Pixelschubsen oder frontend framework
Page 26: Pixelschubsen oder frontend framework
Page 27: Pixelschubsen oder frontend framework
Page 28: Pixelschubsen oder frontend framework
Page 29: Pixelschubsen oder frontend framework
Page 30: Pixelschubsen oder frontend framework
Page 31: Pixelschubsen oder frontend framework
Page 32: Pixelschubsen oder frontend framework
Page 33: Pixelschubsen oder frontend framework
Page 34: Pixelschubsen oder frontend framework
Page 35: Pixelschubsen oder frontend framework

UI Library

Page 36: Pixelschubsen oder frontend framework

Industrialisierung des Screens

Page 37: Pixelschubsen oder frontend framework

Was noch fehlt...

Page 38: Pixelschubsen oder frontend framework

Entwicklersind auch Menschen

Page 39: Pixelschubsen oder frontend framework

Designersind auch Menschen

Page 40: Pixelschubsen oder frontend framework

Fragen...

Und ja,wir stellen ein.

Page 41: Pixelschubsen oder frontend framework

Bildquellen

William und Kate

Pat Pilon [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons