Pro Yearly is on sale from $80 to $50! »

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.

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

May 19, 2016
Tweet

Transcript

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

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

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

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

  5. Unsere Umgebung hat sich stark verändert.

  6. Also müssen auch 
 WIR uns verändern!

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

  8. Traditionelle Arbeitsweise ‣ 2 Designs ‣ 4 Seitentypen ‣ 3

    Breakpoints 24 starre Photoshop-Bilder
  9. Und warum das alles?

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

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

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

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

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

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

  16. Wir wissen nichts!

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

    besucht.
  18. Wir wissen nicht, welchen Monitor mit welcher Auflösung unser Besucher

    hat. http://bradfrostweb.com/wp-content/uploads/2012/03/01-650x487.png
  19. http://www.businessinsider.com/android-fragmentation-2014-8?IR=T

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

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

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

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

  24. Konzept Design Frontend Klassischer Workflow

  25. Konzept Design Frontend Besserer Workflow

  26. Konzept Design Frontend Noch besserer Workflow

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

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

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

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

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

    Prototypen
  32. Schnell von der Idee 
 in die Realisierung!

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

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

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

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

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

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

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

  40. Wasserfall geht 
 auch heute noch … ‣ Mit Abstrichen

    bei ‣ Qualität ‣ Effizienz https://twitter.com/freiherz/status/269037333012160512/photo/1
  41. Keine klassischen  Projekte mehr!

  42. Es wird ein Prozess verkauft, kein Endprodukt!

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

  44. Am Anfang steht eine Idee!

  45. Am Anfang kann nicht alles durchgestaltet werden.

  46. Festpreisprojekte sind unrealistisch!

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

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

  49. Direkt mit 
 Living Styleguides arbeiten

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

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

  52. Ohne Ordnung: 71 Farben

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

  54. None
  55. http://styletil.es/

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

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

  58. Wir müssen umdenken!

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