Agile Responsive Design Workflows

512 Aufrufe

Veröffentlicht am

Konzeption im Webbrowser?

Vorstellung einer agilen Methode im interdisziplinären Team.

Veröffentlicht in: Internet
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
512
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
34
Aktionen
Geteilt
0
Downloads
5
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Agile Responsive Design Workflows

  1. 1. RESPONSIVE DESIGN VORTEILE AGILE RESPONSIVE DESIGN WORKFLOWS Webmontag 28.09.2015
  2. 2. UNSERE ROLLE IM KLASSISCHEM PROJEKT
  3. 3. PRÄSENTIERTES LAYOUT FÜR DIE UMSETZUNG
  4. 4. PSD DATEIEN FÜR IPHONE, IPAD UND DESKTOP
  5. 5. IPHONE? –NATÜRLICH SMARTPHONE
  6. 6. < ? > WAS PASSIERT ZWISCHEN DEN PSD DATEIEN?
  7. 7. WIREFRAMES UND PSDs SIND NICHT RESPONSIVE
  8. 8. METHODE #1: WEBKONZEPTION IM BROWSER
  9. 9. KLASSISCHE ABLÄUFE VERZERREN DIE ERWARTUNG
  10. 10. WEBKONZEPTION IM BROWSER
  11. 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. 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. 13. RAPID PROTOTYPING IN CODE ZURB FOUNDATION TWITTER BOOTSTRAP SUZY GRIDSYSTEM SASS LESS HANDLEBAR.JS
  14. 14. Können wir den Call 2 Action Button nicht Grün machen? - IRGENDEIN KUNDE Kurz vor der Deadline
  15. 15. BEI 5 SEITENLAYOUTS UND 4 VIEWPORTS SIND DAS 20 ÄNDERUNGEN
  16. 16. .call2action { background-color: #00ff00; }
  17. 17. DENKE IN KOMPONENTEN UND MODULEN
  18. 18. METHODE #2: NUTZE PATTERN UND LIVING STYLE GUIDES
  19. 19. ATOMIC DESIGN BY BRAD FROST
  20. 20. ATOMIC DESIGN BY BRAD FROST Elemente Komponenten Module Layouts Seiten
  21. 21. DEMO
  22. 22. RESPONSIVE DESIGN IST EIN TEAMSPORT
  23. 23. METHODE #3: ARBEITE IM INTERDISZIPLINÄREN TEAM
  24. 24. KLASSISCHER PROJEKTVERLAUF
  25. 25. HÄUFIGER KOMMUNIKATIONSABLAUF
  26. 26. WIR BRAUCHEN EIN INTERDISZIPLINÄRES TEAM
  27. 27. METHODE #4: ITERATIVE UMSETZUNG
  28. 28. KLASSISCHER PROJEKTVERLAUF
  29. 29. AGILER PROJEKTVERLAUF
  30. 30. DER KUNDE IST TEIL DES TEAMS
  31. 31. METHODE #5: VERSTEHE PATTERNLAB UND DOKUMENTATION ALS LIEFERGEGENSTAND
  32. 32. KLASSISCHE PLANUNG LIEFERT PRO STUFE ERGEBNISSE
  33. 33. IM AGILEN VERLAUF WERDEN TEILERGEBNISSE ERZIELT
  34. 34. ERST AM ENDE GIBT ES „FINALE“ LIEFERGEGENSTÄNDE
  35. 35. EIN PROTOTYP BLEIBT EIN PROTOTYP
  36. 36. • Code  Review • Framework  Optimierung • Performance  Optimierung • Server  Side  Components • Generelle  QA • Finale  Unit  Tests • Real  Device  Testing • Technische  Dokumentation DER FEINSCHLIFF
  37. 37. pbi planungsbüro INTERNET  GmbH Phillip  Buschhüter @pbim http://planungsbuero.de info@planungsbuero.de
  38. 38. VIELEN DANK

×