Design trifft Code (eBook)

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

Stephanie Stimac (Autor)

eBook Download: EPUB

2024 | 1. Auflage
299 Seiten
dpunkt (Verlag)
978-3-98890-150-7 (ISBN)

Infos

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.

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.

Textauszug

1Die Kluft zwischen Design und Entwicklung überbrücken

Dieses Kapitel behandelt

• Die Gesamtheit des in diesem Buch behandelten Webdesign-Prozesses
• Die sich wandelnde Rolle der Webentwickler
• Die 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. 1.Der Designer verglich für das Projekt die Websites der Konkurrenten seines Kunden und beurteilte, was gut gemacht war und was nicht.
2. 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. 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. 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. 5.Der Entwickler nahm die statischen Mock-ups und erstellte die interaktive Website.
6. 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...

Produkt-Details

• Erscheint lt. Verlag: 30.4.2024
• Verlagsort: Heidelberg
• Sprache: deutsch
• Themenwelt: Mathematik / Informatik ► Informatik
• Schlagworte: CSS • Developer • Frontend • HTML • JavaScript • Layout • Programmierung • Typographie • User Research
• ISBN-10: 3-98890-150-4 / 3988901504
• ISBN-13: 978-3-98890-150-7 / 9783988901507