Developing UXD - Workshop bei XING

<Developing UXD>So leicht ist Frontendentwicklung für

Konzepter und Designer heute

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

Und wer seid ihr?

5

• Name

• Job

• Vorkenntnisse

• Wünsche an den Workshop

Ziele des Workshops

6

Ziele des Workshops

7

Ziele des Workshops

• Quellcode lesen und verstehen

7

Ziele des Workshops


• Die erste Hürde des Selbst-Codens nehmen

7

Ziele des Workshops


• Die erste Hürde des Selbst-Codens nehmen

• Wissen, wie man weiter lernen kann

7

Nach dem Workshop könnt ihr noch nicht:

8

Axure wegschmeißenund direkt alle Wireframes per Code erzeugen.

9

Einführung: Warum wir dazu lernen müssen

10

Warum sollten wir HTML und CSS lernen?

11


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

11



• Zumal: Die Tools wechseln, HTML bleibt!

11



• Zumal: Die Tools wechseln, HTML bleibt!

• Und: Eine neue Generation „native Developers“ kommt.

11

”Coding is going to be the literacy of the 21st Century.“

ZACH SIMS Co-Founder Codecademy

Es kann unsere Arbeitsweise verbessern!

13


13

Heutige Arbeitsweise

Technisch umsetzen

Anforderungen klären

Wireframes erstellen

Screens erstellen


13


Technisch umsetzen



Screens erstellen

Abstrakt und statisch

AbstraktAbstrakt und statisch


13


Technisch umsetzen



Screens erstellen

Abstrakt und statisch

AbstraktAbstrakt und statisch

Echt Aber

anders


14

Zukünftige Arbeitsweise


14


Statische Dokumente

• Brief • User Journeys • Sketching • Look & Feel


14


Statische Dokumente


Prototypen

Wireframes in HTML + CSS

Layout in HTML + CSS


14


Statische Dokumente


Prototypen

Wireframes in HTML + CSS

Layout in HTML + CSS

Website

Entwicklung

Ende der Einführung. Fragen?

15

Agenda

✓ Einführung

• HTML-Grundlagen

• CSS-Grundlagen

• Bootstrap

• Ausblick

16

HTML-Grundlagen

17

HTML: Aufbau und Inhalte einer Website

18

Interaktiv: Layout-Elemente kennenlernen

19

HTML: Layout-Elemente

20


• header, footer, aside, nav, main, article, section:"Sectioning elements" gruppieren inhaltlich

20



• main: Einzigartig! Hauptinhalte kommen hier rein.

20




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

20





• nav: Nur für Navigation auf der Website

20





• nav: Nur für Navigation auf der Website

• div: Gruppiert für Styling, nicht inhaltlich (semantisch)

20

Interaktiv: Inhaltselemente kennenlernen

21

HTML: Inhaltselemente – Textinhalte

• h1, h2: Heading. Pro section ein neues h1.

• p: Absatz ("paragraph")

• a: Link ("anchor"). Darf weitere Inhalte enthalten.

22

HTML: Inhaltselemente – Weitere Inhalte

23


• img: "image" – Bildelement

23



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

23




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

23




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

• audio, video, canvas, object: Media-Inhalte

23

Fragen soweit?

24

HTML: Syntax

25

Tags

<p>Das ist mein Absatz</p>

26

Tags


Opening <tag> Closing </tag>

26

Tags



26

• Layout-Elemente haben "opening" und "closing tags".

Tags



26


• Ermöglicht Verschachtelung

Tags



26


• Ermöglicht Verschachtelung

• Es gibt Elemente ohne "closing tags". z.B. <img>

Tags: Verschachtelung

27

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


27


Opening <article>

Closing <article>


27


Opening <article>

Closing <article>

Nested <h1>


27


Opening <article>

Closing <article>

Nested <h1>

Nested <p>


27


Opening <article>

Closing <article>

Nested <h1>

Nested <p>

Nested <em>

28

Attribute

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

28

Attribute


attribute = Eigenschaft

28

Attribute



"value" = Wert der Eigenschaft

28

Attribute




• Elemente haben unterschiedliche attributes

28

Attribute




• Elemente haben unterschiedliche attributes

• Es gibt attributes ohne valuez.B. <input type="email" required>

29

Attribute: Wichtige

29

Attribute: Wichtige

<input id="i-am-unique">

29

Attribute: Wichtige


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

29

Attribute: Wichtige



