Design trifft Code E-Book

Stephanie Stimac

• Herausgeber: dpunkt.verlag
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Deutsch
• Veröffentlichungsjahr: 2024

Seitenzahl: 385

Beschreibung

Lösen Sie häufige Design- und Usability-Probleme mit Bravour Das Buch vermittelt wesentliche Design- und UX-Techniken und zeigt, wie Entwickler*innen diese an jedem Punkt des Projektfortschritts anwenden. Sie lernen die Sprache des Designs kennen, verbessern die Kommunikation im Team und treffen selbst fundierte Entscheidungen. Sie profitieren von der reichhaltigen Erfahrung der Autorin Stephanie Stimac, die in zahlreichen großen Projekten u. a. bei Microsoft Office, Microsoft Edge oder T-Mobile gesammelt hat. Als Webentwickler*in beeinflussen Sie mit jeder Design-Entscheidung die Usability einer Website. »Design trifft Code« vermittelt Ihnen die Grundlagen und die Sprache des Designs, sodass Sie mit Designer*innen zusammenarbeiten und im Gestaltungsprozess selbst fundierte Entscheidungen treffen können.  Sie lernen unter anderem, wie Sie mit Farbe, Typografie und Layout eine Hierarchie auf einer Website schaffen, wie Sie Farbpaletten in einer Benutzeroberfläche konsistent anwenden, wie Sie sich für die richtigen Schriftarten und Schriftschnitte entscheiden, wie Sie mit Methoden der Nutzerforschung mehr über Ihre User herausfinden und Ihre Design-Entscheidungen daran messen und wie Sie Layout und Struktur von Websites zügig planen und testen. Autorin Stephanie Stimac gibt in diesem Buch ihre wertvollen Erkenntnisse und Anregungen weiter, die sie als Designerin im Microsoft Developer Experiences Team gewonnen hat. Sie zeigt, wie sich elegante visuelle Designs erstellen lassen und eine Website von Grund auf entwerfen lässt. Ihr konsequent auf Developer ausgerichteter Ansatz vermittelt die wesentlichen UX- und Designgrundlagen an diejenigen, die sie in Code umsetzen: die Entwicklerinnen und Entwickler. Zahlreiche Beispiele aus erfolgreichen Websites und Interfaces veranschaulichen die Designprinzipien. Mit »Design trifft Code« lernen Sie anschaulich und leicht verständlich, wie Sie häufige Design- und Usability-Probleme mit Bravour lösen. Ein Buch für alle, die intuitiv zu bedienende Interfaces, attraktive Designs und eine perfekte Usability erschaffen möchten.

Leseprobe

Stephanie Stimac ist Produktmanagerin mit mehr als einem Jahrzehnt Erfahrung im Bereich Design und konzentriert sich auf die Entwicklung von Produkten für Entwickler. Sie hat auf Konferenzen auf der ganzen Welt über Webentwicklung und Designthemen gesprochen und in vielen dieser Vorträge die Kluft zwischen Design und Entwicklung überbrückt. Als sie noch ausschließlich an Designprojekten gearbeitet hat, war sie für Unternehmen wie Safeway, MBARI, Microsoft Azure, Microsoft Office, Windows, T-Mobile und Blue Cross Blue Shield tätig. Sie trat dem Microsoft-Edge-Team bei, weil sie eine Leidenschaft für das Web, Design und Entwicklung hat. Sie hat an Entwickler-Tools wie webhint.io und den DevTools des Edge-Browsers sowie an anderen Web-Plattform-Initiativen wie dem »Web We Want« (webwewant.fyi) mitgearbeitet, wobei sie sich auf die Erfahrung der Entwickler konzentriert hat. Sie war sechs Jahre lang im Microsoft-Edge-Team tätig, bevor sie sich dem Produktmanagement für Developer Experience in der Start-up-Branche zuwandte.

Copyright und Urheberrechte:

Die durch die dpunkt.verlag GmbH vertriebenen digitalen Inhalte sind urheberrechtlich geschützt. Der Nutzer verpflichtet sich, die Urheberrechte anzuerkennen und einzuhalten. Es werden keine Urheber-, Nutzungs- und sonstigen Schutzrechte an den Inhalten auf den Nutzer übertragen. Der Nutzer ist nur berechtigt, den abgerufenen Inhalt zu eigenen Zwecken zu nutzen. Er ist nicht berechtigt, den Inhalt im Internet, in Intranets, in Extranets oder sonst wie Dritten zur Verwertung zur Verfügung zu stellen. Eine öffentliche Wiedergabe oder sonstige Weiterveröffentlichung und eine gewerbliche Vervielfältigung der Inhalte wird ausdrücklich ausgeschlossen. Der Nutzer darf Urheberrechtsvermerke, Markenzeichen und andere Rechtsvorbehalte im abgerufenen Inhalt nicht entfernen.

Stephanie Stimac

Design trifft Code

Alles, was Developer über Gestaltung und UX wissen müssen

Stephanie Stimac

Übersetzung und Lektorat: Melanie Andrisek, Dr. Benjamin Ziech

Lektoratsassistenz: Julia Griebel, Friederike Demmig

Copy-Editing: Petra Heubach-Erdmann, Düsseldorf

Satz & Layout: inpunkt[w]o, Wilnsdorf (www.inpunktwo.de)

Herstellung: Stefanie Weidner, Frank Heidt

Umschlaggestaltung: Eva Hepper, Silke Braun

Bibliografische Information der Deutschen Nationalbibliothek

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

ISBN:

Print

978-3-98889-001-6

PDF

978-3-98890-149-1

ePub

978-3-98890-150-7

1. Auflage 2024

Copyright für die deutschsprachige Ausgabe © 2024

dpunkt.verlag GmbH

Wieblinger Weg 17 · 69123 Heidelberg

Authorized translation of the English edition of Design for Developers © [2023] Manning Publications (ISBN 9781617299476). This translation is published and sold by permission of Manning Publications, the owner of all rights to publish and sell the same.

Schreiben Sie uns:

Falls Sie Anregungen, Wünsche und Kommentare haben, lassen Sie es uns wissen: [email protected].

Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen.

Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen.

Alle Angaben und Programme in diesem Buch wurden mit größter Sorgfalt kontrolliert. Weder Autorin noch Verlag können jedoch für Schäden haftbar gemacht werden, die in Zusammenhang mit der Verwendung dieses Buches stehen.

Für Herrn Birrer, Herrn Carroll und Herrn Steigleder (Stiggy), deren Anleitung mich ermutigt hat, zu schreiben und weiterzuschreiben.

Und für meinen Hund Vogue, der sowohl geduldig als auch ungeduldig neben mir saß, während ich geschrieben habe.

Inhaltsübersicht

Teil 1

Grundlagen der Gestaltung

1Die Kluft zwischen Design und Entwicklung überbrücken

2Grundlagen des Designs

Teil 2

User Experience

3Grundlagen der User Experience

4Nutzerforschung

5User-Experience-Design

Teil 3

Visuelle Gestaltungselemente

6Web-Layout und Gestaltung

7Web-Layouts mit Animationen aufwerten

8Auswahl von und Arbeit mit Typografie im Web

9Farbtheorie

10Aufbau einer Website

Teil 4

Nach der visuellen Gestaltung

11Testen, Validieren, Iterieren

12Entwicklungsentscheidungen und User Experience

Inhaltsverzeichnis

Einleitung

Vorwort

Danksagung

Über dieses Buch

Teil 1

Grundlagen der Gestaltung

1Die Kluft zwischen Design und Entwicklung überbrücken

1.1Wie Entwickler von Design- und User-Experience-Grundlagen profitieren

1.1.1Zusammenarbeit und Kommunikation verbessern

1.1.2Die Gründe für Designentscheidungen verstehen

1.1.3Besserer Code durch das Verständnis der Grundlagen des visuellen Designs

1.1.4Besserer Code (und Design) durch geringere Abhängigkeit von Frameworks von Drittanbietern

1.1.5User Experience und Entwicklung

1.2Der Weg zu einem besseren Verständnis von Design und User Experience

