Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)

<Developing UXD>
So leicht ist Frontendentwicklung für
Konzepter und Designer heute
IA Konferenz 2014

Conni und Jerry: Wer wir sind
2

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.“

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.“

Ziele des Workshops
• Quellcode lesen und verstehen
6

Ziele des Workshops
• Die erste Hürde des Selbst-Codens nehmen
6

Ziele des Workshops
• Die erste Hürde des Selbst-Codens nehmen
• Wissen, wie man weiter lernen kann
6

Nach dem Workshop könnt ihr noch nicht:
7

Axure wegschmeißen 
und direkt alle Wireframes 
per Code erzeugen.
8

Einführung: Warum wir dazu lernen müssen
9

Warum sollten wir HTML und CSS lernen?
10

• Die Basis dessen, was wir gestalten, sollten wir kennen.
10

• Zumal: Die Tools wechseln, HTML bleibt!
10

• Zumal: Die Tools wechseln, HTML bleibt!
• Und: Eine neue Generation „native Developers“ kommt.
10

”Coding is going to be
the literacy
of the 21st Century.“
ZACH SIMS
Co-Founder Codecademy

Es kann unsere Arbeitsweise verbessern!
12

12
Heutige Arbeitsweise
Technisch
umsetzen
Anforderungen
klären
Wireframes
erstellen
Screens
erstellen

12
Technisch
umsetzen
Anforderungen
klären
Wireframes
erstellen
Screens
erstellen
Abstrakt und statisch
Abstrakt

12
Technisch
umsetzen
Anforderungen
klären
Wireframes
erstellen
Screens
erstellen
Abstrakt
Echt Aber
anders

13
Zukünftige Arbeitsweise

13
Statische
Dokumente
• Brief
• User Journeys
• Sketching
• Look & Feel

13
Statische
Dokumente
• Brief
• User Journeys
• Sketching
• Look & Feel
Prototypen
Wireframes in
HTML + CSS
Layout in
HTML + CSS

13
Statische
Dokumente
• Brief
• User Journeys
• Sketching
• Look & Feel
Prototypen
Wireframes in
HTML + CSS
Layout in
HTML + CSS
Website
Entwicklung

Ende der Einführung. Fragen?
14

Agenda
✓ Einführung
• HTML-Grundlagen
• CSS-Grundlagen
• Bootstrap
• Ausblick
15

HTML: Aufbau und Inhalte einer Website
17

Interaktiv: Layout-Elemente kennenlernen
18

HTML: Layout-Elemente
• header, footer, aside, nav, main, article, section: 
"Sectioning elements" gruppieren inhaltlich
19

• main: Einzigartig! Hauptinhalte kommen hier rein.
19

• article: Muss alleine stehen können ( RSS-Feed, Pocket)
19

• nav: Nur für Navigation auf der Website
19

• nav: Nur für Navigation auf der Website
• div: Gruppiert für Styling, nicht inhaltlich (semantisch)
19

Interaktiv: Inhaltselemente kennenlernen
20

HTML: Inhaltselemente – Textinhalte
• h1, h2: Heading. Pro section ein neues h1.
• p: Absatz ("paragraph")
• a: Link ("anchor"). Darf weitere Inhalte enthalten.
21

HTML: Inhaltselemente – Weitere Inhalte
22

• img: "image" – Bildelement
22

• ul, ol: "unordered/ordered list" – eine Liste mit
Bulletpoints oder Nummerierungen. 
Darf nur li-Elemente enthalten.
22

• li: "List item" – darf andere Elemente enthalten.
22

• li: "List item" – darf andere Elemente enthalten.
• audio, video, canvas, embed: Media-Inhalte
22

Tags
<p>Das ist mein Absatz</p>
25

Tags
Opening <tag> Closing </tag>
25

Tags
25
• Layout-Elemente haben "opening" und "closing tags"

Tags
25
• Ermöglicht Verschachtelung

Tags
25
• Ermöglicht Verschachtelung
• Elemente ohne "closing tags" heißen "Void Tags"

