$30 off During Our Annual Pro Sale. View Details »

Neuer Workflow für ein modernes Web

Neuer Workflow für ein modernes Web

Vortrag auf der Contao Konferenz 2016. Aktualisierte und erweiterte Fassung zu früheren Versuchen, die Notwendigkeit eines besseren, moderneren Workflows, weg vom Wasserfall, zu vermitteln.

Jens Grochtdreis

May 19, 2016
Tweet

More Decks by Jens Grochtdreis

Other Decks in Business

Transcript

  1. Neuer Workflow
    für ein modernes Web
    Jens Grochtdreis

    View Slide

  2. Mobile Nutzung ist gängig
    https://twitter.com/winlocal/status/583164144888737792

    View Slide

  3. https://twitter.com/designtimes/status/539521149395566593

    View Slide

  4. http://www.telegraph.co.uk/technology/news/8731365/Technology-failing-to-empower-older-generation.html

    View Slide

  5. Unsere Umgebung hat sich
    stark verändert.

    View Slide

  6. Also müssen auch 

    WIR uns verändern!

    View Slide

  7. Die traurige Realität 2016
    https://twitter.com/fabianbeiner/status/732491745900908548

    View Slide

  8. Traditionelle Arbeitsweise
    ‣ 2 Designs
    ‣ 4 Seitentypen
    ‣ 3 Breakpoints
    24 starre Photoshop-Bilder

    View Slide

  9. Und warum das alles?

    View Slide

  10. Falsche Herangehensweise
    https://twitter.com/dudleystorey/status/576213243510661120

    View Slide

  11. https://twitter.com/pistenprinz/status/732163023083843584

    View Slide

  12. http://www.webdesignerdepot.com/2013/02/is-photoshop-dead/

    View Slide

  13. Es heißt http:// nicht psd:// !

    View Slide

  14. Kunde
    Beratung
    Konzept
    Design
    Frontend
    Backend
    Unser Workflow ist falsch!

    View Slide

  15. Die Sache ist zu komplex!
    https://twitter.com/brad_frost/status/392429547188408321

    View Slide

  16. Wir wissen nichts!

    View Slide

  17. Wir wissen nicht, mit
    welcher Art Computer
    jemand unsere Seite
    besucht.

    View Slide

  18. Wir wissen nicht, welchen
    Monitor mit welcher
    Auflösung unser Besucher
    hat.
    http://bradfrostweb.com/wp-content/uploads/2012/03/01-650x487.png

    View Slide

  19. http://www.businessinsider.com/android-fragmentation-2014-8?IR=T

    View Slide

  20. Wir wissen nicht, in welcher
    Größe das Browserfenster
    unseres Nutzers ist.

    View Slide

  21. Wir wissen nicht, welche
    Fähigkeiten der Browser des
    Besuchers hat.

    View Slide

  22. Wir wissen noch viel mehr
    nicht, unterstellen oder
    ignorieren dies aber meist.

    View Slide

  23. http://www.flickr.com/photos/artrock2006/4177475479/
    Alle Beteiligten sollten frühzeitig
    offen kommunizieren.
    http://www.flickr.com/photos/artrock2006/4177475479/

    View Slide

  24. Konzept
    Design
    Frontend
    Klassischer Workflow

    View Slide

  25. Konzept
    Design
    Frontend
    Besserer Workflow

    View Slide

  26. Konzept
    Design
    Frontend
    Noch besserer Workflow

    View Slide

  27. Konzept und Design nicht
    losgelöst vom Frontend
    entwickeln!

    View Slide

  28. Iterativer, agiler Prozess
    http://trentwalton.com/2011/07/14/content-choreography/

    View Slide

  29. http://de.slideshare.net/pkattera/design-process-for-responsive-web-design
    Iterativer, agiler Prozess

    View Slide

  30. http://www.quadriform.biz/wp-content/uploads/2010/09/designer_developer.jpg
    Designer und Entwickler müssen
    enger zusammenarbeiten

    View Slide

  31. Abnahme nicht über ein Bild
    aus Photoshop sondern
    anhand eines Prototypen

    View Slide

  32. Schnell von der Idee 

    in die Realisierung!

    View Slide

  33. http://jsfiddle.net/Flocke/azvGv/
    CSS3-fähiger Browser IE8
    Alternativen testen

    View Slide

  34. https://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/
    Bestandteile

    View Slide

  35. Inhaltsinventar
    http://bradfrost.com/blog/post/interface-inventory/

    View Slide

  36. Performance-Budget
    http://bradfrost.com/blog/post/performance-budget-builder/
    http://codepen.io/bradfrost/full/EPQVBp/

    View Slide

  37. Klickdummy
    http://demo.patternlab.io/?p=templates-article

    View Slide

  38. Living Styleguide
    http://styleguide.devbproto.com/styleguide/#4

    View Slide

  39. https://twitter.com/yogthos/status/724076324634124288

    View Slide

  40. Wasserfall geht 

    auch heute noch …
    ‣ Mit Abstrichen bei
    ‣ Qualität
    ‣ Effizienz
    https://twitter.com/freiherz/status/269037333012160512/photo/1

    View Slide

  41. Keine klassischen
    Projekte mehr!

    View Slide

  42. Es wird ein Prozess verkauft,
    kein Endprodukt!

    View Slide

  43. Es kann am Anfang nicht
    mehr das Endprodukt
    abgenommen werden.

    View Slide

  44. Am Anfang steht eine Idee!

    View Slide

  45. Am Anfang kann nicht alles
    durchgestaltet werden.

    View Slide

  46. Festpreisprojekte sind
    unrealistisch!

    View Slide

  47. Kunden und Agenturen
    müssen sich ändern!

    View Slide

  48. https://twitter.com/brundle_fly/status/545430490397040640

    View Slide

  49. Direkt mit 

    Living Styleguides arbeiten

    View Slide

  50. http://ux.mailchimp.com/patterns/tables

    View Slide

  51. http://rizzo.lonelyplanet.com/styleguide/design-elements/colours

    View Slide

  52. Ohne Ordnung: 71 Farben

    View Slide

  53. http://rizzo.lonelyplanet.com/styleguide/widgets/car-rental

    View Slide

  54. View Slide

  55. http://styletil.es/

    View Slide

  56. http://www.commercialprogression.com/post/streamline-your-style-tiles-sass-and-style-guide-module

    View Slide

  57. http://www.studiobonito.co.uk/work/youth-for-christ-website-design-development-birmingham/

    View Slide

  58. Wir müssen umdenken!

    View Slide

  59. Leichter gesagt, als getan!
    1. Keine „Optimierung“ oder „typische Devices“
    2. Neue Tools
    3. Neuer Workflow
    4. Neue Erfolgskriterien
    5. Keine Festpreisangebote
    6. viel Zeit für Experimente

    View Slide

  60. Jens Grochtdreis
    http://grochtdreis.de
    http://twitter.com/Flocke
    http://webkrauts.de
    https://speakerdeck.com/flocke
    Diese Präsentation steht unter
    der Creative Commons Lizenz
    „Attribution-ShareAlike 2.0“
    http://creativecommons.org/licenses/by-sa/2.0/de/
    https://twitter.com/goodduckpanels/status/711483985872949248

    View Slide