1.2.1Der Gestaltungsprozess, den dieses Buch behandelt

1.2.2Designexperten vs. smartes Design

1.2.3Das Ganze zusammenfügen

Zusammenfassung

2Grundlagen des Designs

2.1Die Grundsätze der Gestaltung

2.1.1Nähe

2.1.2Ausrichtung

2.1.3Wiederholung

2.1.4Kontrast

2.1.5Ausgewogenheit

2.2Designgrundlagen für die User Experience und darüber hinaus

Zusammenfassung

Teil 2

User Experience

3Grundlagen der User Experience

3.1Benutzererfahrung geht über die visuelle Gestaltung hinaus

3.2Was ist User Experience?

3.3Die User-Experience-Rollen

3.3.1Nutzerforschung

3.3.2Gestaltung der User Experience

3.3.3User-Experience-Texter

3.4Methoden der User Experience

3.4.1Nutzerzentrierter Entwurf

3.4.2Double-Diamond-Prozess

3.5User-Experience-Praktiken vertiefen

Zusammenfassung

4Nutzerforschung

4.1Einführung in die Nutzerforschung

4.1.1Nutzerforschung scheint kostspielig zu sein, aber Misserfolg ist teurer

4.1.2Erste Datenerhebung

4.1.3User-Personas

4.1.4Nutzerbedürfnisse

4.1.5Ziele der Website festlegen: Abgleich von Nutzer- und Unternehmenszielen

4.1.6S.M.A.R.T.-Ziele erstellen

4.2Strategien der Nutzerforschung

4.2.1Qualitativ vs. quantitativ

4.2.2Benutzereinstellung vs. Benutzerverhalten

4.2.3Methoden der Nutzerforschung

4.2.4Forschung in einer kontinuierlichen Phase

Zusammenfassung

5User-Experience-Design

5.1Informationsarchitektur

5.1.1Sitemap

5.1.2Bestandsaufnahme und Prüfung der Inhalte

5.2User Flows und User Journeys

5.2.1User Flow

5.2.2User Journey

5.3Gestaltung Ihrer Website und Anwendung

5.3.1Wireframing

5.3.2Gestaltung der Benutzeroberfläche und farbige Mock-ups

5.3.3Prototyping

Zusammenfassung

Teil 3

Visuelle Gestaltungselemente

6Web-Layout und Gestaltung

6.1Aufbau der Struktur Ihrer Website

6.2Ein Raster verwenden

6.2.1Das Raster festlegen

6.2.2Die Abmessungen des Rasters

6.3Auswahl eines Layouts

6.3.1Einspaltige Muster verwenden

6.3.2Gängige mehrspaltige Muster

6.3.3Lesemuster

6.4Raum nutzen

6.5Überlegungen zum responsiven Design

6.5.1Für Mobilgeräte gestalten

6.5.2Design für Multiscreen- und faltbare Geräte

Zusammenfassung

7Web-Layouts mit Animationen aufwerten

7.1Warum eine Animation?

7.1.1Verbesserung der Benutzerfreundlichkeit

7.1.2Unvergessliche Interaktionen schaffen

7.1.3Animationen als Dekoration verwenden, um eine emotionale Reaktion hervorzurufen

7.2Wann sollte eine Animation verwendet werden?

7.2.1Hinweise für die Navigation auf der Webseite geben

7.2.2Rückmeldung an die Benutzer bei der Interaktion mit UI-Elementen geben

7.2.3Navigation und Seitenübergänge

7.2.4Den Status von etwas in Arbeit anzeigen

7.2.5Langfristig denken

7.3Wie man Animationen plant

7.3.1Wie man ein Storyboard erstellt

7.4Technische Aspekte der Animation

7.4.1Überlegungen zur Performance

7.4.2Überlegungen zur Barrierefreiheit

Zusammenfassung

8Auswahl von und Arbeit mit Typografie im Web

8.1Die Grundlagen von Schrift

8.1.1Zwischen einer Schrift und einem Schriftschnitt unterscheiden

8.1.2Unterschiedliche Schriftklassifizierungen

8.1.3Schriftarten und -schnitte

8.2Auswahl einer Schrift für das Web

8.2.1Was macht eine gute Webschrift aus?

8.2.2Wie man Schriftarten und Schriften miteinander verbindet

8.2.3Eine Schriftrampe aufbauen

8.2.4Ihren Schriftarten Größen zuweisen

8.2.5Einen vertikalen Rhythmus festlegen

8.2.6Für Lesbarkeit sorgen

Zusammenfassung

9Farbtheorie

9.1Terminologie der Farben

9.1.1Farbtöne

9.1.2Warme vs. kühle Farben

9.1.3Farbton, Sättigung und Helligkeit

9.2Der Farbkreis

9.2.1Farbbeziehungen

9.2.2Beispiele für Farben studieren und dann weitere Beispiele ansehen

9.3Farbpsychologie

9.4Auswählen und Anwenden eines Farbschemas

9.5Tutorial: Wählen Sie ein Farbschema und wenden Sie es an

9.6Überlegungen zur Barrierefreiheit

9.6.1Farbkontrast prüfen

9.6.2Verlassen Sie sich nicht nur auf die Farbe, um einen Zustand oder Status anzuzeigen

9.7Farbmodi im Web

9.7.1RGB und RGBA

9.7.2Hexadezimal

9.7.3HSL und HSLA

9.7.4CIE Lab und LCH

9.7.5Welchen Farbmodus soll ich verwenden?

9.8Farbabweichungen auf Bildschirmen

Zusammenfassung

10Aufbau einer Website

10.1Die Anforderungen an die Projekt-Website

10.2Die Platzierung von Inhalten mit einem Wireframe festlegen

10.3Rastersystem und Abstände festlegen

10.4Typografie auswählen

10.5Vertikalen Rhythmus festlegen

10.6Bildmaterial auswählen

10.6.1Bilder verwenden, um den Ton anzugeben

10.6.2Text auf Bildern

10.7Farbpalette auswählen und anwenden

10.8Letzte Handgriffe

10.9Responsives Design

10.9.1Tablet-Design, das achtspaltige Raster

10.9.2Mobiles Design, das vierspaltige Raster

10.9.3Mobile-first Design

Zusammenfassung

Teil 4

Nach der visuellen Gestaltung

11Testen, Validieren, Iterieren

11.1Der Zyklus des Designs

11.1.1Ein bestehendes Design ersetzen

11.1.2Minimum Viable Product

11.1.3Wann ist ein Entwurf gut genug, um mit dem Testen zu beginnen?

11.2Testarten

11.2.1Kundeninterviews

11.2.2Testen in einer Produktionsumgebung

11.2.3A/B-Tests

11.2.4Gestaffelte Rollouts

11.2.5Anfängliche Methoden der Nutzerforschung

11.3Prüfergebnisse anwenden

Zusammenfassung

12Entwicklungsentscheidungen und User Experience

12.1Die Wirkung des geschriebenen Codes

12.1.1Warum es wichtig ist, gutes HTML zu schreiben

12.1.2Performance und Ladezeiten

12.1.3Webtechnologien ohne Cross-Browser-Unterstützung

12.2Entwickler bauen für Entwickler

Zusammenfassung

Weitere Ressourcen

Index

Einleitung

Ich arbeite schon lange mit dem Internet. Wenn ich schreibe lange, dann meine ich lange – mein erster Browser lief über die Kommandozeile. So wie meine erste Backend-Entwicklung ein CGI-Skript war. In den fast drei Jahrzehnten, in denen ich Dutzende von Projekten für das Web entwickelt habe, habe ich eines festgestellt: Am wertvollsten ist die Fähigkeit, die Lücken zwischen den Welten des Designs, der User Experience und der Entwicklung zu schließen.