Tags: Verschachtelung
26
<article> 
<h1>Welcome</h1> 
<p>Das ist mein Absatz, der <em>auch</em>
verschachtelte Elemente enthält.</p> 
</article>

26
<article> 
<h1>Welcome</h1> 
</article>
Opening <article>
Closing <article>

26
<article> 
<h1>Welcome</h1> 
</article>
Opening <article>
Closing <article>
Nested <h1>

26
<article> 
<h1>Welcome</h1> 
</article>
Opening <article>
Closing <article>
Nested <h1>
Nested <p>

26
<article> 
<h1>Welcome</h1> 
</article>
Opening <article>
Closing <article>
Nested <h1>
Nested <p>
Nested <em>

27
Attribute
<img src="img/logo.png">

27
Attribute
attribute 
= Eigenschaft

27
Attribute
attribute 
= Eigenschaft
"value" 
= Wert der Eigenschaft

27
Attribute
attribute 
= Eigenschaft
"value" 
• Elemente haben unterschiedliche attributes

27
Attribute
attribute 
= Eigenschaft
"value" 
• Elemente haben unterschiedliche attributes
• Es gibt attributes ohne value 
z.B. <input type="email" required>

28
Attribute: Wichtige
<input id="i-am-unique">

28
Attribute: Wichtige
Kennzeichnet ein zwingend einzigartiges Element, z.B.
input im Formular; #jumpmark im gleichen Dokument

28
Attribute: Wichtige
<a class="nav-link nav-link--active">Home</a>

28
Attribute: Wichtige
<a class="nav-link nav-link--active">Home</a>
Wird fürs Styling verwendet. Elemente können mehrere
"class names" enthalten.

Attribute: Beispiele
29
<img src="img/my-dog.jpg" alt="Caja">

29
<a href="contact.html">Contact</a>

29
<a href="http://google.com" target="_blank">Leave</a>

29
<label for="user-mail">Your email address:</label>

29
<input id="user-mail" type="email"

29
placeholder="me@me.io" required>

29
<script src="js/scripts.js"></script>

29
<script src="js/scripts.js"></script>
• Die Attribute von allen Elementen ﬁndet ihr  
unter MDN (Mozilla Developer Network)

Interaktiv: HTML-Elemente untersuchen
30

HTML-Elemente untersuchen
• Google Chrome: "Chrome Developer Tools (DevTools)"
• Rechtsklick auf Element: "Element untersuchen" 
(Proﬁs drücken cmd+shift+c)
• Aufklappen, Auswählen, per "Brotkrumen" navigieren
• Text ändern, Elemente verschieben und löschen
31

Sublime Text 3 einrichten: komplett
• Download: http://www.sublimetext.com/3
• Einstellungen: "Default Settings" in "User Settings"
kopieren und anpassen
• Package Control installieren für Erweiterungen
• cmd+shift+p "Package Install": 
Emmet, SidebarEnhancements, BracketHighlighter, 
Color Highlighter
33

Interaktiv: Dokument erstellen
34
U
SB
01_html_start

Dokument erstellen
• Mit Emmet: html:5Tab
35

Dokument erstellen
• HTML5 Doctype: <!doctype html>
35

Dokument erstellen
• head: Metadaten, Dokumenttitel, Link zu Stylesheets
35

Dokument erstellen
• head: Metadaten, Dokumenttitel, Link zu Stylesheets
• body: Sichtbare Inhalte, Link zu JavaScripts am Ende
35

Weitere Ressourcen
• codecademy.com – kostenloser Onlinekurs
37

Weitere Ressourcen
• developer.mozilla.org – alles zu HTML und CSS
37

Weitere Ressourcen
• stackoverﬂow.com – Fragen & Antworten
37

Weitere Ressourcen
• abookapart.com – Bücher zu HTML5, CSS3 und mehr
37

Weitere Ressourcen
• html5weekly.com – HTML News
37

Weitere Ressourcen
• html5weekly.com – HTML News
• codepen.io – Online Frontend Code schreiben und teilen
37

