Einführung in modernes, nutzerfreundliches Webdesign Grundkurs gutes Webdesign (2. Auflage)

Die digitale Welt ändert sich in einem enorm hohen Tempo – Webdesign bildet da keine Ausnahme. Das gesamte Buch wurde daher durchgegangen und aktualisiert – sowohl in technischer als auch gestalterischer Hinsicht. Manche Kapitel sind neu, andere stark verändert.

• 1. Die richtige Ausrüstung: Einführung ins Webdesign, die Arbeit als Webdesigner und die wichtigsten Technologien
• 2. Grundlagen von gutem Webdesign: Einführungen in die Themen Usability, User Experience, Accessibility (Barrierefreiheit, Zugänglichkeit) sowie Responsive Webdesign, außerdem Abschnitte zu neuen Workflows und Websites als lebendige Design-Systeme (Stichwort „Atomic Design“ von Brad Frost)
• 3. Konzeption & Design: Grundlagen strategischer Website-Konzeption, Content-Strategie, Vorstellung zahlreicher Design-Methoden, Prototyping
• 4. Layout & Komposition: Gestaltgesetze, Formen, Gestaltungsregeln aus Design und Rezeptionsforschung, Grundlagen der Gestaltung in CSS, Raster (inklusive den jungen CSS-Technologien Flexbox und Grid Layout), Layouts im Responsive Webdesign
• 5. Typografie im Web: Anatomie einer Schrift, Kategorien von Schriften, websichere Schriften, Webfonts, Auswahl der richtigen Schrift, Texte in HTML und CSS, wichtige Schriftfamilien, Detailtypografie
• 6. Navigationen & Interaktionen: Usability und Accessibility bei interaktiven Elementen, Gestaltung von Links, Buttons und Navigationen (auch im Responsive Webdesign), Formulare, Animationen
• 7. Farbe im Web: Farblehre, Kontraste, Assoziationen und Bedeutungen von Farben und Farbkombinationen, Erstellen eines Farbschemas, Farben und Verläufe in CSS, Usability und Accessibility bei der Farbwahl
• 8. Grafiken, Bilder & Multimdedia: gestalterische Tipps zur Wahl von Bildern und Illustrationen, Bildquellen, Bildformate und -optimierungen fürs Web, Bilder in HTML und CSS (natürlich inklusive Responsive Images), Icons, Video & Audio
• 9. Testen & Optimieren: Testen von Funktionalitäten und Design, Accessibility, Usability, außerdem ein großer Abschnitt zur Performance-Optimierung
• 10. Beispielprojekt: Begleiten Sie mich bei der ersten Iteration eines neuen Webdesigns – ja, es ist diese Seite :)

Außerdem enthält das Buch Zugang zu Bonus-Inhalten im PDF-Format, allen Stufen aus dem Beispielprojekt und Empfehlungen zu vielen weiteren Informationsquellen.

Leseprobe und Eindrücke

Bei Rheinwerk gibt es Kapitel 9 über Performance als PDF-Leseprobe. Hier sind außerdem einige Eindrücke aus dem Inneren des Buchs:

Rezensionen

Gemeistert wurde zudem die größte Hürde solcher Basiswerke: weder zu oberflächlich zu sein (in jedem Kapitel werden auch Fortgeschrittene Neues finden) noch zu vertiefend in Details abzuschweifen. […] Ein durchdacht strukturiertes Handbuch, das als Nachschlagewerk bei jedem greifbar sein sollte, der sich gestalterisch oder umsetzend mit Webentwicklung befasst.
Stefan Schmidt, digital RheinRuhr

---

Ein toll gestaltetes und umfassendes Werk für alle Anwender, die anspruchsvolle Webseiten entwerfen, gestalten und betreiben möchten.
maclife.de, April 2018

---

Das Buch macht Lust auf gut gestaltete, funktionelle Websites und eignet sich aufgrund seiner inhaltlichen Komplexität, sprachlich gut verständlichen Erläuterungen und gelungenen Visualisierungen unter anderem hervorragend für den Berufsschulunterricht oder ebenso als Begleitmaterial für die Ausbildung einschlägiger Berufsgruppen wie zum Beispiel der Mediengestalter Digital und Print.
Typophonics.de

Errata

Trotz großer Sorgfalt lassen sich Fehler nicht ganz vermeiden – dafür ein dickes Sorry. Hier finden Sie eine Auflistung der Errata in der zweiten Auflage – vielen Dank an Florian für die Hinweise:

• S. 60: „Unsere Media Query @media (min-width: 64em) bedeutet also übersetzt: »Ich hätte da mal eine Frage: Bist du mindestens 64 em Pixel breit?«“ – „Pixel“ ist hier zu viel, denn die Media Query fragt em-Werte ab.
• S. 61: „Antwortet der Browser auf unsere Media Query zweimal mit »Ja«…“ – es muss hier natürlich „einmal mit »Ja«“ heißen, weil das Beispiel nur eine Eigenschaft abfragt.
• S. 185: In der Marginalie wird auf das „CSS Grid Layout“ in Abschnitt 4.6.5 verwiesen – richtig wäre 4.7.5.
• S. 198: Das Code-Beispiel in der Marginalie im Kasten „Mischen möglich“ spricht von grid-template-layout, richtig wären jedoch grid-template-columns.
• S. 211: In Abbildung 5.8 ist der rote Schriftname „Gill“ (nicht das Schriftbeispiel selbst) nicht in Gill gesetzt.
• S. 226: Ganz unten sowie in der Bildunterzeile von Abbildung 5.33 ist die Rede von der entsprechenden „Meta-Angabe (3)“, richtig ist jedoch das „link-Element (3)“, wie es auch Abbildung 5.33 zeigt.
• S. 310: Das Skript von Viljami Salminen heißt „TinyNav“, nicht „TinyScript“.
• S. 316: „Zeichnen Sie Labels außerdem mit dem for-Attribut aus, so dass sie auch für Screenreader erkennbar sind, wie Sie es in Abschnitt 0 gelernt haben.“ Hier müsste es natürlich „Abschnitt 6.1“ heißen.
• S. 327: „Besonders bei ausgefallenen Animationen ist es möglich…“ – hier sollte es besser „wichtig“ heißen.
• S. 405: Der erste Punkt der Liste müsste heißen: „Im obigen Beispiel befindet sich das HTML-Dokument in einem übergeordneten Bereich vom Ordner namens Bilder.“
• S. 418: In die beiden Flussdiagramme wurde unter „Nein“ ein „w“ statt einem „x“ gesetzt. Die richtige Version ist unten gezeigt.

• S. 436: In der Marginalie wird im Kasten „Video als Overlay“ auf ein Beispiel von Wacom Bezug genommen, das nicht gezeigt wird. Es ist unten zu sehen:

• S. 496: Das Menü wird im Beispielprojekt natürlich rechts vom Logo angeordnet, nicht wie behauptet links.