Jeder dieser Bereiche zieht Fachleute mit unterschiedlichem Bildungs- und/oder Hobbyhintergrund an. Dies kann zu Spannungen führen, da die Leute in jedem Lager dazu neigen, zu denken, dass ihr eigenes Gebiet den größten Einfluss auf den Erfolg eines Webprojekts hat. Die Realität ist, dass das Web im Zusammenspiel dieser Bereiche existiert und sich auf alle Bereiche gleichermaßen stützt. Ich habe die Erfahrung gemacht, dass die wertvollsten Mitarbeitenden in einem Webprojekt diejenigen sind, die genug von jedem Bereich verstehen, um in diesem Spannungsfeld zu agieren und sicherzustellen, dass jedes Team effektiv mit anderen Teams kommuniziert und alle gemeinsam auf ein Ziel hinarbeiten.

Das bringt mich zu Stephanie Stimacs »Design trifft Code«. Dieses Buch ist eine unschätzbare Ressource für Entwickler, die ihr Verständnis dafür verbessern wollen, was es braucht, um heute für das Web zu entwickeln. Es bietet einen Crash-Kurs in Design und User Experience auf eine Art und Weise, die sowohl Ihr Wissen über diese Themen verbessert als Ihnen auch die notwendigen Fähigkeiten vermittelt, um in diesen Bereichen produktiv zu werden. Über diese oberflächliche Perspektive hinaus bietet dieses Buch jedoch die Grundlage, Ihre Karriere voranzutreiben und zu einer Person zu werden, die im Spannungsfeld zwischen Design, User Experience und Entwicklung wächst. Stephanie Stimac ist die perfekte Person, um Ihnen diese Erkenntnisse zu vermitteln. Sie ist nicht nur eine exzellente Kommunikatorin, sondern verfügt auch über jahrelange Berufserfahrung als Designerin, Entwicklerin, User-Experience-Expertin und Dozentin. Sie hat sogar hinter den Kulissen an Webbrowsern und den darin implementierten Webstandards gearbeitet. Das vermittelt ihr ein unglaublich tiefes Verständnis für das Web und die Tools, auf die wir uns bei dessen Aufbau verlassen. Ganz gleich, ob Sie ein langjähriger Entwickler sind, der einen neuen Zweig in Ihrem Baum der Fähigkeiten wachsen lassen möchte, oder ob Sie neu anfangen und sich eine solide Grundlage für die Entwicklung von Webanwendungen aneignen möchten, »Design trifft Code« wird Ihnen mit Sicherheit eine Fülle von Wissen vermitteln, das Ihnen auf Ihrem Weg hilft.

Aaron Gustafson

Autor von »Adaptive Web Design:Crafting Rich Experiences with Progressive Enhancement«

Vorwort

Ich habe schon lange vor meinem Studium angefangen, für das Internet zu gestalten. Ich habe meine Vorliebe für das Anpassen von Dingen wie Myspace und LiveJournal entdeckt und begonnen herauszufinden, wie man Photoshop benutzt und meine Webseiten mit CSS bearbeitet. Als Teenager war das nur ein Hobby. Erst in meinem letzten Jahr an der Highschool habe ich Grafikdesign als Berufswunsch in Betracht gezogen. Eigentlich wollte ich Modedesignerin werden, aber mein Portfolio war eher für Grafikdesign geeignet.

An der Universität belegte ich im Studiengang Design den Schwerpunkt New Media Design, der Web, Interaktivität, Video und Spezialeffekte umfasste. Ich erinnere mich zwar daran, dass ich die Grundlagen von HTML und CSS gelernt habe, aber das Tool, mit dem ich viel Zeit verbracht habe, war Adobe Flash und die Sprache ActionScript 3.0. Perfektes Timing: Als ich 2010 meinen Abschluss gemacht hatte, war Flash als Medium für das Web kurz vor dem Aussterben. Meine ersten beiden Design-Jobs waren kurz. Dann wechselte ich in eine Rolle, die der Auslöser für meinen Einstieg in die Frontend-Entwicklung war. Ich beschäftigte mich mit User-Experience-Forschung, User-Experience-Design, visuellem Design und Frontend-Entwicklung und arbeitete mit einem Entwickler für komplexere Back-end-Funktionen und JavaScript zusammen. In meiner Rolle als Frontend-Entwicklerin und in der Zusammenarbeit mit Vollzeit-Entwicklern stieß ich auf das Problem, dass Designer großartige Ideen hatten, die aber zu dem Zeitpunkt nicht umzusetzen waren, und sie deshalb das Design änderten.

Ich war vier Jahre lang in dieser Funktion tätig, bevor ich zum Microsoft-Edge-Team wechselte. Dort machte ich denselben Job, jedoch mit einer anderen Art von Freiheit. Ich hatte mehr Raum zum Lernen und mehr Zeit, die ich mit den Entwicklern verbringen konnte, um ihre Erfahrungen und die Probleme zu verstehen, die sie hatten. Ich habe gelernt, wie man Git verwendet, und Änderungen einpflegt (und habe oft Hilfe gebraucht, um Dinge mit Node und npm zurückzusetzen. Danke, Anton, dass du das für mich wieder in Ordnung gebracht hast). Ich habe Tools für Entwickler entworfen, Developer Experiences gebaut und begonnen, mich mit Standards und Funktionen von Webplattformen zu beschäftigen. Das führte zu meiner Tätigkeit als Produktmanagerin für Developer Relations.

Ich finde mich oft an einer Kreuzung wieder, und zwar an einer sehr belebten – eine Designerin, die eine Designerin wurde, die programmieren kann, die eine Produktmanagerin wurde, die Tools für Entwickler entwarf und entwickelte, die eine Produktmanagerin wurde, die Webplattform- und Browserfunktionen propagierte, während ich weiterhin die Teile entwarf und entwickelte, die ich für diese Arbeit überhaupt brauchte. Letztendlich sehe ich mich aber als Bindeglied zwischen Entwicklern und Designern. Ich verstehe beide und kann mich in beide hineinversetzen.

In meiner Zeit als Produktmanagerin für Developer Relations habe ich festgestellt, dass sich einige Webentwickler wünschten, sie könnten die von ihnen erstellten Webseiten besser gestalten. Häufig habe ich gehört, dass sie zwar eine Webseite erstellen konnten, diese aber nie richtig aussah, und dass die Arbeit mit Farben schwierig war. Ich habe diese Dinge beiseitegeschoben; sie waren zu diesem Zeitpunkt keine lösbaren Probleme. Aber eines Tages hatte ich eine E-Mail von Manning in meinem Posteingang, und plötzlich waren diese Designprobleme von Webentwicklern meine Probleme, die es zu lösen galt.

Danksagung

Ich habe mit dem Schreiben dieses Buches Ende 2020 begonnen, als es so aussah, als ob ich viel Zeit zum Schreiben haben würde. Und das hatte ich auch. Aber das Leben kommt einem oft in die Quere, und zeitweise war es schwierig, in den letzten zwei Jahren so viele Veränderungen im Leben und ein Buch unter einen Hut zu bringen. Ich möchte meinen Freunden danken – ihr wisst, wer ihr seid –, die mich in vielen Zoom-Anrufen, in unserer Slack-Gruppe und persönlich ermutigt haben. Ihr seid meine Seelenfamilie und erhellt mein Leben ständig mit eurer Kreativität.

Danke an meine Familie, die mich bei diesem Projekt unterstützt hat und immer wieder nachgefragt hat, wie es mir geht: Ich liebe euch. Und obwohl sie dies nie lesen kann, danke ich meiner Hündin Vogue, die viele Nächte auf meinem Schoß saß, während ich geschrieben habe, und mich in Schach hielt, wenn ich zu lange am Computer saß.

Als Nächstes möchte ich meiner Lektorin bei Manning, Sarah Miller, danken. Ich danke Ihnen für Ihre Geduld und Ihr Verständnis, als ich beim Schreiben dieses Buches mehrere Hürden überwinden musste. Wir haben im Laufe des Buches mehrere Herausforderungen gemeistert, da es sich nicht um ein typisches Fachbuch handelt. Danke, dass Sie so offen waren, wenn ich anderer Meinung war, und für all Ihre Ratschläge während dieses Prozesses. Ich möchte auch den übrigen Mitarbeitenden von Manning danken: meinem Redakteur für die technische Entwicklung, Kris Athi, meinem Redakteur für die Rezensionen, Aleks Dragosavljevic, meiner Produktionsredakteurin, Deirdre Hiam, meiner Lektorin, Alisa Larson, und meiner Korrektorin, Melody Dolab.