Agenda
✓ Einführung
✓ HTML-Grundlagen
• CSS-Grundlagen
• Bootstrap
• Ausblick
39

CSS: Elemente finden und verändern
41

Selektoren: class
42
<img src="img/logo.png" alt="IA Konferenz">

Selektoren: class
42
Nicht jedes <img> soll gleich gestylt werden

Selektoren: class
42
<img class="logo" src="img/logo.png" alt="IA Konferenz">

Selektoren: class
42
Durch das class-Attribut können wir das Element stylen

Selektoren: class
43

.logo { 
width: 200px; 
height: 100px; 
}
Selektoren: class
43

.logo { 
width: 200px; 
height: 100px; 
}
Selektoren: class
43
.class-selector beginnt immer mit einem Punkt (.logo).

.logo { 
width: 200px; 
height: 100px; 
}
Selektoren: class
43
.class-selector beginnt immer mit einem Punkt (.logo).
• Wir verwenden (fast) immer .class-Selektoren!

.logo { 
width: 200px; 
height: 100px; 
}
Selektoren: class
44

.logo { 
width: 200px; 
height: 100px; 
}
Selektoren: class
44
Eine "declaration" besteht
aus property und value.

.logo { 
width: 200px; 
height: 100px; 
}
Selektoren: class
44
:

.logo { 
width: 200px; 
height: 100px; 
}
Selektoren: class
44
:
;

.logo { 
width: 200px; 
height: 100px; 
}
Selektoren: class
44
:
; selector und
{ declaration block }
bilden ein "Rule Set"

Interaktiv: CSS untersuchen
45

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

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

CSS: Block- und Inline-Elemente
49
Block-Elemente
Nehmen sich immer die
ganze verfügbare Breite.
z. B. h1, p, ul, li, div

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

Demonstration: Block- und Inline-Elemente
50

CSS: Box Model
51
Element
Element

CSS: Box Model
51
Padding
Element
Element

CSS: Box Model
51
Border
Padding
Element
Element

CSS: Box Model
Margin
51
Border
Padding
Element
Element

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

Border, Margin und Padding: Werte
54
margin: 5px 10px 20px 3px;

54
Oben

54
Oben Rechts

54
Oben
Unten
Rechts

54
Oben
Unten
Rechts
Links

54
Oben
Unten
Rechts
Links
margin-top: 5px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 3px;

55

55
margin: 5px 10px 20px 3px; Oben UntenRechts Links

55

Interaktiv: CSS schreiben
56
U
SB
03_css_start

Weitere Ressourcen
• css-tricks.com – CSS Tutorials und Tipps
57

Weitere Ressourcen
57

Weitere Ressourcen
• shop.smashingmagazine.com – Smashing Library
57

Weitere Ressourcen
57

Weitere Ressourcen
• codepen.io – Online Frontend Code schreiben und teilen
57

Agenda
✓ Einführung
✓ HTML-Grundlagen
✓ CSS-Grundlagen
• Bootstrap
• Ausblick
59

62
The most popular front-end framework for developing
responsive, mobile ﬁrst projects on the web.
Was ist Bootstrap?

62
„Millions of amazing sites
across the web are being
built with Bootstrap.“
Was ist Bootstrap?

62
Sammlung von
HTML, CSS und JS
Was ist Bootstrap?

62
NEU in Bootstrap 3
Sammlung von
HTML, CSS und JS
Was ist Bootstrap?

Wie funktioniert Bootstrap?
63

• Verknüpfung: von Bootstrap-CSS sowie -JS mit dem
eigenen HTML
63

eigenen HTML
• Automatisches Styling: von Typographie und Links
63

eigenen HTML
• Automatisches Styling: von Typographie und Links
• Spezielles Styling: über das Einfügen von Klassen
63

Demonstration: Das ist Bootstrap.
64