<a class="nav-link nav-link--active">Home</a>

29

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

30


30

<img src="img/my-dog.jpg" alt="Caja">


30

<img src="img/my-dog.jpg" alt="Caja"><a href="contact.html">Contact</a>


30

<img src="img/my-dog.jpg" alt="Caja"><a href="contact.html">Contact</a><a href="http://google.com" target="_blank">Leave</a>


30

<img src="img/my-dog.jpg" alt="Caja"><a href="contact.html">Contact</a><a href="http://google.com" target="_blank">Leave</a><label for="user-mail">Your email address:</label>


30

<img src="img/my-dog.jpg" alt="Caja"><a href="contact.html">Contact</a><a href="http://google.com" target="_blank">Leave</a><label for="user-mail">Your email address:</label><input id="user-mail" type="email"


30

<img src="img/my-dog.jpg" alt="Caja"><a href="contact.html">Contact</a><a href="http://google.com" target="_blank">Leave</a><label for="user-mail">Your email address:</label><input id="user-mail" type="email" placeholder="[email protected]" required>


30

<img src="img/my-dog.jpg" alt="Caja"><a href="contact.html">Contact</a><a href="http://google.com" target="_blank">Leave</a><label for="user-mail">Your email address:</label><input id="user-mail" type="email" placeholder="[email protected]" required><script src="js/scripts.js"></script>


30

<img src="img/my-dog.jpg" alt="Caja"><a href="contact.html">Contact</a><a href="http://google.com" target="_blank">Leave</a><label for="user-mail">Your email address:</label><input id="user-mail" type="email" placeholder="[email protected]" required><script src="js/scripts.js"></script>

• Die Attribute von allen Elementen findet ihr unter MDN (Mozilla Developer Network)

https://developer.mozilla.org/en-US/docs/Web

31

Interaktiv: HTML-Elemente untersuchen

www.developinguxd.com

http://www.developinguxd.com

HTML-Elemente untersuchen

• Google Chrome: "Chrome Developer Tools (DevTools)"

• Rechtsklick auf Element: "Element untersuchen" (Profis drücken cmd+shift+c)

• Aufklappen, Auswählen, per "Brotkrumen" navigieren

• Text ändern, Elemente verschieben und löschen

32

HTML: Dokument erstellen

33

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

34

http://www.sublimetext.com/3

https://sublime.wbond.net/installation

Interaktiv: Dokument erstellen

35

rohrpostix ☛ Daten/Transfer/Developing UXD/ kopieren! Dann Schreibtisch ☛ Developing UXD/exercises/01_html_start öffnen

Dokument erstellen

36

Dokument erstellen

• Mit Emmet: html:5Tab

36

Dokument erstellen


• HTML5 Doctype: <!doctype html>

36

Dokument erstellen



• head: Metadaten, Dokumenttitel, Link zu Stylesheets

36

Dokument erstellen



• head: Metadaten, Dokumenttitel, Link zu Stylesheets

• body: Sichtbare Inhalte, Link zu JavaScripts am Ende

36

Interaktiv: HTML schreiben

37

Weitere Ressourcen

38

Weitere Ressourcen

• codecademy.com – kostenloser Onlinekurs

38

http://codecademy.com

http://developer.mozilla.org

http://stackoverflow.com

http://abookapart.com

http://amp-what.com

http://codepen.io

http://jsbin.com

Weitere Ressourcen


• developer.mozilla.org – MDN: alles zu HTML und CSS

38





http://amp-what.com

http://codepen.io

http://jsbin.com

Weitere Ressourcen



• stackoverflow.com – Fragen und Antworten

38





http://amp-what.com

http://codepen.io

http://jsbin.com

Weitere Ressourcen




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

38





http://amp-what.com

http://codepen.io

http://jsbin.com

Weitere Ressourcen





• amp-what.com – Sonderzeichen finden

38





http://amp-what.com

http://codepen.io

http://jsbin.com

Weitere Ressourcen





• amp-what.com – Sonderzeichen finden

• codepen.io und jsbin.com – Online-Editoren 38





http://amp-what.com

http://codepen.io

http://jsbin.com

Das ist HTML. Fragen?

39

Agenda

✓ Einführung

✓ HTML-Grundlagen

• CSS-Grundlagen

• Bootstrap

• Ausblick

40

CSS-Grundlagen

41

CSS: Elemente finden und stylen

42

Selektoren: class

43