Vielen Dank an alle Rezensenten und diejenigen, die mit ihrem Feedback dazu beigetragen haben, dass das Buch einen besseren roten Faden bekommt: Adrian Rossi, Al Krinker, Alain Couniot, Alex Lucas, Andres Sacco, Arun Kumar, Bang Nteme, Bruno Sonnino, Cass Petrus, Daniel Couper, Daniel Carl, Danilo Zekovic, David Cabrero Souto, David Krief, Frans Oilinki, Harald Kuhn, Harrison Maseko, Håvard Wall, Jereme Allen, Jose San Leandro, Katia Patkin, Marcin Sęk, Martin Tidman, Miguel Isidoro, Nick Rakochy, Oliver Korten, Phillip Sorensen, Ramaa Kandasamy, Rodney Weis, Sezin Çağıl, Simeon Leyzerzon, Søren Dines Jensen, Steve Albers, Steve Prior, Tanuj Shroff, Tanya Wilke, Viorel Moisei und Weyert de Boer.

Und schließlich danke an meine Online-Community und diejenigen, die ich persönlich kenne. Ohne eure Ermutigung hätte ich nie angefangen, auf Konferenzen zu sprechen, und ich hätte sicher nicht einmal daran gedacht, ein Buch zu schreiben. Ich bin gesegnet, dass ich so viele wunderbare Menschen kenne, die ich in meinem Beruf als Freunde betrachte. Ich danke euch für all eure Unterstützung und Ermutigung.

Über dieses Buch

»Design trifft Code« wurde geschrieben, um Designgrundlagen, Grundlagen der User Experience und die Schlüsselelemente des Designs zu vermitteln, die eine Webseite zum Leben erwecken und ihr Charakter verleihen. Es lehrt, wie Designelemente verwendet werden können, um einen Ton und eine Botschaft zu vermitteln, und wie sich dieser Ton und diese Botschaft durch Designelemente verändern lassen. Dieses Buch ist in der Abfolge eines typischen Projektzyklus aufgebaut. Es beginnt mit den grundlegenden Designprinzipien, die benötigt werden, bevor die Phase der User Experience oder des visuellen Designs beginnt. Es geht in die Phase der User Experience über, die sowohl die Forschung als auch das Design umfasst, mit den Grundlagen für die Anwendung visueller Designelemente in den folgenden Kapiteln. Den Abschluss bilden das Testen des Designs, der iterative Zyklus und die Entwicklung, das Kernstück des Designprozesses, das den Entwurf ins Web bringt und nutzbar macht. Das ist das Herzstück der gesamten User Experience einer Website.

Wer sollte dieses Buch lesen?

»Design trifft Code« ist für Webentwickler geschrieben, die Webseiten sowie Webanwendungen erstellen und die Grundlagen darüber lernen möchten, was eine Webseite oder Webanwendung gut aussehen lässt und wie man Designentscheidungen mit Selbstvertrauen trifft. Ganz gleich, ob Sie freiberuflicher Entwickler sind oder in einem Team mit Designern arbeiten, der Inhalt dieses Buches wird Ihnen die Werkzeuge und das Vokabular an die Hand geben, um mit Ihren Kunden oder Ihrem Designteam über Design zu sprechen und darüber, wie es mit Ihrer Arbeit als Entwickler zusammenhängt – ganz gleich, ob Sie Anfängerin oder Fortgeschrittener sind. Dieses Buch konzentriert sich darauf, Entwicklern die Grundlagen des visuellen Designs und der User Experience im Zusammenhang mit dem Web zu vermitteln und zu zeigen, wie sie diese Grundlagen auf ihre aktuelle oder zukünftige Rolle anwenden können. Der Begriff Webentwickler kann in der heutigen Berufswelt viele verschiedene Bedeutungen haben. Entwickler, die am meisten von diesem Buch profitieren werden, sind Entwickler, die Code schreiben, der letztendlich das Frontend einer Website oder das, was der Benutzer sieht, beeinflusst. Diese Entwickler haben Berufsbezeichnungen wie Full-Stack-Entwickler, Frontend-Entwickler oder Web-App-Entwickler.

Wir werden uns nicht stark auf Code konzentrieren. Aber da es in diesem Buch um Design und User Experience für das Web geht, wird es einige Code-Referenzen geben. Die meisten Menschen, die von diesem Buch profitieren werden, haben einen starken Code-Hintergrund in JavaScript oder PHP und haben ein Verständnis von HTML und CSS mit wenig oder gar keinem Wissen über Design oder User-Experience-Grundlagen.

Wie dieses Buch aufgebaut ist: Ein Fahrplan

Teil 1 befasst sich mit den Vorteilen, Designprinzipien zu verstehen, und mit den wichtigsten Designprinzipien selbst. In Kapitel 1 wird erörtert, warum Entwickler Designgrundlagen lernen sollten und welche positiven Auswirkungen dies auf die Kommunikation zwischen Teams haben kann. Kapitel 2 befasst sich eingehend mit den wichtigsten Designprinzipien. Sie sind grundlegend für das Verständnis dessen, was ein Design ausgefeilt und gut organisiert erscheinen lässt.

Teil 2 beginnt den Designzyklus mit den Grundlagen der User Experience. Kapitel 3 ist ein einführender Überblick über die vielen Facetten der User Experience, einschließlich Forschung, Werbetexten und Design. Kapitel 4 befasst sich mit der Forschungsphase und gibt einen Überblick darüber, warum Nutzerforschung (User Research) notwendig ist, welche verschiedenen Arten von Daten gesammelt werden können und wie einige der gängigsten Übungen zur Datenerfassung aussehen. In Kapitel 5 beginnen wir damit, die Grundlage für unser Design zu legen, indem wir Inhalte organisieren und Nutzerströme entwerfen, wobei wir uns auf die Phase des User-Experience-Designs konzentrieren.

Teil 3 stellt weitere Möglichkeiten vor, wie man über das Layout nachdenkt und wie man die Kernelemente des Designs aufbaut, um die Grundlagen aus Kapitel 5 zum Leben zu erwecken. Kapitel 6 behandelt gängige Layouttypen, das Einrichten eines Rasters, Lesemuster und Layout-Überlegungen bei der Gestaltung der responsiven Version Ihrer Website oder App. Kapitel 7 befasst sich mit Animationen und zeigt, wie Sie Ihr Layout und Ihre Benutzeroberfläche mit Animationen aufwerten können und warum diese nicht nur ein nachträglicher Gedanke sein sollten. In Kapitel 8 geht es um die Grundlagen der Typografie und darum, wie Sie mit der Wahl der Schriftart den Ton Ihrer Website ändern können. In Kapitel 9 geht es vor allem um Farben und die Auswahl von Bildmaterial in Abhängigkeit von Ihrer Farbpalette. In Kapitel 10 fassen wir alles zusammen und nutzen das in den Kapiteln 4 bis 9 Gelernte, um eine Homepage mit einem mehrschichtigen Ansatz zu erstellen und zu gestalten, der den Kapiteln dieses Buches folgt.

Teil 4 schließt den Designzyklus ab, in dem es um das Testen von Designs geht und darum, warum die Entwicklung das Rückgrat der Benutzererfahrung im Web ist. In Kapitel 11 geht es um das Testen Ihrer Entwürfe und die Bestätigung, dass Sie die Ziele Ihrer Website erreichen. Kapitel 12 beendet das Buch mit Verbindungen und Überlegungen zu User Experience und Entwicklung.

Teil 1

Grundlagen der Gestaltung

Im ersten Teil des Buches lege ich den Grundstein für den Rest des Buches und stelle Gestaltungsprinzipien vor, die Sie unbedingt verstehen müssen, bevor Sie mit der visuellen Gestaltungsphase eines Projekts beginnen.