Bootstrap: CSS und Components
65
CSS
Typography
Code
Tables
Forms
Buttons
Images
Helper Classes
Responsive Utilities
Components
Glyphicons
Dropdowns
Button groups
Button dropdowns
Input groups
Navs
Navbar
Breadcrumbs
Paginations
Labels
Badges
Jumbotron
Page header
Thumbnails
Alerts
Progress bars
Media object
List group
Panels
Wells

Bootstrap: Grid
• Grid-System für Adaptive und Responsive Web Design
67

Bootstrap: Grid
• Ist standardmäßig mobile ﬁrst („scale up“)
67

Bootstrap: Grid
• Ist standardmäßig mobile ﬁrst („scale up“)
• Funktioniert über verschachtelte Klassen
67

Bootstrap: Grid
1. Klasse „Container“ 
.container (ﬁxed-width für Adaptive-Verhalten)
oder .container-ﬂuid (full-width für Fluid-Verhalten)
68

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>

Bootstrap: Grid
2. Klasse „Row“ 
um Elemente nebeneinander anzuordnen
69

Bootstrap: Grid
2. Klasse „Row“ 
um Elemente nebeneinander anzuordnen
69
<div class="container-ﬂuid"> 
<div class="row">
</div>
</div>

Bootstrap: Grid
3. Klasse „Column“ 
für die Deﬁnition der Spaltenbreite, basierend auf
einem 12-spaltigen Grid-System
70

Bootstrap: Grid
3. Klasse „Column“ 
für die Deﬁnition der Spaltenbreite, basierend auf
einem 12-spaltigen Grid-System
70
<div class="row">
<div class="col-md-6">Halbe Reihe</div>
</div>
</div>

<div class="row">
</div>
</div>
Bootstrap: Grid
71
1. Container
2. Row
3. Columns

<div class="row">
</div>
</div>
Bootstrap: Grid
71
1. Container
2. Row
3. Columns
Halbe Reihe Halbe Reihe

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-

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.

Bootstrap Grid: Columns mit Versatz
73
4 Spalten 4 Spalten

73
4 Spalten 4 Spalten
<div class="row">
<div class=„col-md-4“>4 Spalten</div>
<div class=„col-md-4 col-md-offset-4“>4 Spalten</div>
</div>
</div>

73
4 Spalten 4 Spalten
<div class="row">
<div class=„col-md-4“>4 Spalten</div>
<div class=„col-md-4 col-md-offset-4“>4 Spalten</div>
</div>
</div> Offset

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!

Interaktiv: Bootstrap kennenlernen
75

Bootstrap: Loslegen in 6 Schritten
• Schritt 1: Download unter http://getbootstrap.com/ 
76

76
U
SB
downloads /
bootstrap-3.1.1-dist
Dieses, bitte!

77

• Schritt 1: Download
• Schritt 2: Dateistruktur anlegen

getbootstrap.com
css/bootstrap.css
fonts
js/bootstrap.js

getbootstrap.com
css/bootstrap.css
fonts
js/bootstrap.js
Lokaler Ordner
css/
Neuer Ordner: fonts
Neuer Ordner: js

getbootstrap.com
css/bootstrap.css
fonts
js/bootstrap.js
Lokaler Ordner
css/
Neuer Ordner: fonts
Neuer Ordner: js
jquery.com
jquery.js

getbootstrap.com
css/bootstrap.css
fonts
js/bootstrap.js
Lokaler Ordner
css/
Neuer Ordner: fonts
Neuer Ordner: js
jquery.com
jquery.js In den js-Ordner

• Schritt 2: Dateistruktur anlegen U
SB
05_bootstrap_
start
getbootstrap.com
css/bootstrap.css
fonts
js/bootstrap.js
Lokaler Ordner
css/
Neuer Ordner: fonts
Neuer Ordner: js
jquery.com
jquery.js In den js-Ordner

• Schritt 3: Dateien verknüpfen
79

• Schritt 3: Dateien verknüpfen: (a) CSS
80
bootstrap.css im head
VOR dem eigenen CSS

• Schritt 3: Dateien verknüpfen: (b) JS
81
.js am Ende des bodys

