Agile Responsive Design Workflows
-
Upload
pbi-planungsbuero-internet-gmbh -
Category
Internet
-
view
605 -
download
0
Transcript of Agile Responsive Design Workflows
RESPONSIVE DESIGNVORTEILE
AGILE RESPONSIVE DESIGN WORKFLOWSWebmontag 28.09.2015
UNSERE ROLLE IM KLASSISCHEM PROJEKT
PRÄSENTIERTES LAYOUT FÜR DIE UMSETZUNG
PSD DATEIEN FÜR IPHONE, IPAD UND DESKTOP
IPHONE? –NATÜRLICH SMARTPHONE
< ? >
WAS PASSIERT ZWISCHEN DEN PSD DATEIEN?
WIREFRAMES UND PSDsSIND NICHT RESPONSIVE
METHODE #1:WEBKONZEPTIONIM BROWSER
KLASSISCHE ABLÄUFE VERZERREN DIE ERWARTUNG
WEBKONZEPTION IM BROWSER
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
WHY WIREFRAME IN THE BROWSER? "I WANT EVERYONE TO BE CONFRONTED BY THE REALITY OF THE BROWSER AS SOON AS POSSIBLE."
- STEPHEN HAYThe Hay Stack
RAPID PROTOTYPING IN CODE
ZURB FOUNDATION
TWITTER BOOTSTRAP
SUZY GRIDSYSTEM
SASS
LESS
HANDLEBAR.JS
Können wir den Call 2 Action Button nicht Grün machen?
- IRGENDEIN KUNDEKurz vor der Deadline
BEI 5 SEITENLAYOUTSUND 4 VIEWPORTSSIND DAS 20 ÄNDERUNGEN
.call2action {background-color: #00ff00;
}
DENKE IN KOMPONENTENUND MODULEN
METHODE #2:NUTZE PATTERN UNDLIVING STYLE GUIDES
ATOMIC DESIGN BY BRAD FROST
ATOMIC DESIGN BY BRAD FROST
Elemente Komponenten Module Layouts Seiten
DEMO
RESPONSIVE DESIGN IST EIN
TEAMSPORT
METHODE #3:ARBEITE IM INTERDISZIPLINÄREN TEAM
KLASSISCHER PROJEKTVERLAUF
HÄUFIGER KOMMUNIKATIONSABLAUF
WIR BRAUCHEN EIN INTERDISZIPLINÄRES TEAM
METHODE #4:ITERATIVE UMSETZUNG
KLASSISCHER PROJEKTVERLAUF
AGILER PROJEKTVERLAUF
DER KUNDE IST TEIL DES TEAMS
METHODE #5:VERSTEHE PATTERNLAB UND DOKUMENTATION ALS LIEFERGEGENSTAND
KLASSISCHE PLANUNG LIEFERT PRO STUFE ERGEBNISSE
IM AGILEN VERLAUF WERDEN TEILERGEBNISSE ERZIELT
ERST AM ENDE GIBT ES „FINALE“ LIEFERGEGENSTÄNDE
EIN PROTOTYP BLEIBTEIN PROTOTYP
• Code Review• Framework Optimierung• Performance Optimierung• Server Side Components• Generelle QA• Finale Unit Tests• Real Device Testing• Technische Dokumentation
DER FEINSCHLIFF
VIELEN DANK