In Kapitel 1 erkläre ich den Zweck dieses Buches und warum es für Sie als Entwickler von Vorteil ist, die Designgrundlagen zu verstehen. Kapitel 2 bildet die Grundlage des Buches und die Gestaltungsprinzipien, die wir erforschen werden. Jedes Prinzip, das in diesem Kapitel erläutert wird, ist wichtig, um zu verstehen, wie man Beziehungen zwischen Inhalten herstellt, die in Teil 2 vorgestellt werden. Diese Prinzipien können auf alle visuellen Elemente angewendet werden, was wir in Teil 3 tun werden. Je besser Sie sich mit den Gestaltungsprinzipien vertraut machen, desto radikaler können Sie diese Prinzipien anwenden, um herausragende Designs zu erstellen. Am Ende dieses Teils werden Sie in der Lage sein, die User-Experience-Phase des Designzyklus zu beginnen.

1Die Kluft zwischen Design und Entwicklung überbrücken

Dieses Kapitel behandelt

Die Gesamtheit des in diesem Buch behandelten Webdesign-ProzessesDie sich wandelnde Rolle der WebentwicklerDie Vorteile für Freiberufler und fest angestellte Entwickler, wenn sie Designgrundlagen und User-Experience-Prozesse verstehen

Das Web ist ein Ort des Wandels. Jedes Jahr werden neue Technologien und Frameworks eingeführt. HTML und Cascading Style Sheets (CSS) bilden nach wie vor die Grundlage für das Erstellen von Webseiten und Webanwendungen. Beides wird ständig weiterentwickelt, um den Anforderungen der Entwickler gerecht zu werden, wenn sich Design weiterentwickelt.

Ein Teil der Webentwicklung besteht darin, mit den dafür verwendeten Technologien auf dem Laufenden zu bleiben. Aber wie funktioniert das beim Design? Obwohl sich die Werkzeuge im Laufe der Zeit ändern, sind viele der zugrunde liegenden Konzepte zeitlos. Was Sie sehen, ist eine Verschiebung der Trends im Laufe der Zeit. Meine Kenntnisse über Webentwicklung sind für mich als Spezialistin für Webdesign von unschätzbarem Wert. Auf die Frage, ob Designer programmieren lernen sollten, lautet meine Antwort: Ja. Das Verständnis dafür, was im Web möglich ist, ist von großem Vorteil. Es macht die Kommunikation zwischen Designern und Entwicklern viel einfacher. In der Technik gilt die Kommunikationslücke zwischen Designern und Entwicklern als eine der am schwersten zu überbrückenden. Eine weniger häufig gestellte Frage lautet: »Sollten Entwickler lernen zu entwerfen?« Auch hier lautet meine Antwort: Ja. Zumindest wenn es um das Verständnis von Designgrundlagen geht. Wenn Entwickler über Designkenntnisse verfügen, können sie eine Benutzeroberfläche schnell aktualisieren, während sich ein Designteam mehr auf die Lösung von User-Experience-Abläufen konzentriert als auf kleine Anpassungen an Pixeln. Ein CEO teilte meinem Entwicklungsteam einmal mit, dass sich die Benutzeroberfläche eines unserer Tools nicht so effizient anfühlte wie die einiger unserer Mitbewerber. Er meinte damit, dass es zu viel Leerraum zwischen den Komponenten gab. Die Benutzeroberfläche war nicht so raffiniert, wie sie sein könnte. Einer der Entwickler reduzierte die Abstände zwischen den Komponenten und straffte das Design. Er brauchte keinen Designer, um Mock-ups zu erstellen. Stattdessen konnte er eine Änderung vornehmen, sie einem Designer zeigen, um sicherzustellen, dass die Teams sich bei der Änderung einig waren, und dann die Änderungen an der Benutzeroberfläche umsetzen.

Wenn Entwickler Ihr Produkt mit einem anderen Design vergleichen, den Unterschied – in diesem Fall die Verwendung von Leerraum – erkennen und eine Änderung vornehmen können, können Sie sich als Designer auf die Lösung komplexerer Probleme konzentrieren. Ein guter Entwickler weiß, dass sich kleine visuelle Änderungen positiv auf das Erstellen eines ausgefeilten Designs auswirken.

1.1Wie Entwickler von Design- und User-Experience-Grundlagen profitieren

Designer und Entwickler sprechen in der Regel unterschiedliche Sprachen und haben unterschiedliche Fähigkeiten. Designer konzentrieren sich auf den Benutzer und die Gestaltung des Bildmaterials. Entwickler konzentrieren sich auf die Umsetzung von Bildern in etwas Interaktives für Kunden. Die beiden Bereiche überschneiden sich jedoch, da Entwickler das, was ein Designer entworfen hat, mit Code nachbilden, in der Regel mit CSS. Das Verständnis für das Was und Warum hinter dem, was man zum Leben erwecken möchte, macht einen zu einem besseren Entwickler und gibt das nötige Selbstvertrauen, um Designentscheidungen zu treffen, wenn man keinen Designkollegen hat. Design ist viel mehr als nur Optik und Ästhetik. Diese sind zwar wichtig und das Erste, was Kunden bemerken, wenn sie auf Ihrer Webseite landen. Aber der Rest des Erlebnisses ist genauso wichtig. Wenn die Webseite nur langsam lädt oder die Besucher die von ihnen erwarteten Hauptaufgaben, wie den Kauf eines Artikels, nicht ausführen können, reicht die Ästhetik nicht aus. Sie müssen wissen, wie Sie Entscheidungen über die User Experience treffen können, die wiederum die Entscheidungen über das visuelle Design beeinflussen. Als ich vor über zehn Jahren meine Karriere begann, sah der typische Arbeitsablauf für ein Websiteprojekt folgendermaßen aus:

1.

Der Designer verglich für das Projekt die Websites der Konkurrenten seines Kunden und beurteilte, was gut gemacht war und was nicht.

2.

Der Designer erstellte einige Benutzer-Personas der Personen, auf die das Projekt abzielt, für die Lösung eines bestimmten Bedürfnisses (z.B. Informationen liefern, ein Produkt kaufen, einen Termin buchen, Hotels vergleichen usw.).

3.

Auf der Grundlage der Wettbewerbsforschung, der Benutzer-Personas und der geschäftlichen Anforderungen erstellte der Designer Wireframes, einfache Diagramme der Website, die die Platzierung der Inhalte zeigen, und holte dann die Zustimmung des Kunden zu diesen Wireframes ein.

4.

Der Designer ging schließlich in die visuelle Entwurfsphase des Projekts über, stellte dem Kunden pixelgenaue Mock-ups zur Überprüfung zur Verfügung, überarbeitete die Mock-ups, holte die Genehmigung ein und übergab das Projekt dann an den Entwickler, um die Website zu programmieren.

5.

Der Entwickler nahm die statischen Mock-ups und erstellte die interaktive Website.

6.

Nach einem Qualitätstest, bei dem auf Fehler oder Probleme geprüft wurde, wurde die Website veröffentlicht.

All diese Schritte finden auch heute noch statt. Dieser Arbeitsablauf ist weitgehend Gegenstand dieses Buches: der Projektzyklus vom Beginn der User-Experience-Phase über das User-Experience-Design (Wireframes) bis zur Anwendung visueller Designelemente, um das Design zum Leben zu erwecken. Wir werden diesen Projektzyklus jedoch anpassen, um uns auf moderne Arbeitsabläufe zu konzentrieren, die ein iteratives Design und eine iterative Entwicklung, engere Arbeitsbeziehungen und ständiges Testen und Forschen zur Verbesserung eines Designs fördern.

Der Arbeitsablauf in dem zuvor Aufgeführten ist zwischen dem Designer und dem Entwickler aufgeteilt. Ein User-Experience-Designer kann sich ausschließlich auf die Wettbewerbsforschung und das Wireframing konzentrieren, während er mit einem visuellen oder Interaktionsdesigner zusammenarbeitet, der sich auf Designentscheidungen wie Typografie, Farbe, Abstände und Animationen konzentriert – all die visuellen Aspekte einer Webseite, die ich in diesem Buch untersuchen werde. Nichtsdestotrotz wird die Arbeit zwischen Designern und Entwicklern aufgeteilt, wobei die Entwickler erst bei der Übergabe einbezogen werden.

