Developing UXD - weitere Tipps, Tricks und Argumente
0 gefällt mir615 aufrufe
Das Dokument beschreibt einen Workshop auf xing aus dem Jahr 2014, der sich auf die Entwicklung von User Experience Design (UXD) konzentriert. Es werden verschiedene technische Aspekte wie Sublime Text, HTML, CSS, JavaScript, und Bootstrap behandelt sowie die Vorteile von HTML-Wireframes für Kunden und Agenturen hervorgehoben. Zudem werden Strategien zur Verbesserung der Zusammenarbeit und des Wissensaustausches zwischen Designern und Entwicklern skizziert.
Developing UXD - weitere Tipps, Tricks und Argumente
- 1. XING Workshop 2014 <Developing UXD> Backlog
- 2. Backlog • Sublime, HTML, CSS, JS • Bootstrap • Argumentationshilfe 2
- 3. Backlog: Sublime, HTML, CSS, JS 3
- 4. Backlog • Sublime: Shortcuts • Sublime: Emmet Shortcuts • HTML: Formulare • Holder.js: Img placeholders • CSS: BEM naming convention • jQuery und JavaScript: Einbinden und laden 4
- 5. Sublime Text 3: Emmet Shortcuts 5
- 6. Sublime Text 3: Emmet Shortcuts • Selector-Syntax: e.g. article>h1+pTab wird zu <article> <h1></h1> <p></p> </article> 5
- 7. Sublime Text 3: Emmet Shortcuts • Selector-Syntax: e.g. article>h1+pTab wird zu <article> <h1></h1> <p></p> </article> • Ctrl+w: "Wrap with tag" 5
- 8. Sublime Text 3: Emmet Shortcuts • Selector-Syntax: e.g. article>h1+pTab wird zu <article> <h1></h1> <p></p> </article> • Ctrl+w: "Wrap with tag" • Cmd+Shift+k: Tag ändern 5
- 9. Sublime Text 3: Emmet Shortcuts • Selector-Syntax: e.g. article>h1+pTab wird zu <article> <h1></h1> <p></p> </article> • Ctrl+w: "Wrap with tag" • Cmd+Shift+k: Tag ändern • Cmd+': Element löschen 5
- 10. HTML: Formulare • form: Gruppiert zusammengehörige Formularelemente, darf auch andere Elemente enthalten. • input: Kann von unterschiedlichem Typ sein: text, email, number, tel, color, date, checkbox, radio, ... • select: Enthält option-Elemente, die ein Dropdown bilden. 6
- 11. Sublime Text 3: Shortcuts 7
- 12. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) 7
- 13. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) • Cmd+p: Fuzzy-Search für Dateien 7
- 14. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) • Cmd+p: Fuzzy-Search für Dateien • Cmd+Shift+p: Zugriff auf alle Befehle 7
- 15. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) • Cmd+p: Fuzzy-Search für Dateien • Cmd+Shift+p: Zugriff auf alle Befehle • Cmd+d: Weitere Instanz des markierten Texts auswählen 7
- 16. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) • Cmd+p: Fuzzy-Search für Dateien • Cmd+Shift+p: Zugriff auf alle Befehle • Cmd+d: Weitere Instanz des markierten Texts auswählen • Ausführliches Tutorial auf scotch.io 7
- 17. Selektoren: BEM naming convention 8
- 18. Selektoren: BEM naming convention • .page-header: Einfacher Bindestrich bei zusammengesetzten Namen 8
- 19. Selektoren: BEM naming convention • .page-header: Einfacher Bindestrich bei zusammengesetzten Namen • .page-nav, .page-nav__link: Unterelemente eines "Moduls" haben den Modulnamen als Prefix. 8
- 20. Selektoren: BEM naming convention • .page-header: Einfacher Bindestrich bei zusammengesetzten Namen • .page-nav, .page-nav__link: Unterelemente eines "Moduls" haben den Modulnamen als Prefix. • .button, .button--small, .button--cancel: Varianten sind als solche erkennbar. 8
- 22. Holder.js: Img placeholders • Download: http://imsky.github.io/holder/ 9
- 23. Holder.js: Img placeholders • Download: http://imsky.github.io/holder/ • JavaScript im <body> laden: <script src="js/holder.js"></script> 9
- 24. Holder.js: Img placeholders • Download: http://imsky.github.io/holder/ • JavaScript im <body> laden: <script src="js/holder.js"></script> • Einsatz: <img src="holder.js/300x200"> <img src="holder.js/100x100/#000:#fff"> <img src="holder.js/300x200/text:hello world"> <img src="holder.js/200x200/auto/textmode:exact"> 9
- 26. Bootstrap UI Editors • Eine Reihe von Editoren: für unterschiedliche Ansprüche • Siehe: http://thedesignblitz.com/the-best-bootstrap-ui-editors/ 11
- 27. Bootstrap: und andere Frameworks • Bootstrap http://twitter.github.io/bootstrap/ weit verbreitet, umfangreich • Foundation http://foundation.zurb.com/ sehr umfangreich, komplex • Pure http://purecss.io/ sehr schlank • HTML Kickstart http://www.99lime.com/elements/ umfangreich, leicht 12
- 29. Backlog: Argumentationshilfe • Vorteile von HTML-Wireframes: für Kunden • Vorteile von HTML-Wireframes: für Agenturen • Grenzen des statischen Designs überwinden • Wissen aufbauen • Zusammenarbeit verbessern 14
- 30. Kunde Vorteile: für Kunden • Vermitteln Funktionalität einer Website von Anfang an realistisch • Sind durch Interaktivität einfacher zu verstehen • Produkt entwickelt sich vor den Augen des Kunden stetig weiter • Kein Bruch zwischen Kreations- und Entwicklung-sphase (keine Überraschungen) 15
- 31. UX Vorteile: für Agenturen 1/2 • Keine bzw. weniger Spezifikationen erforderlich • Integrierte Arbeitsweise wird gefördert • Animationen und Interaktivität werden direkt berücksichtigt • Ansätze können direkt ausprobiert und dadurch Design-Entscheidungen leichter getroffen werden 16
- 32. UX Vorteile: für Agenturen 2/2 • Frühe Usertests sind möglich • Browser-Spezifika funktionieren automatisch (Scrollbars, Button-Größen, Hover etc.) • Code kann in Teilen weiter verwendet werden 17
- 33. Grenzen des statischen Designs überwinden STATISCHES DESIGN • Liquid und responsive Layouts • Realistische Darstellung von Typografie • Globale Anpassungen von Farben, Abständen, Größen • Animationen und Interaktionen 18
- 34. Wissen aufbauen • Neue Denkweisen trainieren • Neue Browserfeatures besser verstehen • Wissen, was möglich ist • Änderungen auf Live-Websites direkt ausprobieren (Developer Tools) • Prototypen selbst bauen (z. B. mit Bootstrap) oder ändern/erweitern 19
- 35. Zusammenarbeit verbessern • Besseres Verständnis für das Medium und für Frontend- Developer • Weniger Abhängigkeit von Frontend-Developern bei der Ideenfindung • Implementierungsaufwände besser einschätzen können • Gemeinsames (richtiges) Vokabular aufbauen • Gemeinsam an Prototypen arbeiten Kreation Frontend 20
- 36. developinguxd.com @developinguxd facebook.com/developinguxd mail@developinguxd.com 21