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

  • 3,615 views
Uploaded on

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.

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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,615
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
60
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. <Developing UXD> So leicht ist Frontendentwicklung für Konzepter und Designer heute IA Konferenz 2014
  • 2. Conni und Jerry: Wer wir sind 2
  • 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.“
  • 5. Ziele des Workshops 5
  • 6. Ziele des Workshops 6
  • 7. Ziele des Workshops • Quellcode lesen und verstehen 6
  • 8. Ziele des Workshops • Quellcode lesen und verstehen • Die erste Hürde des Selbst-Codens nehmen 6
  • 9. Ziele des Workshops • Quellcode lesen und verstehen • Die erste Hürde des Selbst-Codens nehmen • Wissen, wie man weiter lernen kann 6
  • 10. Nach dem Workshop könnt ihr noch nicht: 7
  • 11. Axure wegschmeißen
 und direkt alle Wireframes
 per Code erzeugen. 8
  • 12. Einführung: Warum wir dazu lernen müssen 9
  • 13. Warum sollten wir HTML und CSS lernen? 10
  • 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
  • 18. Es kann unsere Arbeitsweise verbessern! 12
  • 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
  • 28. Ende der Einführung. Fragen? 14
  • 29. Agenda ✓ Einführung • HTML-Grundlagen • CSS-Grundlagen • Bootstrap • Ausblick 15
  • 30. HTML-Grundlagen 16
  • 31. HTML: Aufbau und Inhalte einer Website 17
  • 32. Interaktiv: Layout-Elemente kennenlernen 18
  • 33. HTML: Layout-Elemente 19
  • 34. HTML: Layout-Elemente • header, footer, aside, nav, main, article, section:
 "Sectioning elements" gruppieren inhaltlich 19
  • 35. HTML: Layout-Elemente • header, footer, aside, nav, main, article, section:
 "Sectioning elements" gruppieren inhaltlich • main: Einzigartig! Hauptinhalte kommen hier rein. 19
  • 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
  • 39. Interaktiv: Inhaltselemente kennenlernen 20
  • 40. HTML: Inhaltselemente – Textinhalte • h1, h2: Heading. Pro section ein neues h1. • p: Absatz ("paragraph") • a: Link ("anchor"). Darf weitere Inhalte enthalten. 21
  • 41. HTML: Inhaltselemente – Weitere Inhalte 22
  • 42. HTML: Inhaltselemente – Weitere Inhalte • img: "image" – Bildelement 22
  • 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
  • 46. Fragen soweit? 23
  • 47. HTML: Syntax 24
  • 48. Tags <p>Das ist mein Absatz</p> 25
  • 49. Tags <p>Das ist mein Absatz</p> Opening <tag> Closing </tag> 25
  • 50. Tags <p>Das ist mein Absatz</p> Opening <tag> Closing </tag> 25 • Layout-Elemente haben "opening" und "closing tags"
  • 51. Tags <p>Das ist mein Absatz</p> Opening <tag> Closing </tag> 25 • Layout-Elemente haben "opening" und "closing tags" • Ermöglicht Verschachtelung
  • 52. Tags <p>Das ist mein Absatz</p> Opening <tag> Closing </tag> 25 • Layout-Elemente haben "opening" und "closing tags" • Ermöglicht Verschachtelung • Elemente ohne "closing tags" heißen "Void Tags"
  • 53. Tags: Verschachtelung 26 <article>
 <h1>Welcome</h1>
 <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p>
 </article>
  • 54. Tags: Verschachtelung 26 <article>
 <h1>Welcome</h1>
 <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p>
 </article> Opening <article> Closing <article>
  • 55. Tags: Verschachtelung 26 <article>
 <h1>Welcome</h1>
 <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p>
 </article> Opening <article> Closing <article> Nested <h1>
  • 56. Tags: Verschachtelung 26 <article>
 <h1>Welcome</h1>
 <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p>
 </article> Opening <article> Closing <article> Nested <h1> Nested <p>
  • 57. Tags: Verschachtelung 26 <article>
 <h1>Welcome</h1>
 <p>Das ist mein Absatz, der <em>auch</em> verschachtelte Elemente enthält.</p>
 </article> Opening <article> Closing <article> Nested <h1> Nested <p> Nested <em>
  • 58. 27 Attribute <img src="img/logo.png">
  • 59. 27 Attribute <img src="img/logo.png"> attribute
 = Eigenschaft
  • 60. 27 Attribute <img src="img/logo.png"> attribute
 = Eigenschaft "value"
 = Wert der Eigenschaft
  • 61. 27 Attribute <img src="img/logo.png"> attribute
 = Eigenschaft "value"
 = Wert der Eigenschaft • Elemente haben unterschiedliche attributes
  • 62. 27 Attribute <img src="img/logo.png"> attribute
 = Eigenschaft "value"
 = Wert der Eigenschaft • Elemente haben unterschiedliche attributes • Es gibt attributes ohne value
 z.B. <input type="email" required>
  • 63. 28 Attribute: Wichtige
  • 64. 28 Attribute: Wichtige <input id="i-am-unique">
  • 65. 28 Attribute: Wichtige <input id="i-am-unique"> Kennzeichnet ein zwingend einzigartiges Element, z.B. input im Formular; #jumpmark im gleichen Dokument
  • 66. 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>
  • 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.
  • 68. Attribute: Beispiele 29
  • 69. Attribute: Beispiele 29 <img src="img/my-dog.jpg" alt="Caja">
  • 70. Attribute: Beispiele 29 <img src="img/my-dog.jpg" alt="Caja"> <a href="contact.html">Contact</a>
  • 71. Attribute: Beispiele 29 <img src="img/my-dog.jpg" alt="Caja"> <a href="contact.html">Contact</a> <a href="http://google.com" target="_blank">Leave</a>
  • 72. Attribute: Beispiele 29 <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>
  • 73. Attribute: Beispiele 29 <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"
  • 74. Attribute: Beispiele 29 <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="me@me.io" required>
  • 75. Attribute: Beispiele 29 <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="me@me.io" required> <script src="js/scripts.js"></script>
  • 76. Attribute: Beispiele 29 <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="me@me.io" required> <script src="js/scripts.js"></script> • Die Attribute von allen Elementen findet ihr 
 unter MDN (Mozilla Developer Network)
  • 77. Interaktiv: HTML-Elemente untersuchen 30
  • 78. 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 31
  • 79. HTML: Dokument erstellen 32
  • 80. 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
  • 81. Interaktiv: Dokument erstellen 34 U SB 01_html_start
  • 82. Dokument erstellen 35
  • 83. Dokument erstellen • Mit Emmet: html:5Tab 35
  • 84. Dokument erstellen • Mit Emmet: html:5Tab • HTML5 Doctype: <!doctype html> 35
  • 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
  • 87. Interaktiv: HTML schreiben 36
  • 88. Weitere Ressourcen 37
  • 89. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs 37
  • 90. Weitere Ressourcen • codecademy.com – kostenloser Onlinekurs • developer.mozilla.org – alles zu HTML und CSS 37
  • 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
  • 95. Das ist HTML. Fragen? 38
  • 96. Agenda ✓ Einführung ✓ HTML-Grundlagen • CSS-Grundlagen • Bootstrap • Ausblick 39
  • 97. CSS-Grundlagen 40
  • 98. CSS: Elemente finden und verändern 41
  • 99. Selektoren: class 42 <img src="img/logo.png" alt="IA Konferenz">
  • 100. Selektoren: class 42 <img src="img/logo.png" alt="IA Konferenz"> Nicht jedes <img> soll gleich gestylt werden
  • 101. 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">
  • 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
  • 103. Selektoren: class 43 <img class="logo" src="img/logo.png" alt="IA Konferenz">
  • 104. .logo {
 width: 200px;
 height: 100px;
 } Selektoren: class 43 <img class="logo" src="img/logo.png" alt="IA Konferenz">
  • 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!
  • 107. .logo {
 width: 200px;
 height: 100px;
 } Selektoren: class 44
  • 108. .logo {
 width: 200px;
 height: 100px;
 } Selektoren: class 44 Eine "declaration" besteht aus property und value.
  • 109. .logo {
 width: 200px;
 height: 100px;
 } Selektoren: class 44 : Eine "declaration" besteht aus property und value.
  • 110. .logo {
 width: 200px;
 height: 100px;
 } Selektoren: class 44 : Eine "declaration" besteht aus property und value. ;
  • 111. .logo {
 width: 200px;
 height: 100px;
 } Selektoren: class 44 : Eine "declaration" besteht aus property und value. ; selector und { declaration block } bilden ein "Rule Set"
  • 112. Interaktiv: CSS untersuchen 45
  • 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
  • 115. CSS: Wichtige Konzepte 48
  • 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
  • 118. Demonstration: Block- und Inline-Elemente 50
  • 119. CSS: Box Model 51
  • 120. CSS: Box Model 51 Element Element
  • 121. CSS: Box Model 51 Padding Element Element
  • 122. CSS: Box Model 51 Border Padding Element Element
  • 123. CSS: Box Model Margin 51 Border Padding Element Element
  • 124. Demonstration: Box Model 52
  • 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
  • 126. Border, Margin und Padding: Werte 54 margin: 5px 10px 20px 3px;
  • 127. Border, Margin und Padding: Werte 54 margin: 5px 10px 20px 3px; Oben
  • 128. Border, Margin und Padding: Werte 54 margin: 5px 10px 20px 3px; Oben Rechts
  • 129. Border, Margin und Padding: Werte 54 margin: 5px 10px 20px 3px; Oben Unten Rechts
  • 130. Border, Margin und Padding: Werte 54 margin: 5px 10px 20px 3px; Oben Unten Rechts Links
  • 131. Border, Margin und Padding: Werte 54 margin: 5px 10px 20px 3px; Oben Unten Rechts Links margin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 3px;
  • 132. Border, Margin und Padding: Werte 55
  • 133. Border, Margin und Padding: Werte 55 margin: 5px 10px 20px 3px; Oben UntenRechts Links
  • 134. Border, Margin und Padding: Werte 55 margin: 5px 10px 20px 10px; margin: 5px 10px 20px 3px; Oben UntenRechts Links
  • 135. Border, Margin und Padding: Werte 55 margin: 5px 10px 20px 10px; margin: 5px 10px 5px 10px; margin: 5px 10px 20px 3px; Oben UntenRechts Links
  • 136. Border, Margin und Padding: Werte 55 margin: 5px 10px 20px 10px; margin: 5px 10px 5px 10px; margin: 5px 5px 5px 5px; margin: 5px 10px 20px 3px; Oben UntenRechts Links
  • 137. Interaktiv: CSS schreiben 56 U SB 03_css_start
  • 138. Weitere Ressourcen 57
  • 139. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps 57
  • 140. Weitere Ressourcen • css-tricks.com – CSS Tutorials und Tipps • developer.mozilla.org – alles zu HTML und CSS 57
  • 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
  • 145. Das ist CSS. Fragen? 58
  • 146. Agenda ✓ Einführung ✓ HTML-Grundlagen ✓ CSS-Grundlagen • Bootstrap • Ausblick 59
  • 147. Bootstrap 60
  • 148. Bootstrap: Was ist das? 61
  • 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?
  • 153. Wie funktioniert Bootstrap? 63
  • 154. Wie funktioniert Bootstrap? • Verknüpfung: von Bootstrap-CSS sowie -JS mit dem eigenen HTML 63
  • 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
  • 157. Demonstration: Das ist Bootstrap. 64
  • 158. 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
  • 159. Bootstrap: das Grid 66
  • 160. Bootstrap: Grid 67
  • 161. Bootstrap: Grid • Grid-System für Adaptive und Responsive Web Design 67
  • 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>
  • 166. Bootstrap: Grid 2. Klasse „Row“
 um Elemente nebeneinander anzuordnen 69
  • 167. Bootstrap: Grid 2. Klasse „Row“
 um Elemente nebeneinander anzuordnen 69 <div class="container-fluid">
 <div class="row"> </div> </div>
  • 168. Bootstrap: Grid 3. Klasse „Column“
 für die Definition der Spaltenbreite, basierend auf einem 12-spaltigen Grid-System 70
  • 169. Bootstrap: Grid 3. Klasse „Column“
 für die Definition der Spaltenbreite, basierend auf einem 12-spaltigen Grid-System 70 <div class="container-fluid">
 <div class="row"> <div class="col-md-6">Halbe Reihe</div> <div class="col-md-6">Halbe Reihe</div> </div> </div>
  • 170. <div class="container-fluid">
 <div class="row"> <div class="col-md-6">Halbe Reihe</div> <div class="col-md-6">Halbe Reihe</div> </div> </div> Bootstrap: Grid 71 1. Container 2. Row 3. Columns
  • 171. <div class="container-fluid">
 <div class="row"> <div class="col-md-6">Halbe Reihe</div> <div class="col-md-6">Halbe Reihe</div> </div> </div> Bootstrap: Grid 71 1. Container 2. Row 3. Columns Halbe Reihe Halbe Reihe
  • 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.
  • 174. Bootstrap Grid: Columns mit Versatz 73 4 Spalten 4 Spalten
  • 175. Bootstrap Grid: Columns mit Versatz 73 4 Spalten 4 Spalten <div class="container-fluid">
 <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>
  • 176. Bootstrap Grid: Columns mit Versatz 73 4 Spalten 4 Spalten <div class="container-fluid">
 <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
  • 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!
  • 178. Interaktiv: Bootstrap kennenlernen 75
  • 179. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download unter http://getbootstrap.com/
 76
  • 180. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download unter http://getbootstrap.com/
 76
  • 181. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download unter http://getbootstrap.com/
 76 U SB downloads / bootstrap-3.1.1-dist Dieses, bitte!
  • 182. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download unter http://getbootstrap.com/
 77
  • 183. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen
  • 184. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen getbootstrap.com css/bootstrap.css fonts js/bootstrap.js
  • 185. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen getbootstrap.com css/bootstrap.css fonts js/bootstrap.js Lokaler Ordner css/ Neuer Ordner: fonts Neuer Ordner: js
  • 186. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen getbootstrap.com css/bootstrap.css fonts js/bootstrap.js Lokaler Ordner css/ Neuer Ordner: fonts Neuer Ordner: js jquery.com jquery.js
  • 187. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen 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
  • 188. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • 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
  • 189. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen 79
  • 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
  • 194. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen • Schritt 5: Grid anlegen 83
  • 195. Bootstrap: Loslegen in 6 Schritten • Schritt 1: Download • Schritt 2: Dateistruktur anlegen • Schritt 3: Dateien verknüpfen • Schritt 4: Layout-Elemente einfügen • Schritt 5: Grid anlegen 83 mit Hilfe der Bootstrap-Doku
  • 196. Bootstrap: Loslegen in 6 Schritten • 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 84
  • 197. Bootstrap: Loslegen in 6 Schritten • 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 84 mit Hilfe der Code-Snippets aus der Bootstrap-Doku
  • 198. Bootstrap: Loslegen in 6 Schritten • 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 85
  • 199. Bootstrap: Grid anlegen für main 86 U SB 05_bootstrap_ start
  • 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
  • 203. Bootstrap: Inhaltselemente stylen 87
  • 204. Bootstrap: Inhaltselemente stylen 87 • Link „Einreichungsformular“: grüner Button
 Link „Tickets kaufen“: großer, orangener Button
  • 205. Bootstrap: Inhaltselemente stylen 87 • Link „Einreichungsformular“: grüner Button
 Link „Tickets kaufen“: großer, orangener Button • Meta nav: „list-inline“ anordnen und „pull-right“ ausrichten
  • 206. Bootstrap: Inhaltselemente stylen 87 • Link „Einreichungsformular“: grüner Button
 Link „Tickets kaufen“: großer, orangener Button • Meta nav: „list-inline“ anordnen und „pull-right“ ausrichten • Main navigation: gewünschte „nav“ hinzufügen (z. B. „Pills“), ausrichten („justified“), größere Schrift (z. B. „lead“) „IAK 2014“ ist „active“
  • 207. Bootstrap: Inhaltselemente stylen 87 • Link „Einreichungsformular“: grüner Button
 Link „Tickets kaufen“: großer, orangener Button • Meta nav: „list-inline“ anordnen und „pull-right“ ausrichten • Main navigation: gewünschte „nav“ hinzufügen (z. B. „Pills“), ausrichten („justified“), größere Schrift (z. B. „lead“) „IAK 2014“ ist „active“ • Footer-Link: rechtsausgerichtetes Icon
  • 208. Inhaltselemente: weitere Stylings 88
  • 209. Inhaltselemente: weitere Stylings • Liste in Main aside: ohne Bulletpoints („unstyled“) 88
  • 210. Inhaltselemente: weitere Stylings • Liste in Main aside: ohne Bulletpoints („unstyled“) • Jump Marks: kleinere Textgröße 88
  • 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
  • 212. Bootstrap: Was noch zu sagen ist. 89
  • 213. Demonstration: JavaScript mit Bootstrap 90
  • 214. Warum Bootstrap? 91
  • 215. Warum Bootstrap? • Gute Dokumentation 91
  • 216. Warum Bootstrap? • Gute Dokumentation • Große Community 91
  • 217. Warum Bootstrap? • Gute Dokumentation • Große Community • Viele UI-Elemente 91
  • 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
  • 220. Unser erstes Boilerplate: für euch 92 github.com/developinguxd/boilerplates
  • 221. Das ist Bootstrap. Noch Fragen? 93
  • 222. Agenda ✓ Einführung ✓ HTML-Grundlagen ✓ CSS-Grundlagen ✓ Bootstrap • Ausblick 94
  • 223. Ausblick 95
  • 224. 96 Tipps: die tägliche Arbeit
  • 225. • Start: Handscribbles 96 Tipps: die tägliche Arbeit
  • 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
  • 229. Weiterlernen: viele wichtige Themen 97
  • 230. Weiterlernen: viele wichtige Themen 97 HTML CSS Bootstrap DevTools
  • 231. Weiterlernen: viele wichtige Themen 97 JavaScript jQuery Sass holder.jsHTML CSS Bootstrap DevTools
  • 232. Weiterlernen: viele wichtige Themen 97 JavaScript jQuery Sass holder.js GitHub CodeKit Webfonts CodePen HTML CSS Bootstrap DevTools
  • 233. “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
  • 234. One more thing ... 99
  • 235. Developing UXD: Unsere Idee 100
  • 236. Developing UXD: Unsere Idee 101
  • 237. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset 101
  • 238. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards 101
  • 239. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen 101
  • 240. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen • Lebendige Plattform 101
  • 241. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen • Lebendige Plattform • Gemeinsam und Open Source 101
  • 242. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen • Lebendige Plattform • Gemeinsam und Open Source • Eigenentwicklungen 101
  • 243. Developing UXD: Unsere Idee • Fest definiertes, gemeinsames Toolset • Moderne, erprobte Standards • Vorauswahl der besten Lernressourcen • Lebendige Plattform • Gemeinsam und Open Source • Eigenentwicklungen • Unterstützung durch Frontend-Community 101
  • 244. 102
  • 245. developinguxd.com 102
  • 246. developinguxd.com 102 @developinguxd facebook.com/developinguxd mail@developinguxd.com
  • 247. Developing UXD: Nächste Schritte 103
  • 248. Developing UXD: Nächste Schritte • Die besten Lernquellen im Web 103
  • 249. Developing UXD: Nächste Schritte • Die besten Lernquellen im Web • Lernpläne 103
  • 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
  • 252. Vielen Dank! Happy coding! 104
  • 253. Euer Feedback: Wie wars? 105
  • 254. developinguxd.com 106 @developinguxd facebook.com/developinguxd mail@developinguxd.com
  • 255. Cornelia Erbs, Jeremias Dombrowsky Lessers Passage 10 22767 Hamburg ! +49 (0)151 23421980 ! mail@developinguxd.com http://developinguxd.com/ 107
  • 256. Alle Icons in dieser Präsentation kommen von http://iconmonstr.com/ 108
  • 257. Backlog 110
  • 258. Backlog: Sublime, HTML, CSS, JS 111
  • 259. Backlog • Sublime: Shortcuts • Sublime: Emmet Shortcuts • HTML: Formulare • Holder.js: Img placeholders • CSS: BEM naming convention • jQuery und JavaScript: Einbinden und laden 112
  • 260. Sublime Text 3: Emmet Shortcuts 113
  • 261. Sublime Text 3: Emmet Shortcuts • Selector-Syntax: e.g. article>h1+pTab wird zu
 <article>
 <h1></h1>
 <p></p>
 </article> 113
  • 262. 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
  • 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" • Cmd+Shift+k: Tag ändern 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 • Cmd+': Element löschen 113
  • 265. 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
  • 266. Sublime Text 3: Shortcuts 115
  • 267. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) 115
  • 268. Sublime Text 3: Shortcuts • TagnameTab: Autocomplete (Mehrfach für Sprungmarken) • Cmd+p: Fuzzy-Search für Dateien 115
  • 269. 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
  • 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 • Cmd+d: Weitere Instanz des markierten Texts auswählen 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 • Ausführliches Tutorial auf scotch.io 115
  • 272. Selektoren: BEM naming convention 116
  • 273. Selektoren: BEM naming convention • .page-header: Einfacher Bindestrich bei zusammengesetzten Namen 116
  • 274. 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
  • 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. • .button, .button--small, .button--cancel: Varianten sind als solche erkennbar. 116
  • 276. Holder.js: Img placeholders 117
  • 277. Holder.js: Img placeholders • Download: http://imsky.github.io/holder/ 117
  • 278. Holder.js: Img placeholders • Download: http://imsky.github.io/holder/ • JavaScript im <body> laden:
 <script src="js/holder.js"></script> 117
  • 279. 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"> 117
  • 280. Backlog: Bootstrap 118
  • 281. Bootstrap UI Editors • Eine Reihe von Editoren: für unterschiedliche Ansprüche • Siehe: http://thedesignblitz.com/the-best-bootstrap-ui- editors/ 119
  • 282. 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
  • 283. Backlog: Argumentationshilfe 121
  • 284. 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
  • 285. 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
  • 286. 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
  • 287. 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
  • 288. 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
  • 289. 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
  • 290. 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
  • 291. developinguxd.com 129 @developinguxd facebook.com/developinguxd mail@developinguxd.com