Build wireframes and prototypes in real HTML and CSS with the help of Bootstrap and become a "Coding UX Designer". Those are the slides form 2014's IA Konferenz in Berlin.
3. Conni
Cornelia Erbs
3
Freelancerin als Senior User
Experience Architect
Davor Senior User Experience Architect
für große Hamburger Agenturen
„HTML-Wireframing ist so spannend
wie Rätsel lösen.“
4. Jerry
Jeremias Dombrowsky
4
Senior Frontend Engineer bei XING
Davor Creative Technologist für
namhafte Agenturen und Unternehmen
„Wenn UX Designer HTML und CSS
lernen, haben Entwickler mehr Zeit
zum Programmieren.“
14. Warum sollten wir HTML und CSS lernen?
• Die Basis dessen, was wir gestalten, sollten wir kennen.
10
15. Warum sollten wir HTML und CSS lernen?
• Die Basis dessen, was wir gestalten, sollten wir kennen.
• Zumal: Die Tools wechseln, HTML bleibt!
10
16. Warum sollten wir HTML und CSS lernen?
• Die Basis dessen, was wir gestalten, sollten wir kennen.
• Zumal: Die Tools wechseln, HTML bleibt!
• Und: Eine neue Generation „native Developers“ kommt.
10
17. ”Coding is going to be
the literacy
of the 21st Century.“
ZACH SIMS
Co-Founder Codecademy
19. Es kann unsere Arbeitsweise verbessern!
12
Heutige Arbeitsweise
Technisch
umsetzen
Anforderungen
klären
Wireframes
erstellen
Screens
erstellen
20. Es kann unsere Arbeitsweise verbessern!
12
Heutige Arbeitsweise
Technisch
umsetzen
Anforderungen
klären
Wireframes
erstellen
Screens
erstellen
Abstrakt und statisch
Abstrakt
Abstrakt und statisch
21. Es kann unsere Arbeitsweise verbessern!
12
Heutige Arbeitsweise
Technisch
umsetzen
Anforderungen
klären
Wireframes
erstellen
Screens
erstellen
Abstrakt und statisch
Abstrakt
Abstrakt und statisch
Echt Aber
anders
22. Es kann unsere Arbeitsweise verbessern!
13
Zukünftige Arbeitsweise
23. Es kann unsere Arbeitsweise verbessern!
13
Zukünftige Arbeitsweise
Statische
Dokumente
• Brief
• User Journeys
• Sketching
• Look & Feel
24. Es kann unsere Arbeitsweise verbessern!
13
Zukünftige Arbeitsweise
Statische
Dokumente
• Brief
• User Journeys
• Sketching
• Look & Feel
Prototypen
Wireframes in
HTML + CSS
Layout in
HTML + CSS
25. Es kann unsere Arbeitsweise verbessern!
13
Zukünftige Arbeitsweise
Statische
Dokumente
• Brief
• User Journeys
• Sketching
• Look & Feel
Prototypen
Wireframes in
HTML + CSS
Layout in
HTML + CSS
26. Es kann unsere Arbeitsweise verbessern!
13
Zukünftige Arbeitsweise
Statische
Dokumente
• Brief
• User Journeys
• Sketching
• Look & Feel
Prototypen
Wireframes in
HTML + CSS
Layout in
HTML + CSS
Website
Entwicklung
27. Es kann unsere Arbeitsweise verbessern!
13
Zukünftige Arbeitsweise
Statische
Dokumente
• Brief
• User Journeys
• Sketching
• Look & Feel
Prototypen
Wireframes in
HTML + CSS
Layout in
HTML + CSS
Website
Entwicklung
36. HTML: Layout-Elemente
• header, footer, aside, nav, main, article, section:
"Sectioning elements" gruppieren inhaltlich
• main: Einzigartig! Hauptinhalte kommen hier rein.
• article: Muss alleine stehen können ( RSS-Feed, Pocket)
19
37. HTML: Layout-Elemente
• header, footer, aside, nav, main, article, section:
"Sectioning elements" gruppieren inhaltlich
• main: Einzigartig! Hauptinhalte kommen hier rein.
• article: Muss alleine stehen können ( RSS-Feed, Pocket)
• nav: Nur für Navigation auf der Website
19
38. HTML: Layout-Elemente
• header, footer, aside, nav, main, article, section:
"Sectioning elements" gruppieren inhaltlich
• main: Einzigartig! Hauptinhalte kommen hier rein.
• article: Muss alleine stehen können ( RSS-Feed, Pocket)
• nav: Nur für Navigation auf der Website
• div: Gruppiert für Styling, nicht inhaltlich (semantisch)
19
43. HTML: Inhaltselemente – Weitere Inhalte
• img: "image" – Bildelement
• ul, ol: "unordered/ordered list" – eine Liste mit
Bulletpoints oder Nummerierungen.
Darf nur li-Elemente enthalten.
22
44. HTML: Inhaltselemente – Weitere Inhalte
• img: "image" – Bildelement
• ul, ol: "unordered/ordered list" – eine Liste mit
Bulletpoints oder Nummerierungen.
Darf nur li-Elemente enthalten.
• li: "List item" – darf andere Elemente enthalten.
22
45. HTML: Inhaltselemente – Weitere Inhalte
• img: "image" – Bildelement
• ul, ol: "unordered/ordered list" – eine Liste mit
Bulletpoints oder Nummerierungen.
Darf nur li-Elemente enthalten.
• li: "List item" – darf andere Elemente enthalten.
• audio, video, canvas, embed: Media-Inhalte
22
67. 28
Attribute: Wichtige
<input id="i-am-unique">
Kennzeichnet ein zwingend einzigartiges Element, z.B.
input im Formular; #jumpmark im gleichen Dokument
<a class="nav-link nav-link--active">Home</a>
Wird fürs Styling verwendet. Elemente können mehrere
"class names" enthalten.
85. Dokument erstellen
• Mit Emmet: html:5Tab
• HTML5 Doctype: <!doctype html>
• head: Metadaten, Dokumenttitel, Link zu Stylesheets
35
86. Dokument erstellen
• Mit Emmet: html:5Tab
• HTML5 Doctype: <!doctype html>
• head: Metadaten, Dokumenttitel, Link zu Stylesheets
• body: Sichtbare Inhalte, Link zu JavaScripts am Ende
35
91. Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflow.com – Fragen & Antworten
37
92. Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflow.com – Fragen & Antworten
• abookapart.com – Bücher zu HTML5, CSS3 und mehr
37
93. Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflow.com – Fragen & Antworten
• abookapart.com – Bücher zu HTML5, CSS3 und mehr
• html5weekly.com – HTML News
37
94. Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflow.com – Fragen & Antworten
• abookapart.com – Bücher zu HTML5, CSS3 und mehr
• html5weekly.com – HTML News
• codepen.io – Online Frontend Code schreiben und teilen
37
102. Selektoren: class
42
<img src="img/logo.png" alt="IA Konferenz">
Nicht jedes <img> soll gleich gestylt werden
<img class="logo" src="img/logo.png" alt="IA Konferenz">
Durch das class-Attribut können wir das Element stylen
105. .logo {
width: 200px;
height: 100px;
}
Selektoren: class
43
.class-selector beginnt immer mit einem Punkt (.logo).
<img class="logo" src="img/logo.png" alt="IA Konferenz">
106. .logo {
width: 200px;
height: 100px;
}
Selektoren: class
43
.class-selector beginnt immer mit einem Punkt (.logo).
<img class="logo" src="img/logo.png" alt="IA Konferenz">
• Wir verwenden (fast) immer .class-Selektoren!
111. .logo {
width: 200px;
height: 100px;
}
Selektoren: class
44
:
Eine "declaration" besteht
aus property und value.
; selector und
{ declaration block }
bilden ein "Rule Set"
113. CSS untersuchen
• Element auswählen, Declarations ein- und ausschalten,
Werte ändern (auch mit Pfeiltasten und Shift)
• Element auswählen, class-Attribut hinzufügen und
entfernen
46
114. CSS: Learnings durch DevTools
• h1: "Element-Selektoren" nur für sehr allgemeine Styles,
sind weniger spezifisch als Klassen.
• h1, .main-headline: Ein Rule Set kann mehrere
kommagetrennte Selektoren haben.
• .page-nav .page-nav__link: Mehrteilige Selektoren sind
spezifischer. Hohe Spezifität ist schwer überschreibbar.
• #register: Ids haben höhere Spezifität als Klassen.
47
116. CSS: Block- und Inline-Elemente
49
Block-Elemente
Nehmen sich immer die
ganze verfügbare Breite.
z. B. h1, p, ul, li, div
117. CSS: Block- und Inline-Elemente
49
Block-Elemente
Nehmen sich immer die
ganze verfügbare Breite.
z. B. h1, p, ul, li, div
Inline-Elemente
Teilen sich eine Zeile.
z. B. a, em, img, span
125. CSS: Learnings Boxmodel
• Browser geben den Elementen Standard-Styles.
• padding wird auf die width und height draufgerechnet
• Inline-Elemente bekommen kein margin-top und
margin-bottom.
• margin-left: auto; margin-right: auto; zentriert Block-
Elemente horizontal.
53
141. Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflow.com – Fragen & Antworten
57
142. Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflow.com – Fragen & Antworten
• shop.smashingmagazine.com – Smashing Library
57
143. Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflow.com – Fragen & Antworten
• shop.smashingmagazine.com – Smashing Library
• abookapart.com – Bücher zu HTML5, CSS3 und mehr
57
144. Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
• developer.mozilla.org – alles zu HTML und CSS
• stackoverflow.com – Fragen & Antworten
• shop.smashingmagazine.com – Smashing Library
• abookapart.com – Bücher zu HTML5, CSS3 und mehr
• codepen.io – Online Frontend Code schreiben und teilen
57
149. 62
The most popular front-end framework for developing
responsive, mobile first projects on the web.
Was ist Bootstrap?
150. 62
„Millions of amazing sites
across the web are being
built with Bootstrap.“
The most popular front-end framework for developing
responsive, mobile first projects on the web.
Was ist Bootstrap?
151. 62
„Millions of amazing sites
across the web are being
built with Bootstrap.“
Sammlung von
HTML, CSS und JS
The most popular front-end framework for developing
responsive, mobile first projects on the web.
Was ist Bootstrap?
152. 62
NEU in Bootstrap 3
„Millions of amazing sites
across the web are being
built with Bootstrap.“
Sammlung von
HTML, CSS und JS
The most popular front-end framework for developing
responsive, mobile first projects on the web.
Was ist Bootstrap?
155. Wie funktioniert Bootstrap?
• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem
eigenen HTML
• Automatisches Styling: von Typographie und Links
63
156. Wie funktioniert Bootstrap?
• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem
eigenen HTML
• Automatisches Styling: von Typographie und Links
• Spezielles Styling: über das Einfügen von Klassen
63
162. Bootstrap: Grid
• Grid-System für Adaptive und Responsive Web Design
• Ist standardmäßig mobile first („scale up“)
67
163. Bootstrap: Grid
• Grid-System für Adaptive und Responsive Web Design
• Ist standardmäßig mobile first („scale up“)
• Funktioniert über verschachtelte Klassen
67
164. Bootstrap: Grid
1. Klasse „Container“
.container (fixed-width für Adaptive-Verhalten)
oder .container-fluid (full-width für Fluid-Verhalten)
68
165. Bootstrap: Grid
1. Klasse „Container“
.container (fixed-width für Adaptive-Verhalten)
oder .container-fluid (full-width für Fluid-Verhalten)
68
<div class="container-fluid">
</div>
172. Bootstrap Grid: Columns
72
Extra small
devices
Phones
<768px
.col-xs-
Small
devices
Tablets
≥768px
.col-sm-
Medium
devices
Desktops
≥992px
.col-md-
Large
devices
Desktops
≥1200px
.col-lg-
173. Bootstrap Grid: Columns
72
Extra small
devices
Phones
<768px
.col-xs-
Small
devices
Tablets
≥768px
.col-sm-
Medium
devices
Desktops
≥992px
.col-md-
Large
devices
Desktops
≥1200px
.col-lg-
Eine Grid-Größe gilt immer für diese Größe und darüber:
sm gilt für sm, md und lg.
177. Responsive und Mobile first: nicht heute
• Bootstrap ist von Haus aus responsive.
• Spezielle Elemente:
• Responsive tables
• Responsive images
• Responsive Utilities
(Sichtbarkeit toggeln)
74
Zu viele
Themen!
190. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfen: (a) CSS
80
bootstrap.css im head
VOR dem eigenen CSS
191. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfen: (b) JS
81
.js am Ende des bodys
192. Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen
• Schritt 3: Dateien verknüpfen
• Schritt 4: Layout-Elemente einfügen
82
z. B. Header, Primärnavigation,
Hauptcontent, Marginalspalte
und Footer
193. X
Erforderlich: Viewport Meta Tag im head
<meta name="viewport" content="width=device-width,
initial-scale=1">
Ermöglicht Responsive Web Design
auf mobilen Geräten
200. Bootstrap: Grid anlegen für main
• container und row sind bereits da
86
U
SB
05_bootstrap_
start
201. Bootstrap: Grid anlegen für main
• container und row sind bereits da
• Section „Jump Marks“ und „Articles“: col-sm-7
86
U
SB
05_bootstrap_
start
202. Bootstrap: Grid anlegen für main
• container und row sind bereits da
• Section „Jump Marks“ und „Articles“: col-sm-7
• Aside: col-sm-4 und col-sm-offset-1
86
U
SB
05_bootstrap_
start
211. Inhaltselemente: weitere Stylings
• Liste in Main aside: ohne Bulletpoints („unstyled“)
• Jump Marks: kleinere Textgröße
• Headlines in Articles und Aside: kleinere Textgröße
88
218. Warum Bootstrap?
• Gute Dokumentation
• Große Community
• Viele UI-Elemente
• Responsive Web Design als Standard
91
219. Warum Bootstrap?
• Gute Dokumentation
• Große Community
• Viele UI-Elemente
• Responsive Web Design als Standard
• Individuell anpassbar ("Customize")
91
226. • Start: Handscribbles
• Entscheidung: Ist die Projektart geeignet?
96
Tipps: die tägliche Arbeit
227. • Start: Handscribbles
• Entscheidung: Ist die Projektart geeignet?
• Doing: Prototyping gemeinsam durch Kreation und
Frontend-Entwicklung
96
Tipps: die tägliche Arbeit
228. • Start: Handscribbles
• Entscheidung: Ist die Projektart geeignet?
• Doing: Prototyping gemeinsam durch Kreation und
Frontend-Entwicklung
• Ergänzende Dokumentation: via Screenshots des
Prototypen im gewohnten Programm
96
Tipps: die tägliche Arbeit
250. Developing UXD: Nächste Schritte
• Die besten Lernquellen im Web
• Lernpläne
• Aufbau einer Community begeisterter UX-Designer
103
251. Developing UXD: Nächste Schritte
• Die besten Lernquellen im Web
• Lernpläne
• Aufbau einer Community begeisterter UX-Designer
• Entwicklung von Tools für Workflow-Optimierungen
103
262. Sublime Text 3: Emmet Shortcuts
• Selector-Syntax: e.g. article>h1+pTab wird zu
<article>
<h1></h1>
<p></p>
</article>
113
263. 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"
113
264. 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
113
265. 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
113
266. 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.
114
268. Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
115
269. Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
• Cmd+p: Fuzzy-Search für Dateien
115
270. Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
• Cmd+p: Fuzzy-Search für Dateien
• Cmd+Shift+p: Zugriff auf alle Befehle
115
271. 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
115
272. 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
115
274. Selektoren: BEM naming convention
• .page-header: Einfacher Bindestrich bei
zusammengesetzten Namen
116
275. Selektoren: BEM naming convention
• .page-header: Einfacher Bindestrich bei
zusammengesetzten Namen
• .page-nav, .page-nav__link: Unterelemente eines "Moduls"
haben den Modulnamen als Prefix.
116
276. 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.
116
282. Bootstrap UI Editors
• Eine Reihe von Editoren: für unterschiedliche
Ansprüche
• Siehe: http://thedesignblitz.com/the-best-bootstrap-ui-
editors/
119
283. 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
120
285. 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
122
286. 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)
123
287. 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
124
288. 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
125
289. STATISCHES
DESIGN
Grenzen des statischen Designs überwinden
• Liquid und responsive Layouts
• Realistische Darstellung von Typografie
• Globale Anpassungen von Farben, Abständen, Größen
• Animationen und Interaktionen
126
290. 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
127
291. FrontendKreation
• 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
Zusammenarbeit verbessern
128