Diese Arbeitsweise lässt keinen kollaborativen Ansatz zu. Entwickler verfügen über Einblicke und Kenntnisse, die Designer in der Regel nicht haben. Entwickler frühzeitig in den Prozess einzubeziehen, ist für den Projektzyklus von Vorteil. Egal ob es darum geht, unnötige Arbeit zu vermeiden, wenn ein Designmerkmal nicht implementiert werden kann, oder um eine andere Perspektive, die die kreative Richtung beeinflussen kann – es ist ein Gewinn für beide Seiten.

1.1.1Zusammenarbeit und Kommunikation verbessern

Designer erwarten nicht, dass ihre Kollegen aus der Entwicklungsabteilung Designexperten werden, so wie Entwickler nicht erwarten, dass Designer Experten für JavaScript werden. Jeder von uns hat seine Rolle aus einem bestimmten Grund. Aber die Arbeit, die wir tun, ist miteinander verwoben. Der von den Entwicklern geschriebene Code kann sich auf das Design auswirken, und was die Designer entwerfen, kann sich auf die Entscheidungen auswirken, die die Entwickler beim Code treffen müssen. Manchmal gibt es auch eine Grenze für das, was von einem Entwickler gebaut werden kann, entweder aufgrund technischer Beschränkungen oder einer Codelösung, die sich negativ auf das Benutzererlebnis auswirken würde, z. B. eine Animation, die das Laden der Webseite verlangsamt. Wenn man versteht, welche Entscheidungen für das Design ausschlaggebend sind, kann man die Zusammenarbeit und Kommunikation zwischen Designern und Entwicklern effizienter gestalten und das Hin und Her aufgrund dieser technischen Einschränkungen verringern. Wenn Entwickler mit den entsprechenden Werkzeugen und dem entsprechenden Vokabular ausgestattet sind, können sie den Designern mehr umsetzbares Feedback geben und die richtigen Fragen stellen. Sie können beginnen, das Warum hinter Designentscheidungen zu verstehen.

Dieses Buch soll dazu beitragen, Entwicklern die Terminologie und das Verständnis zu vermitteln, um während des gesamten Projektverlaufs effektiver mit einem Designteam zu kommunizieren. Auch wenn Sie nicht zu einem Unternehmen mit einem Designteam gehören, wird Ihnen die Lektüre dieses Buches das nötige Selbstvertrauen geben, um Designentscheidungen zu treffen, die zu einem gut aussehenden Endprodukt führen. Vielleicht sind Sie ein freiberuflicher Entwickler, der in der Lage sein möchte, visuelle Anpassungen an einer Webseite vorzunehmen, und Sie haben nicht das Budget, einen Designer zu engagieren (oder wollen es einfach nicht). Es kommt darauf an, diese wenigen Designprinzipien zu verstehen und sie anzuwenden.

1.1.2Die Gründe für Designentscheidungen verstehen

Ich habe ein Projekt geleitet, das sich an Entwickler richtete. Es handelte sich um ein Tool, das den Code einer Webseite oder einer Webanwendung analysierte und Vorschläge zur Verbesserung der Accessibility, der Leistung und der Sicherheit einer Webseite gemacht hat. Obwohl es sich um ein Open-Source-Projekt handelte, waren die meisten Mitglieder des Teams, das daran arbeitete, Microsoft-Mitarbeitende. Ich wusste, dass Webentwickler Microsoft im Allgemeinen nicht immer positiv gegenüberstehen. Wenn also Microsoft ein weiteres Tool für Entwickler herausbringt, würden sie jedes Detail davon kritisch hinterfragen. Ich hatte beschlossen, dass unser Branding, ähnlich wie bei anderen Entwickler-Tools, ein illustriertes Maskottchen enthalten sollte, das wir in den Grafiken auf der Webseite verwenden konnten.

Mit dem Design des Maskottchens wollte ich bewusst ein Gefühl der Empathie bei den Nutzern unserer Webseite hervorrufen. Die Platzierung einer bestimmten Illustration im Benutzerfluss der Webseite, wie in Abbildung 1–1 dargestellt, war entscheidend, um dieses Gefühl zu erreichen. In den ersten Iterationen der Webseite wurden die Benutzer in eine Warteschlange gesetzt, um ihren Code analysieren zu lassen, da unser Backend nur eine bestimmte Anzahl an URLs auf einmal verarbeiten konnte. Menschen sind ungeduldige Wesen, wenn es um das Internet geht, und Entwickler noch viel mehr.

Ich ging davon aus, dass es Beschwerden über die Warteschlange geben würde, und so zeigte die Illustration auf dieser Seite unser Maskottchen in einem dunklen Raum hinter einem Schreibtisch mit einer Lampe, mit schweißnassem Gesicht, während es sich durch die Warteschlange der URLs arbeitete.

Meine Hypothese wurde später bestätigt, als ich mit einem Entwickler über das Tool und die Website sprach und er mir sagte: »Ich wollte wütend sein, dass ich warten musste, aber ich hatte einfach Mitleid mit deinem Maskottchen.«

Einfühlungsvermögen für die Zielgruppe entwickeln, um bessere Erfahrungen zu ermöglichen

Weil ich die Zielgruppe unserer Website verstanden habe und mich in sie hineinversetzen konnte, war ich in der Lage, Designentscheidungen zu treffen, um künftige Beschwerden zu entschärfen. Schließlich wurde das Backend aufgerüstet, um mehr Codeanalysen gleichzeitig zu verarbeiten. Dies ist ein perfektes Beispiel dafür, wie Entwicklerentscheidungen und User Experience miteinander verwoben sind. In diesem Fall führte die anfängliche Einrichtung des Backends zu einer schlechten Erfahrung für die Nutzer der Website, da sie warten mussten. Bei den heute verfügbaren blitzschnellen Datenübertragungsgeschwindigkeiten sind die Menschen weniger geneigt, auf das Laden einer Webseite zu warten, bevor sie zur nächsten Option weitergehen. Die richtige Gestaltung dieser Erfahrung ist für die Geschäftskennzahlen entscheidend.

Abb. 1–1Die Warteschlange für den Webseiten-Scanner zeigte das Narwal-Maskottchen, das Überstunden machte, um einen Webseiten-Scan für einen Entwickler zu erledigen.

Bei der Verbesserung der User Experience sind das Verständnis der Zielgruppe und die Fähigkeit des Entwicklers, sich in sie hineinzuversetzen, von unschätzbarem Wert. Im Fall der Codeanalyse-Webseite gab es mehrere Lösungen, die ein Entwickler ohne den Input eines Designers hätte umsetzen können. Sie hätten eine Ladeanimation oder eine Zwischenseite mit dem Hinweis einbauen können wie: »Schauen Sie später wieder vorbei, um Ihre Ergebnisse zu sehen«. Dies sind zwar nicht unbedingt schlechte Erfahrungen. Aber es sind Standarderfahrungen, die die Zielgruppe nicht berücksichtigen, die wenig Toleranz für die Verwendung eines Tools haben, insbesondere eines neuen Tools, das bei der ersten Verwendung einen guten Eindruck hinterlassen muss.

Technische Entscheidungen sind Entscheidungen für die User Experience

Wenn man die Grundlagen der Gründe für das Design und die User Experience versteht, kann man als Entwickler besser verstehen, wie sich Entscheidungen – vom Code-Stack über die Kompilierung des Codes bis hin zum Hosting-Anbieter – letztendlich auf die User Experience einer Webseite oder Webanwendung auswirken. Die technischen Entscheidungen sind ebenso Teil des Designs einer Webseite wie die visuelle Gestaltung. Deshalb ist es so wichtig, über die Designentscheidungen eines Designers aus der Sicht der Entwicklung zu sprechen.

Nehmen wir an, ein Designer entwirft eine Webseite, die viele Animationen mit Benutzerinteraktionen enthält. Die Sichtweise des Entwicklers, wie sich dies auf die Leistung der Webseite auswirkt, ist ein wichtiges Feedback, das dem Designer bereits zu Beginn des Prozesses gegeben werden sollte. Sind alle Animationen ein notwendiger Bestandteil der User Experience der Webseite? Wenn nicht, kann ein solches Gespräch vor Beginn der Programmierung Zeit sparen und bietet dem Designer und dem Entwickler die Möglichkeit, eng zusammenzuarbeiten, um Lösungen zu finden, die das gewünschte Ergebnis erzielen, ohne die Benutzerfreundlichkeit der Webseite zu beeinträchtigen.

