Developing UXD - weitere Tipps, Tricks und Argumente

367 Aufrufe

Veröffentlicht am

Shortcuts und Tricks für Sublime, HTML, Bootstrap und holder.js (Platzhalterbilder). Dazu Argumente, die für einen neuen Workflow für Agenturen sprechen.

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

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
367
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Developing UXD - weitere Tipps, Tricks und Argumente

  1. 1. XING Workshop 2014 <Developing UXD> Backlog
  2. 2. Backlog • Sublime, HTML, CSS, JS • Bootstrap • Argumentationshilfe 2
  3. 3. Backlog: Sublime, HTML, CSS, JS 3
  4. 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. 5. Sublime Text 3: Emmet Shortcuts 5
  6. 6. Sublime Text 3: Emmet Shortcuts • Selector-Syntax: e.g. article>h1+pTab wird zu <article> <h1></h1> <p></p> </article> 5
  7. 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. 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. 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. 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. 11. Sublime Text 3: Shortcuts 7
  12. 12. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) 7
  13. 13. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) • Cmd+p: Fuzzy-Search für Dateien 7
  14. 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. 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. 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. 17. Selektoren: BEM naming convention 8
  18. 18. Selektoren: BEM naming convention • .page-header: Einfacher Bindestrich bei zusammengesetzten Namen 8
  19. 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. 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
  21. 21. Holder.js: Img placeholders 9
  22. 22. Holder.js: Img placeholders • Download: http://imsky.github.io/holder/ 9
  23. 23. Holder.js: Img placeholders • Download: http://imsky.github.io/holder/ • JavaScript im <body> laden: <script src="js/holder.js"></script> 9
  24. 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
  25. 25. Backlog: Bootstrap 10
  26. 26. Bootstrap UI Editors • Eine Reihe von Editoren: für unterschiedliche Ansprüche • Siehe: http://thedesignblitz.com/the-best-bootstrap-ui-editors/ 11
  27. 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
  28. 28. Backlog: Argumentationshilfe 13
  29. 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. 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. 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. 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. 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. 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. 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. 36. developinguxd.com @developinguxd facebook.com/developinguxd mail@developinguxd.com 21

×