Link mit weiteren Informationen

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

„Grundkurs gutes Webdesign“, mein Einsteigerwerk rund um nutzerfreundliche Gestaltung von Websites, ist Ende August 2017 in der zweiten Auflage erschienen – randvoll mit Hintergrundwissen zu Design, User Experience, Accessibility und vielem mehr.

Cover von Grundkurs gutes Webdesign
Grundkurs gutes Webdesign

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

Errata

Trotz großer Sorgfalt lassen sich Fehler nicht ganz vermeiden. Hier finden Sie eine Auflistung der Errata in der zweiten Auflage:

  • 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 (danke an Florian für den Hinweis).
  • 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 (danke an Florian für den Hinweis).
  • 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.