1.1.3Besserer Code durch das Verständnis der Grundlagen des visuellen Designs

Das Verständnis einiger Grundlagen des visuellen Designs bietet Entwicklern einige weitere Vorteile, die über eine bessere Zusammenarbeit und Kommunikation mit ihren Designkollegen hinausgehen. Der erste Vorteil, der sich direkt auf den Entwickler auswirkt, besteht darin, dass das Verständnis dafür, wie verschiedene Elemente zusammenpassen, zu einem besser organisierten und saubereren Code führen kann, der auf lange Sicht leichter zu warten ist.

Das Aufschlüsseln und Verstehen, wie eine ganze Seite aufgebaut ist, kann sich auf die Art und Weise auswirken, wie der Code geschrieben wird, um ein saubereres responsives Erlebnis mit weniger Hacks für die Programmierung für kleinere Bildschirme zu erreichen. Entwickler können auch die Stellen identifizieren, an denen eine Komponente oder ein Layout auf kleineren Bildschirmen nicht funktioniert oder unzureichend ist (zum Beispiel, wenn eine Schaltfläche auf einem Mobiltelefon nicht groß genug ist), und sind in der Lage, visuelle Anpassungen vorzunehmen oder vorzuschlagen.

Auf einer umfassenderen Ebene wirkt sich das Verständnis der Wiederverwendung einzelner Elemente wie Überschriften und Schaltflächen in mehreren Komponenten der Benutzeroberfläche auch darauf aus, wie der Code gruppiert wird, insbesondere in einer CSS-Datei. Die Identifizierung dieser wiederverwendbaren Teile kann dazu führen, dass mehr Code zwischen den Komponenten geteilt wird, was wiederum dazu führt, dass dem Endbenutzer weniger Code zur Verfügung gestellt wird. Das ist immer ein Gewinn für die Performance des Webs. Das Design kann auch Entscheidungen über den Backend-Code beeinflussen. Einige Datenbanken müssen vielleicht von einem bestimmten Formular aus abgefragt werden oder es müssen Daten gespeichert werden. Wenn man die Benutzerströme in diesen Szenarien versteht, kann diese Arbeit früher beginnen, anstatt auf die Übergabe des Designs zu warten. Sowohl die Kommunikation als auch die Projektgeschwindigkeit verbessern sich, was wiederum allen zugutekommt.

1.1.4Besserer Code (und Design) durch geringere Abhängigkeit von Frameworks von Drittanbietern

Viele Entwickler, die ich kenne, verwenden Komponentenbibliotheken oder Frontend-Frameworks von Drittanbietern, um viele der für ein Projekt benötigten Elemente der Benutzeroberfläche schnell zu implementieren. Sie sind schnell eingerichtet und einsatzbereit, und wenn Sie Ihren Designfähigkeiten als Entwickler nicht trauen, sind alle Teile vorhanden, um eine bessere Erfahrung zu bieten als das, was Sie glauben, selbst liefern zu können. Das Verwenden dieser Bibliotheken von Drittanbietern hat jedoch sowohl aus der Design- als auch aus der Codeperspektive mehrere Nachteile.

In den meisten Fällen erhalten Sie eine Code-Bibliothek, die mehr Code enthält, als Ihre Webseite tatsächlich nutzen wird. Außerdem handelt es sich nicht um Code, den Sie selbst geschrieben haben. Daher ist möglicherweise nicht klar, wie die verschiedenen Komponenten der Benutzeroberfläche miteinander verwoben sind oder wiederverwendet werden. Der Versuch, Code zu entfernen oder zu ändern, von dem Sie glauben, dass Sie ihn nicht verwenden werden, kann zu Fehlern in der Benutzeroberfläche führen. Außerdem sind Sie jetzt von den Autoren des Frameworks abhängig, die dafür sorgen, dass der Code des Frameworks mit neuen Webstandards und Best Practices auf dem neuesten Stand ist.

Mit dem Vertrauen und dem Verständnis für visuelle Designprinzipien und deren Anwendung auf das Web durch Layout- und UI-Komponenten können Entwickler ihr eigenes Komponentensystem aufbauen und dem Endbenutzer minimalen Code zur Verfügung stellen. Diese Codebasis lässt sich leichter pflegen, iterieren und um neue Komponenten erweitern, und die Entwickler sind nicht an ein bestimmtes Ökosystem gebunden, das sich ihrer Kontrolle entzieht.

Frameworks von Drittanbietern bieten einige sehr gängige Muster für ganze Webseiten-Layouts. In der Regel gibt es ein Layout mit einem großen Heldenbild oben und horizontalen Bändern zur Aufteilung des Seiteninhalts und ein anderes mit einem großen Bild und drei Inhaltsspalten darunter, wie in Abbildung 1–2.

Abb. 1–2Ein Beispiel für eine der üblicherweise von Drittanbieter-Frameworks bereitgestellten Vorlagen

Diese Layouts sind nicht per se schlecht. Sie erfüllen eine Funktion und einen Zweck. Aber sie sind oft nur auf die Haupt-Landingpage ausgerichtet, sodass Sie am Ende vielleicht eine Homepage haben, die gut gestaltet ist, aber mit Unterseiten, die nicht ganz so ausgefeilt wirken. Sie sind auch unglaublich gewöhnlich, und wenn Sie möchten, dass sich Ihre Website ein wenig mehr abhebt, werden Sie mit diesen Vorlagen nicht viel erreichen.

Die Entwicklung einer gut gestalteten Webseite oder Webanwendung ist viel mehr als nur die Auswahl einer guten Vorlage für das Layout. Das Verständnis von Designprinzipien, wie die Anwendung der Farbtheorie und die Verwendung von Typografie und Raum innerhalb eines Layouts, kann zu einem viel besseren Erlebnis für die Nutzer führen. Das bedeutet auch, dass Sie nicht versuchen müssen, den Inhalt Ihrer Website in die generische Vorlage eines anderen Anbieters zu pressen, sondern dass Sie wissen, wie Sie die Struktur Ihrer Website für Ihre Nutzer aufbauen und anpassen können. Das Layout und die Abläufe eines E-Commerce-Shops sind ganz anders als die einer Nachrichten-Website oder eines Blogs. Aber wir leben in einer sehr schnelllebigen Welt, und je nach Kunde haben Entwicklungsprojekte einen engen Zeitplan, und Sie haben vielleicht keine Wahl zwischen der Verwendung einer Vorlage und dem Erstellen Ihrer Website von Grund auf. Wenn Sie wissen, wie Sie Farbe, Typografie und Raum nutzen können, können Sie diese Kenntnisse auf alle Vorlagen anwenden, die Sie verwenden müssen, und so das Design erheblich verbessern.

1.1.5User Experience und Entwicklung

Design als Ganzes ist ein umfangreiches Thema, mit dem man sich auseinandersetzen muss. Es gibt so viele verschiedene Bereiche, auf die man sich spezialisieren kann, und User Experience ist vielleicht einer der umfangreichsten Teile des Webdesigns, der in Spezialgebiete wie Benutzerforschung und Interaktionsdesign unterteilt werden kann. Ein Großteil der User Experience konzentriert sich auf den Designaspekt des Fachgebiets, aber jede Entscheidung, die ein Entwickler trifft, ist auch eine Entscheidung für die User Experience. Einige Aspekte des User-Experience-Prozesses sind nicht unbedingt mit der eigentlichen Codeentwicklung einer Webseite verbunden. Die Kenntnis der Grundlagen kann Entwicklern jedoch helfen, die für die Benutzer getroffenen Entscheidungen zu verstehen und technische Entscheidungen zu treffen, die ihnen am meisten nützen.

