Agile Resposnive Design Workflows

Transcript

1. RESPONSIVE DESIGN VORTEILE AGILE RESPONSIVE DESIGN WORKFLOWS Webmontag 28.09.2015
2. UNSERE ROLLE IM KLASSISCHEM PROJEKT
3. PRÄSENTIERTES LAYOUT FÜR DIE UMSETZUNG
4. PSD DATEIEN FÜR IPHONE, IPAD UND DESKTOP
5. IPHONE? –NATÜRLICH SMARTPHONE
6. < ? > WAS PASSIERT ZWISCHEN DEN PSD DATEIEN?
7. WIREFRAMES UND PSDs SIND NICHT RESPONSIVE
8. METHODE #1: WEBKONZEPTION IM BROWSER
9. KLASSISCHE ABLÄUFE VERZERREN DIE ERWARTUNG
10. WEBKONZEPTION IM BROWSER
11. PRO UND CONTRA VORTEILE • Beteiligte  können  das  Ergebnis   direkt  erleben • PSD  Layouts  sind  keine  Referenz • Der  Prototyp  kann  direkt  getestet   werden • Umsetzungsprobleme  werden  in   der  Konzeption  erkannt • Änderungen  lassen  sich  schnell   umsetzen NACHTEILE • Frontend  Expertise  wird   benötigt • Keine  Darstellungssicherheit • Funktionsumfang  täuscht • Komplexe  Module  sind   Zeitaufwendig • Bindet  Ressourcen
12. WHY WIREFRAME IN THE BROWSER? "I WANT EVERYONE TO BE CONFRONTED BY THE REALITY OF THE BROWSER AS SOON AS POSSIBLE." - STEPHEN HAY The Hay Stack
13. RAPID PROTOTYPING IN CODE ZURB FOUNDATION TWITTER BOOTSTRAP SUZY GRIDSYSTEM SASS LESS HANDLEBAR.JS
14. Können wir den Call 2 Action Button nicht Grün machen? - IRGENDEIN KUNDE Kurz vor der Deadline
15. BEI 5 SEITENLAYOUTS UND 4 VIEWPORTS SIND DAS 20 ÄNDERUNGEN
16. .call2action { background-color: #00ff00; }
17. DENKE IN KOMPONENTEN UND MODULEN
18. METHODE #2: NUTZE PATTERN UND LIVING STYLE GUIDES
19. ATOMIC DESIGN BY BRAD FROST
20. ATOMIC DESIGN BY BRAD FROST Elemente Komponenten Module Layouts Seiten
21. DEMO
22. RESPONSIVE DESIGN IST EIN TEAMSPORT
23. METHODE #3: ARBEITE IM INTERDISZIPLINÄREN TEAM
24. KLASSISCHER PROJEKTVERLAUF
25. HÄUFIGER KOMMUNIKATIONSABLAUF
26. WIR BRAUCHEN EIN INTERDISZIPLINÄRES TEAM
27. METHODE #4: ITERATIVE UMSETZUNG
28. KLASSISCHER PROJEKTVERLAUF
29. AGILER PROJEKTVERLAUF
30. DER KUNDE IST TEIL DES TEAMS
31. METHODE #5: VERSTEHE PATTERNLAB UND DOKUMENTATION ALS LIEFERGEGENSTAND
32. KLASSISCHE PLANUNG LIEFERT PRO STUFE ERGEBNISSE
33. IM AGILEN VERLAUF WERDEN TEILERGEBNISSE ERZIELT
34. ERST AM ENDE GIBT ES „FINALE“ LIEFERGEGENSTÄNDE
35. EIN PROTOTYP BLEIBT EIN PROTOTYP
36. • Code  Review • Framework  Optimierung • Performance  Optimierung • Server  Side  Components • Generelle  QA • Finale  Unit  Tests • Real  Device  Testing • Technische  Dokumentation DER FEINSCHLIFF
37. pbi planungsbüro INTERNET  GmbH Phillip  Buschhüter @pbim http://planungsbuero.de info@planungsbuero.de
38. VIELEN DANK