<img src="img/logo.png" alt="IA Konferenz">

Selektoren: class

43


Nicht jedes <img> soll gleich gestylt werden

Selektoren: class

43



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

Selektoren: class

43




Durch das class-Attribut können wir das Element stylen

44


Selektoren: class

.logo { width: 200px; height: 100px; }

44


Selektoren: class


44

.class-selector beginnt immer mit einem Punkt.


Selektoren: class


44

.class-selector beginnt immer mit einem Punkt.


• Wir verwenden (fast) immer .class-Selektoren!

Selektoren: class


45

Selektoren: class


45

Eine "declaration" besteht

aus property und value.

Selektoren: class


45

:



Selektoren: class


45

:



;

Selektoren: class


45

:



; selector und

{ declaration block }

bilden ein "Rule Set"

Selektoren: class

46

Interaktiv: CSS mit DevTools untersuchen

www.developinguxd.com

http://www.developinguxd.com

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

47

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.

48

CSS: Wichtige Konzepte

49

CSS: Block- und Inline-Elemente

50

Block-Elemente

Stehen immer alleine pro Zeile und füllen den Platz aus. z. B. h1, p, ul, div

CSS: Block- und Inline-Elemente

50

Block-Elemente

Stehen immer alleine pro Zeile und füllen den Platz aus. z. B. h1, p, ul, div

Inline-Elemente

Teilen sich eine Zeile.z. B. a, em, img, span

Demonstration: Block- und Inline-Elemente

51

CSS: Box Model

52

CSS: Box Model

52

Element

Element

CSS: Box Model

52

Padding

Element

Element

CSS: Box Model

52

BorderPadding

Element

Element

CSS: Box Model

Margin

52

BorderPadding

Element

Element

Margin

53

BorderPadding

Element

Element

CSS: Box Model

Demonstration: Box Model

54

CSS: Learnings Box Model

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

55

Border, Margin und Padding: Werte

56

margin: 5px 10px 20px 3px;


56


Oben


56


Oben Rechts


56


Oben

Unten

Rechts


56


Oben

Unten

Rechts

Links


56


Oben

Unten

Rechts

Links

margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 3px;

57


57

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


57




Interaktiv: CSS schreiben

58

03_css_start

Weitere Ressourcen

59

Weitere Ressourcen

• css-tricks.com – CSS Tutorials und Tipps

59

http://css-tricks.com



http://shop.smashingmagazine.com


Weitere Ressourcen


• developer.mozilla.org – alles zu HTML und CSS

59






Weitere Ressourcen




59






Weitere Ressourcen




• shop.smashingmagazine.com – Smashing Library

59






Weitere Ressourcen




• shop.smashingmagazine.com – Smashing Library


59






Das ist CSS. Fragen?

60

Agenda

✓ Einführung

✓ HTML-Grundlagen

✓ CSS-Grundlagen

• Bootstrap

• Ausblick

61

Bootstrap

62

Bootstrap: Was ist das?

63

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

64

Was ist Bootstrap?

Wie funktioniert Bootstrap?

65


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

65



• Automatisches Styling: von Typographie und Links

65



• Automatisches Styling: von Typographie und Links

• Spezielles Styling: über das Einfügen von Klassen

65

66

Demonstration: Das ist Bootstrap.

getbootstrap.com

http://getbootstrap.com

Bootstrap: CSS und Components

67

CSS

Typography Code Tables Forms Buttons Images Helper classes Responsive utilities

Components

Glyphicons Dropdowns Button groups Button dropdowns Input groups Navs Navbar Breadcrumbs Pagination Labels

Badges Jumbotron Page header Thumbnails Alerts Progress bars Media object List group Panels Wells

Bootstrap: das Grid

68

Bootstrap: Grid

69

Bootstrap: Grid

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

69

Bootstrap: Grid


• Ist standardmäßig mobile first („scale up“)

69

Bootstrap: Grid


• Ist standardmäßig mobile first („scale up“)

• Funktioniert über verschachtelte Klassen

69

Bootstrap: Grid

1. Klasse containercontainer (fixed-width für Adaptive-Verhalten) oder container-fluid (full-width für Fluid-Verhalten)

70

Bootstrap: Grid

1. Klasse containercontainer (fixed-width für Adaptive-Verhalten) oder container-fluid (full-width für Fluid-Verhalten)

70

<div class="container-fluid"> </div>

2. Klasse rowum Elemente nebeneinander anzuordnen