• Schritt 4: Layout-Elemente einfügen 
82
z. B. Header, Primärnavigation,
Hauptcontent, Marginalspalte
und Footer

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

• Schritt 4: Layout-Elemente einfügen
• Schritt 5: Grid anlegen
83

83
mit Hilfe der Bootstrap-Doku

• Schritt 6: Inhaltselemente anlegen und stylen
84

84
mit Hilfe der Code-Snippets aus der Bootstrap-Doku

85

Bootstrap: Grid anlegen für main
86
U
SB
05_bootstrap_
start

• container und row sind bereits da
86
U
SB
05_bootstrap_
start

• Section „Jump Marks“ und „Articles“: col-sm-7
86
U
SB
05_bootstrap_
start

• Section „Jump Marks“ und „Articles“: col-sm-7
• Aside: col-sm-4 und col-sm-offset-1
86
U
SB
05_bootstrap_
start

Bootstrap: Inhaltselemente stylen
87

87
• Link „Einreichungsformular“: grüner Button 
Link „Tickets kaufen“: großer, orangener Button

87
• Meta nav: „list-inline“ anordnen und „pull-right“
ausrichten

87
ausrichten
• Main navigation: gewünschte „nav“ hinzufügen (z. B.
„Pills“), ausrichten („justiﬁed“), größere Schrift (z. B. „lead“)
„IAK 2014“ ist „active“

87
ausrichten
• Main navigation: gewünschte „nav“ hinzufügen (z. B.
„Pills“), ausrichten („justiﬁed“), größere Schrift (z. B. „lead“)
„IAK 2014“ ist „active“
• Footer-Link: rechtsausgerichtetes Icon

Inhaltselemente: weitere Stylings
88

• Liste in Main aside: ohne Bulletpoints („unstyled“)
88

• Jump Marks: kleinere Textgröße
88

• Jump Marks: kleinere Textgröße
• Headlines in Articles und Aside: kleinere Textgröße
88

Bootstrap: Was noch zu sagen ist.
89

Demonstration: JavaScript mit Bootstrap
90

Warum Bootstrap?
• Gute Dokumentation
91

Warum Bootstrap?
• Große Community
91

Warum Bootstrap?
• Viele UI-Elemente
91

Warum Bootstrap?
• Responsive Web Design als Standard
91

Warum Bootstrap?
• Responsive Web Design als Standard
• Individuell anpassbar ("Customize")
91

Unser erstes Boilerplate: für euch
92
github.com/developinguxd/boilerplates

Das ist Bootstrap. Noch Fragen?
93

Agenda
✓ Einführung
✓ HTML-Grundlagen
✓ CSS-Grundlagen
✓ Bootstrap
• Ausblick
94

96
Tipps: die tägliche Arbeit

• Start: Handscribbles
96

• Entscheidung: Ist die Projektart geeignet?
96

• Doing: Prototyping gemeinsam durch Kreation und
Frontend-Entwicklung
96

• Doing: Prototyping gemeinsam durch Kreation und
Frontend-Entwicklung
• Ergänzende Dokumentation: via Screenshots des
Prototypen im gewohnten Programm
96

Weiterlernen: viele wichtige Themen
97

97
HTML
CSS
Bootstrap
DevTools

97
JavaScript
jQuery
Sass
holder.jsHTML
CSS
Bootstrap
DevTools

97
JavaScript
jQuery
Sass
holder.js GitHub
CodeKit
Webfonts
CodePen
HTML
CSS
Bootstrap
DevTools

“I think everybody in
this country should
learn how to program
a computer because
it teaches you how to
think.“
STEVE JOBS
The Lost Interview

Developing UXD: Unsere Idee
100

101

• Fest deﬁniertes, gemeinsames Toolset
101

• Moderne, erprobte Standards
101

• Vorauswahl der besten Lernressourcen
101

• Lebendige Plattform
101

• Gemeinsam und Open Source
101

• Eigenentwicklungen
101

• Eigenentwicklungen
• Unterstützung durch Frontend-Community
101

developinguxd.com
102
@developinguxd
facebook.com/developinguxd
mail@developinguxd.com