Die sich stets weiter entwickelnde Rolle des Entwicklers bedeutet, die Zielgruppe zu verstehen und mit ihr in Kontakt zu treten, um eine Lösung zu entwickeln, die ihren Bedürfnissen entspricht. Methoden der User Experience können Entwicklern eine Grundlage bieten, um zu verstehen, wie sie ihre Benutzer in den Vordergrund stellen können. Auch dies kann sich auf die Art und Weise auswirken, wie Entwickler ihren Code schreiben oder welche Tools sie einsetzen, um ihr Ziel zu erreichen.

Nehmen wir an, ein Entwickler in einem kleineren Unternehmen arbeitet an einem Produkt, z.B. einer Webseite oder einer Webanwendung, und will eine neue Funktion einführen. Da es sich um ein kleines Unternehmen handelt, verfügt es weder über einen engagierten Nutzerforscher noch über das Budget, um formelle Nutzertests durchzuführen. Daher plant es, die Funktion ohne Benutzertests freizugeben und zu sehen, wie die Funktion genutzt wird. Dennoch muss ein Plan für Tests vorhanden sein, damit dieses Experiment erfolgreich ist. Das Verständnis dafür, wie man ein Design testet und Feedback sammelt, um eine Funktion zu verbessern, ist für die Produktentwicklung entscheidend.

Jede Entscheidung, die ein Entwickler trifft, wirkt sich auf die Benutzerfreundlichkeit der Webseite oder Anwendung aus. Das Verständnis der Bedeutung der verschiedenen Bereiche der User Experience und wie sie in den Lebenszyklus des Projekts passen, kann Entwicklern dabei helfen, nutzerzentrierter zu denken und Probleme mit einem Benutzererlebnis zu identifizieren, bevor zu viel Zeit in die Entwicklung investiert wird. Wenn beispielsweise Details und Funktionsmerkmale in der Prototyping-Phase ausgebügelt werden, wird sichergestellt, dass die Funktionen wie erwartet funktionieren und weniger Fehler im Produktionscode der Webseite oder Webanwendung auftreten. Das führt wiederum zu einer besseren User Experience.

User Experience und Webentwicklung sind eng miteinander verwoben. Da Entwickler immer mehr über das Unternehmen und seine Kunden wissen müssen, ist es von Vorteil, die Grundlagen der User Experience zu verstehen und zu wissen, wie sie mit der Entwicklungsphase zusammenhängen. Letztlich können diese Informationen Entwicklern dabei helfen, besseren Code zu schreiben, Code mit weniger Fehlern auszuliefern und ihre Benutzer bei technischen Entscheidungen im Auge zu behalten. Wenn dies richtig gemacht wird, wirkt sich das Verständnis der Grundlagen der User Experience nicht nur positiv auf die endgültigen Geschäftsziele aus, sondern gibt den Entwicklern auch die Werkzeuge an die Hand, um schnell umzuschwenken und zu iterieren, wenn etwas nicht wie erwartet funktioniert, bevor es negative Auswirkungen hat.

1.2Der Weg zu einem besseren Verständnis von Design und User Experience

Sowohl visuelles Design als auch User Experience sind extrem breit gefächerte Themen mit vielen einzelnen Fachgebieten, die eine tiefe Spezialisierung ermöglichen. Bei der Benutzererfahrung konzentrieren sich einige Funktionen auf die Designaspekte wie Wireframing und Interaktionsdesign, während andere sich ausschließlich auf die Forschung konzentrieren. Es gibt viele verschiedene Wege und Bereiche, auf die man sich spezialisieren kann, und manche verbringen Jahre damit, die Fähigkeiten für diese Spezialisierungen zu entwickeln. Jeder beginnt jedoch mit den grundlegenden Prinzipien in jedem Bereich, auf die wir in diesem Buch eingehen werden – im Kontext des Webs.

Die Kernbereiche für visuelles Design konzentrieren sich auf Komposition, Layout, Farbe sowie Typografie und wie all diese Dinge zusammenwirken, um die visuelle Hierarchie einer Seite zu schaffen. Wir werden uns mit den Grundlagen des Layouts befassen, z. B. mit den Prinzipien der Symmetrie, und uns mit Layouts befassen, die auf von Forschern ermittelten allgemeinen Lesemustern basieren. In Bezug auf Farben werden wir uns mit den Grundlagen des Farbkreises und dem Erstellen einer Farbpalette beschäftigen. Bei Tools, die eine Farbpalette für Sie erstellen, gibt es oft keine Anleitung, wie man diese Farben auf einer Website anwendet, was zu übermäßig bunten Webseiten führen kann, die nicht so raffiniert wirken wie andere.

Was die User Experience betrifft, so bestehen ganze Karrieren aus verschiedenen Spezialgebieten. Aber wir werden uns mit der Informationsarchitektur und der Definition des Benutzerflusses einer Website befassen. Was die User Experience angeht, so ist das Verständnis der verschiedenen Arten von Benutzertests und der Möglichkeiten, Feedback zu sammeln, auch ohne Zugang zu einem umfangreichen Budget bei den Entwicklern, mit denen ich zu tun habe, sehr gefragt. Wie man Feedback in ein Projekt integriert und weiß, wann etwas gut genug ist, um es zu testen, ist eine weitere häufige Frage, die sich Entwicklern stellt.

1.2.1Der Gestaltungsprozess, den dieses Buch behandelt

Der Designprozess in diesem Buch ist auf einen iterativen Prozess ausgerichtet. Ein iterativer Prozess ist ein fortlaufender Zyklus, bei dem ein Produkt – in unserem Fall eine Webseite oder eine Webanwendung – veröffentlicht und durch schrittweise Änderungen verbessert wird. Dieser Prozess funktioniert jedoch auch mit Projekten, die nicht fortlaufend sind. Es gelten die gleichen Phasen, sie sind nur nicht kontinuierlich. Die einzelnen Phasen sind in Abbildung 1–3 dargestellt.

Abb. 1–3Der iterative Prozess, den dieses Buch für ein Webdesign- oder Webanwendungsprojekt abdeckt: von der Identifizierung des Problems über die Nutzerforschung, das User-Experience-Design, die Design- und Build-Phase bis hin zu Test und Evaluierung

Die erste Phase, die ich vorstellen werde, ist die UX-Forschungsphase, in der wir von einem Kunden ein Problem genannt bekommen, das wir lösen sollen. Sie würden also eine Website oder Webanwendung erstellen, die dieses Problem löst. Bei Ihrer anfänglichen Recherche sollten Sie herausfinden, welche Anforderungen der Nutzer an Ihre Website stellt und welche Zielgruppe er anspricht. Je nachdem, was Sie entwickeln, kann diese Phase auch bedeuten, dass Sie sicherstellen, dass das Problem, das Sie lösen wollen, tatsächlich ein Nutzerproblem ist, das gelöst werden muss.

Phase 2 ist das User-Experience-Design. Sie nehmen die Kunden- und Geschäftsanforderungen für Ihr Projekt, kombinieren diese mit den Bedürfnissen, die Sie in Ihrer Benutzerforschungsphase ermittelt haben, und beginnen, einen Plan für Ihre Website zu erstellen. In dieser Phase legen Sie das Fundament für die visuellen Elemente, die Sie in der nächsten Phase einsetzen werden. Der Schwerpunkt liegt auf der Gestaltung des Seitenlayouts, der Platzierung der Inhalte und des Seitenflusses (wie die Benutzer von Punkt A zu Punkt B gelangen).

Phase 3 umfasst die Entwurfs- und die Erstellungsphase. Diese beiden Phasen bestehen aus der Anwendung visueller Designelemente wie Farben, Typografie und Plänen für Animationen, die Sie einbinden möchten, bzw. dem eigentlichen Entwicklungsprozess mit Code. Ich habe diese Phasen absichtlich zusammengefasst, weil die meisten modernen Teams, die ich kenne, nicht mehr so isoliert arbeiten wie früher. Die Entwicklung kann beginnen, nachdem die Struktur der Website in der Phase des User-Experience-Designs festgelegt wurde. Visuelle Entscheidungen wie Farben, Bilder und Typografie können hinzugefügt und angepasst werden, während diese Entscheidungen getroffen werden.