71

Bootstrap: Grid

2. Klasse rowum Elemente nebeneinander anzuordnen

71

<div class="container-fluid"> <div class="row"> </div> </div>

Bootstrap: Grid

3. Klasse column (z.B. col-sm-6) für die Definition der Spaltenbreite, basierend auf einem 12-spaltigen Grid-System

72

Bootstrap: Grid

3. Klasse column (z.B. col-sm-6) für die Definition der Spaltenbreite, basierend auf einem 12-spaltigen Grid-System

72

<div class="container-fluid"> <div class="row"> <div class="col-sm-6">Halbe Reihe</div> <div class="col-sm-6">Halbe Reihe</div> </div> </div>

Bootstrap: Grid


73

1. Container

2. Row

3. Columns

Bootstrap: Grid


73

1. Container

2. Row

3. Columns

Halbe Reihe Halbe Reihe

Bootstrap: Grid

Bootstrap Grid: Columns

74

Extra smalldevices

Phones<768px

.col-xs-

Smalldevices

Tablets ≥768px

.col-sm-

Medium devices

Desktops≥992px

.col-md-

Large devices

Desktops≥1200px

.col-lg-

Bootstrap Grid: Columns

74

Extra smalldevices

Phones<768px

.col-xs-

Smalldevices

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

75

4 Spalten 4 Spalten


75

4 Spalten 4 Spalten

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


75

4 Spalten 4 Spalten

<div class="container-fluid"> <div class="row"> <div class=„col-sm-4“>4 Spalten</div> <div class=„col-sm-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)

76

Zu viele Themen!

Interaktiv: Bootstrap kennenlernen

77

Bootstrap: Loslegen in 6 Schritten

• Schritt 1: Download unter http://getbootstrap.com/

78

downloads / bootstrap-3.3.0-distDieses, bitte!

http://getbootstrap.com/


• Schritt 1: Download unter http://getbootstrap.com/

79

http://getbootstrap.com/


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen

Lokaler Ordner



Lokaler Ordnergetbootstrap.com

css/bootstrap.css fonts js/bootstrap.js

css/ Neuer Ordner: fonts Neuer Ordner: js






jquery.com

jquery.js In den js-Ordner






jquery.com

jquery.js In den js-Ordnerimsky.github.io/holder/

holder.js In den js-Ordner


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen

81


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen: (a) CSS

82

bootstrap.css im head VOR dem eigenen CSS


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen: (b) JS

83

.js am Ende des bodys


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen

84

z. B. Header, Primärnavigation, Hauptcontent, Marginalspalte und Footer

85

Erforderlich: Viewport meta Tag im head

<meta name="viewport" content="width=device-width,

initial-scale=1">

Ermöglicht Responsive Web Designauf mobilen Geräten


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen • Schritt 5: Grid anlegen

86


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen • Schritt 5: Grid anlegen

86

mit Hilfe der Bootstrap-Doku


• Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen • Schritt 5: Grid anlegen • Schritt 6: Inhaltselemente anlegen und stylen

87



87

mit Hilfe der Code-Snippets aus der Bootstrap-Doku



88

Los gehts!

89

05_bootstrap_start

Inhaltselemente: Main navigation

90


• Nav-Style

90


• Nav-Style

• Ausrichtung

90


• Nav-Style

• Ausrichtung

• Textgröße

90


• Nav-Style

• Ausrichtung

• Textgröße

• Abstand nach unten

90

Inhaltselemente: weitere Stylings

91


• Breadcrumb

91


• Breadcrumb

• Buttons: aus dem Download-Link und dem „Buy now“-Link

91


• Breadcrumb


• Kleinere Headlines im Aside

91


• Breadcrumb



• Liste ohne Bulletpoints im Aside

91


• Breadcrumb



• Liste ohne Bulletpoints im Aside

• Icon hinter dem Top-Link im Footer

91

Bootstrap: Was noch zu sagen ist.

92

93

Demonstration: JavaScript mit Bootstrap

getbootstrap.com

http://getbootstrap.com

Warum Bootstrap?

94

Warum Bootstrap?

• Gute Dokumentation

94

Warum Bootstrap?


• Große Community

94

Warum Bootstrap?



• Viele UI-Elemente

94

Warum Bootstrap?




• Responsive Web Design als Standard

94

Warum Bootstrap?




• Responsive Web Design als Standard

• Individuell anpassbar ("Customize")

94