Developing UXD: Nächste Schritte
103

• Die besten Lernquellen im Web
103

• Lernpläne
103

• Lernpläne
• Aufbau einer Community begeisterter UX-Designer
103

• Lernpläne
• Aufbau einer Community begeisterter UX-Designer
• Entwicklung von Tools für Workﬂow-Optimierungen
103

Vielen Dank! Happy coding!
104

developinguxd.com
106
@developinguxd

Cornelia Erbs, Jeremias Dombrowsky
Lessers Passage 10
22767 Hamburg
!
+49 (0)151 23421980
!
http://developinguxd.com/
107

Alle Icons in dieser Präsentation kommen von
http://iconmonstr.com/
108

Backlog: Sublime, HTML, CSS, JS
111

Backlog
• Sublime: Shortcuts
• Sublime: Emmet Shortcuts
• HTML: Formulare
• Holder.js: Img placeholders
• CSS: BEM naming convention
• jQuery und JavaScript: Einbinden und laden
112

Sublime Text 3: Emmet Shortcuts
113

• Selector-Syntax: e.g. article>h1+pTab wird zu 
<article> 
<h1></h1> 
<p></p> 
</article>
113

<article> 
<h1></h1> 
<p></p> 
</article>
• Ctrl+w: "Wrap with tag"
113

<article> 
<h1></h1> 
<p></p> 
</article>
• Cmd+Shift+k: Tag ändern
113

<article> 
<h1></h1> 
<p></p> 
</article>
• Cmd+Shift+k: Tag ändern
• Cmd+': Element löschen
113

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

Sublime Text 3: Shortcuts
• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)
115

• Cmd+p: Fuzzy-Search für Dateien
115

• Cmd+Shift+p: Zugriff auf alle Befehle
115

• Cmd+d: Weitere Instanz des markierten Texts auswählen
115

• Cmd+d: Weitere Instanz des markierten Texts auswählen
• Ausführliches Tutorial auf scotch.io
115

Selektoren: BEM naming convention
116

• .page-header: Einfacher Bindestrich bei
zusammengesetzten Namen
116

• .page-nav, .page-nav__link: Unterelemente eines "Moduls"
haben den Modulnamen als Preﬁx.
116

• .page-nav, .page-nav__link: Unterelemente eines "Moduls"
haben den Modulnamen als Preﬁx.
• .button, .button--small, .button--cancel: Varianten sind als
solche erkennbar.
116

Holder.js: Img placeholders
117

• Download: http://imsky.github.io/holder/
117

• JavaScript im <body> laden: 
<script src="js/holder.js"></script>
117

• 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">
117

Bootstrap UI Editors
• Eine Reihe von Editoren: für unterschiedliche
Ansprüche
• Siehe: http://thedesignblitz.com/the-best-bootstrap-ui-
editors/
119

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

Backlog: Argumentationshilfe
121

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

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

UX
Vorteile: für Agenturen 1/2
• Keine bzw. weniger Speziﬁkationen 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

UX
Vorteile: für Agenturen 2/2
• Frühe Usertests sind möglich
• Browser-Speziﬁka funktionieren automatisch
(Scrollbars, Button-Größen, Hover etc.)
• Code kann in Teilen weiter verwendet werden
125

STATISCHES
DESIGN
Grenzen des statischen Designs überwinden
• Liquid und responsive Layouts
• Realistische Darstellung von Typograﬁe
• Globale Anpassungen von Farben, Abständen, Größen
• Animationen und Interaktionen
126

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

FrontendKreation
• Besseres Verständnis für das Medium und für Frontend-
Developer
• Weniger Abhängigkeit von Frontend-Developern bei der
Ideenﬁndung
• Implementierungsaufwände besser einschätzen können
• Gemeinsames (richtiges) Vokabular aufbauen
• Gemeinsam an Prototypen arbeiten
Zusammenarbeit verbessern
128

developinguxd.com
129
@developinguxd

Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)

Weitere ähnliche Inhalte

Ähnlich wie Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)

Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)