Slide 1
Slide 1 text
Neuer Workflow
für ein modernes Web
Jens Grochtdreis
Slide 2
Slide 2 text
Mobile Nutzung ist gängig
https://twitter.com/winlocal/status/583164144888737792
Slide 3
Slide 3 text
https://twitter.com/designtimes/status/539521149395566593
Slide 4
Slide 4 text
http://www.telegraph.co.uk/technology/news/8731365/Technology-failing-to-empower-older-generation.html
Slide 5
Slide 5 text
Unsere Umgebung hat sich
stark verändert.
Slide 6
Slide 6 text
Also müssen auch
WIR uns verändern!
Slide 7
Slide 7 text
Die traurige Realität 2016
https://twitter.com/fabianbeiner/status/732491745900908548
Slide 8
Slide 8 text
Traditionelle Arbeitsweise
‣ 2 Designs
‣ 4 Seitentypen
‣ 3 Breakpoints
24 starre Photoshop-Bilder
Slide 9
Slide 9 text
Und warum das alles?
Slide 10
Slide 10 text
Falsche Herangehensweise
https://twitter.com/dudleystorey/status/576213243510661120
Slide 11
Slide 11 text
https://twitter.com/pistenprinz/status/732163023083843584
Slide 12
Slide 12 text
http://www.webdesignerdepot.com/2013/02/is-photoshop-dead/
Slide 13
Slide 13 text
Es heißt http:// nicht psd:// !
Slide 14
Slide 14 text
Kunde
Beratung
Konzept
Design
Frontend
Backend
Unser Workflow ist falsch!
Slide 15
Slide 15 text
Die Sache ist zu komplex!
https://twitter.com/brad_frost/status/392429547188408321
Slide 16
Slide 16 text
Wir wissen nichts!
Slide 17
Slide 17 text
Wir wissen nicht, mit
welcher Art Computer
jemand unsere Seite
besucht.
Slide 18
Slide 18 text
Wir wissen nicht, welchen
Monitor mit welcher
Auflösung unser Besucher
hat.
http://bradfrostweb.com/wp-content/uploads/2012/03/01-650x487.png
Slide 19
Slide 19 text
http://www.businessinsider.com/android-fragmentation-2014-8?IR=T
Slide 20
Slide 20 text
Wir wissen nicht, in welcher
Größe das Browserfenster
unseres Nutzers ist.
Slide 21
Slide 21 text
Wir wissen nicht, welche
Fähigkeiten der Browser des
Besuchers hat.
Slide 22
Slide 22 text
Wir wissen noch viel mehr
nicht, unterstellen oder
ignorieren dies aber meist.
Slide 23
Slide 23 text
http://www.flickr.com/photos/artrock2006/4177475479/
Alle Beteiligten sollten frühzeitig
offen kommunizieren.
http://www.flickr.com/photos/artrock2006/4177475479/
Slide 24
Slide 24 text
Konzept
Design
Frontend
Klassischer Workflow
Slide 25
Slide 25 text
Konzept
Design
Frontend
Besserer Workflow
Slide 26
Slide 26 text
Konzept
Design
Frontend
Noch besserer Workflow
Slide 27
Slide 27 text
Konzept und Design nicht
losgelöst vom Frontend
entwickeln!
Slide 28
Slide 28 text
Iterativer, agiler Prozess
http://trentwalton.com/2011/07/14/content-choreography/
Slide 29
Slide 29 text
http://de.slideshare.net/pkattera/design-process-for-responsive-web-design
Iterativer, agiler Prozess
Slide 30
Slide 30 text
http://www.quadriform.biz/wp-content/uploads/2010/09/designer_developer.jpg
Designer und Entwickler müssen
enger zusammenarbeiten
Slide 31
Slide 31 text
Abnahme nicht über ein Bild
aus Photoshop sondern
anhand eines Prototypen
Slide 32
Slide 32 text
Schnell von der Idee
in die Realisierung!
Slide 33
Slide 33 text
http://jsfiddle.net/Flocke/azvGv/
CSS3-fähiger Browser IE8
Alternativen testen
Slide 34
Slide 34 text
https://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/
Bestandteile
Slide 35
Slide 35 text
Inhaltsinventar
http://bradfrost.com/blog/post/interface-inventory/
Slide 36
Slide 36 text
Performance-Budget
http://bradfrost.com/blog/post/performance-budget-builder/
http://codepen.io/bradfrost/full/EPQVBp/
Slide 37
Slide 37 text
Klickdummy
http://demo.patternlab.io/?p=templates-article
Slide 38
Slide 38 text
Living Styleguide
http://styleguide.devbproto.com/styleguide/#4
Slide 39
Slide 39 text
https://twitter.com/yogthos/status/724076324634124288
Slide 40
Slide 40 text
Wasserfall geht
auch heute noch …
‣ Mit Abstrichen bei
‣ Qualität
‣ Effizienz
https://twitter.com/freiherz/status/269037333012160512/photo/1
Slide 41
Slide 41 text
Keine klassischen
Projekte mehr!
Slide 42
Slide 42 text
Es wird ein Prozess verkauft,
kein Endprodukt!
Slide 43
Slide 43 text
Es kann am Anfang nicht
mehr das Endprodukt
abgenommen werden.
Slide 44
Slide 44 text
Am Anfang steht eine Idee!
Slide 45
Slide 45 text
Am Anfang kann nicht alles
durchgestaltet werden.
Slide 46
Slide 46 text
Festpreisprojekte sind
unrealistisch!
Slide 47
Slide 47 text
Kunden und Agenturen
müssen sich ändern!
Slide 48
Slide 48 text
https://twitter.com/brundle_fly/status/545430490397040640
Slide 49
Slide 49 text
Direkt mit
Living Styleguides arbeiten
Slide 50
Slide 50 text
http://ux.mailchimp.com/patterns/tables
Slide 51
Slide 51 text
http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
Slide 52
Slide 52 text
Ohne Ordnung: 71 Farben
Slide 53
Slide 53 text
http://rizzo.lonelyplanet.com/styleguide/widgets/car-rental
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
http://styletil.es/
Slide 56
Slide 56 text
http://www.commercialprogression.com/post/streamline-your-style-tiles-sass-and-style-guide-module
Slide 57
Slide 57 text
http://www.studiobonito.co.uk/work/youth-for-christ-website-design-development-birmingham/
Slide 58
Slide 58 text
Wir müssen umdenken!
Slide 59
Slide 59 text
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
Slide 60
Slide 60 text
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