Unser Boilerplate: für euch

95

github.com/developinguxd/boilerplates

Das ist Bootstrap. Noch Fragen?

96

Agenda

✓ Einführung

✓ HTML-Grundlagen

✓ CSS-Grundlagen

✓ Bootstrap

• Ausblick

97

Ausblick

98

99

Tipps: die tägliche Arbeit

• Start: Handscribbles

99



• Entscheidung: Ist die Projektart geeignet?

99



• Entscheidung: Ist die Projektart geeignet?

• Doing: Prototyping gemeinsam durch Kreation und Frontend-Entwicklung

99


Weiterlernen: viele wichtige Themen

100


100

HTML

CSS

Bootstrap

DevTools

holder.js


100

HTML

CSS

Bootstrap

DevTools

holder.js

JavaScript

jQuery

Responsive

Mobile


100

HTML

CSS

Bootstrap

DevTools

holder.js

GitHub

Webfonts

CodePen

Emmet

JavaScript

jQuery

Responsive

Mobile

“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

One more thing ...

102

Developing UXD: Unsere Idee

103


104


• Fest definiertes, gemeinsames Toolset

104



• Moderne, erprobte Standards

104




• Vorauswahl der besten Lernressourcen

104





• Lebendige Plattform

104






• Gemeinsam und Open Source

104







• Eigenentwicklungen

104







• Eigenentwicklungen

• Unterstützung durch Frontend-Community

104

developinguxd.com

105

developinguxd.com

105

@developinguxd facebook.com/developinguxd [email protected]

Developing UXD: Nächste Schritte

106


• Die besten Lernquellen im Web

106



• Lernpläne

106



• Lernpläne

• Aufbau einer Community begeisterter UX-Designer

106



• Lernpläne

• Aufbau einer Community begeisterter UX-Designer

• Entwicklung von Tools für Workflow-Optimierungen

106

Vielen Dank! Happy coding!

107

Euer Feedback: Wie wars?

108

developinguxd.com

109


Cornelia Erbs, Jeremias Dombrowsky Lessers Passage 10 22767 Hamburg

+49 (0)151 23421980

[email protected] http://developinguxd.com/

110

http://developinguxd.com/

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

111

http://iconmonstr.com/

Backlog

112

Backlog: Sublime, HTML, CSS, JS

113

Backlog

• Sublime: Shortcuts

• Sublime: Emmet Shortcuts

• HTML: Formulare

• Holder.js: Img placeholders

• CSS: BEM naming convention

• jQuery und JavaScript: Einbinden und laden 114

Sublime Text 3: Emmet Shortcuts

115


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

115



• Ctrl+w: "Wrap with tag"

115




• Cmd+Shift+k: Tag ändern

115




• Cmd+Shift+k: Tag ändern

• Cmd+': Element löschen 115

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.

116

Sublime Text 3: Shortcuts

117


• TagnameTab: Autocomplete (Mehrfach für Sprungmarken)

117

http://scotch.io/bar-talk/the-complete-visual-guide-to-sublime-text-3-getting-started-and-keyboard-shortcuts



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

117





• Cmd+Shift+p: Zugriff auf alle Befehle

117






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

117






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

• Ausführliches Tutorial auf scotch.io

117


Selektoren: BEM naming convention

118


• .page-header: Einfacher Bindestrich bei zusammengesetzten Namen

118



• .page-nav, .page-nav__link: Unterelemente eines "Moduls" haben den Modulnamen als Prefix.

118



• .page-nav, .page-nav__link: Unterelemente eines "Moduls" haben den Modulnamen als Prefix.

• .button, .button--small, .button--cancel: Varianten sind als solche erkennbar.

118

Holder.js: Img placeholders

119


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

119



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

119



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

119

Backlog: Bootstrap

120

Bootstrap UI Editors

• Eine Reihe von Editoren: für unterschiedliche Ansprüche

• Siehe: http://thedesignblitz.com/the-best-bootstrap-ui-editors/

121

http://thedesignblitz.com/the-best-bootstrap-ui-editors/

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

122

http://twitter.github.io/bootstrap/

http://foundation.zurb.com/

http://purecss.io/

http://www.99lime.com/elements/

Backlog: Argumentationshilfe

123

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

124

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)

125

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

126

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

127

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

128

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

129

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

130

developinguxd.com

131


Developing UXD - Workshop bei XING

Design

Transcript of Developing UXD - Workshop bei XING