Wie man Design für Entwickler angeht

Auch wenn sie an denselben Projekten und Produkten arbeiten, arbeiten Entwickler und Designer oft getrennt voneinander in Silos. Design wird von Entwicklern oft als zweitrangig betrachtet, unwichtig im Vergleich zur Funktionalität eines Produkts.

Diese Art des Denkens kann sich nachteilig auf die Entwickler-Designer-Beziehung auswirken. Ein fehlendes Grundverständnis für Design kann Entwickler in ihrer Karriere zurückhalten oder sie daran hindern, Projekte zu verfolgen, nur weil sie keinen Designer an Bord haben.

Warum Entwickler Design lernen sollten

Während Design und Entwicklung oft als getrennte Disziplinen angesehen werden, gibt es Menschen da draußen, die beide beherrschen. Selbst wenn jemand nur daran interessiert ist, Designer oder Entwickler zu sein – nicht beides –, ist es wertvoll, zumindest die Grundlagen der anderen Disziplin zu erlernen.

Es gibt eine Reihe von Gründen, warum Entwickler Design lernen oder zumindest eine grundlegende Grundlage für Designkenntnisse entwickeln möchten.

Erstens haben kleine Teams möglicherweise keinen eigenen Designer. Außerdem gibt es da draußen Entwickler, die Projekte ganz alleine angehen wollen, die es sich nicht leisten können, einen Designer einzustellen (oder das Geld woanders ausgeben wollen). Zu lernen, wie man seine eigenen Produkte entwirft, zumindest gut genug, um zurechtzukommen, bis ein Designer eingestellt werden kann, ist eine unschätzbare Ressource.

Der andere wichtige Grund für Entwickler, Design zu lernen, ist, dass sie effektiver mit Designern zusammenarbeiten können. Es ist unglaublich frustrierend für einen Designer, eine vollständig gestaltete Datei für eine Website oder App zu übergeben, von der er erwartet, dass sie im fertigen Produkt pixelgenau ist, nur um festzustellen, dass ihr Design durch den Entwickler, der es programmiert, erheblich verändert wurde.

Wenn Entwickler die Grundlagen des Designs nicht verstehen, übersehen sie möglicherweise kleine Details, die eine Benutzeroberfläche besonders benutzerfreundlich machen und die Benutzererfahrung des Projekts unbeabsichtigt sabotieren. Wenn Designer Tonnen von Korrekturen zurücksenden, kann dies die Entwickler-Designer-Beziehung belasten, ganz zu schweigen davon, dass die Fertigstellung eines Projekts verlangsamt wird.

Um die Beziehungen und Teamarbeit zwischen interdisziplinären Teams zu verbessern, würden sich Entwickler einen Gefallen tun, indem sie lernen würden, Designs mit den Augen eines „Designers“ zu sehen, anstatt sie nur aus der Entwicklungsperspektive zu betrachten – die Beherrschung dieser Fähigkeit wird ihre Projekte erheblich verbessern.

Erstellen einer Design-Denkweise

Zu oft konzentrieren sich Entwickler, die Design lernen, zu sehr auf die Ästhetik von Designs, die sie mögen und nachahmen möchten, anstatt auf die zugrunde liegenden Prinzipien, die diese Designs unterstützen. Sie sehen Dinge wie die Farbe und Größe einer Schaltfläche, eine bestimmte Schriftart oder die Art und Weise, wie Rahmen verwendet werden, ohne die Gründe für diese Entscheidungen zu verstehen.

Sie fangen an, Farbe auf die Wände zu sprühen und den Raum zu dekorieren, ohne den Zweck der Räume zu verstehen, die sie dekorieren (oder sogar sicherzustellen, dass Dinge wie Klempner- und Elektroarbeiten fertig sind), sozusagen.

Es ist wichtig, die Prinzipien zu verstehen und zu respektieren, warum Designer die Entscheidungen treffen, die sie treffen. Jeder, der neu im Design ist, braucht ein solides Verständnis der Prinzipien und Theorien, die ein gutes Design ausmachen – Dinge wie Gestaltprinzipien und grundlegende visuelle Hierarchien – bevor er einfach loslegt und überall Farbe versprüht.

Allerdings ist es auch üblich, dass neue Designer, ob sie einen Entwicklungshintergrund haben oder nicht, sich in der Theorie verzetteln. Sie verbringen so viel Zeit damit, zu lernen und über Dinge nachzudenken, dass sie das Gelernte nie wirklich anwenden können.

Sowohl Designer als auch Entwickler neigen dazu, Perfektionisten zu sein. Aber Designs herauszubringen, bevor sie perfekt sind (da sie es wahrscheinlich nie sein werden), ist für den Prozess wichtig. Besonders neue Designer müssen ihre Unsicherheiten überwinden, ihre Arbeit veröffentlichen und aus dem Feedback lernen, das sie erhalten.

Eine der besten Möglichkeiten, Design wirklich zu lernen, besteht darin, zu versuchen, die Designs anderer nachzubilden. Zu unterscheiden, was funktioniert und was nicht, und herauszufinden, warum ein bestimmtes Design ansprechend ist, ist eine der wertvollsten Fähigkeiten, die ein neuer Designer oder Entwickler erlernen kann. Es ist in der Branche üblich, einem bestehenden Design einen einzigartigen Touch zu verleihen (wie die „Rebound“-Funktion von Dribbble zeigt).

Entwerfen im Browser

Viele Designer lehnen es ab, direkt im Browser zu entwerfen, da dies im Allgemeinen bedeutet, dass sie sich beim Schreiben von zumindest grundlegendem HTML- und CSS-Code wohlfühlen müssen. Das ist genau der Grund, warum es oft gut für Entwickler geeignet ist, die sich mit dem Design befassen – sie sind bereits vertraut mit dem Schreiben von Code.

Es gibt Tools, die beim Designen im Browser helfen und sowohl Designern als auch Entwicklern das Leben erleichtern können. Einfache Browser-Plugins sind für alles verfügbar, von der Auswahl von Farbpaletten bis zum Erkunden des CSS- und HTML-Codes einer anderen Website.

Es gibt auch komplexere Tools wie Figma, die direkt im Browser wie ein voll ausgestattetes Design-Tool funktionieren. Figma ermöglicht es Designern zusammenzuarbeiten, Assets an Stakeholder zu senden (und sie sogar Änderungen am Inhalt vornehmen und Designs kopieren zu lassen) und ermöglicht Entwicklern den Zugriff auf die tatsächlichen Designs in Echtzeit. Es ist eine großartige Option für Entwickler-Designer, die Designs und Designsysteme erstellen möchten, die im Laufe der Zeit skaliert werden können.

Webflow ist eine weitere Option zum Entwerfen im Browser, die Entwickler lieben könnten. Während die Designschnittstelle visuell ist, ist der exportierte Code sauberes, semantisches CSS und HTML, das Entwickler zu schätzen wissen (nicht alle visuellen Designtools exportieren sauberen Code). Webflow umfasst Tools für Design und Layout sowie integrierte CMS- und E-Commerce-Tools sowie Hosting-Optionen.

Verwendung von Farbe, Typografie und Layout

Bevor wir uns mit den visuellen Prinzipien von Farbe, Typografie und Layout befassen, ist es wichtig, über die grundlegende Benutzerfreundlichkeit zu sprechen. Das ästhetischste Design der Welt ist nutzlos, wenn es nicht nutzbar ist.

Eines der wichtigsten Usability-Prinzipien ist die Idee der Konsistenz oder Vorhersagbarkeit. Designs sollten so vorhersehbar sein, dass Benutzer intuitiv verstehen können, wie sie zu verwenden sind. Zum Beispiel blau unterstrichener Text für anklickbare Links, Navigationsmenüs, die vollständig und gut beschriftet sind usw. Der Abstand zwischen den Elementen, die Typografie und das Farbschema sollten ebenfalls konsistent sein.

Andere Usability-Prinzipien, die in jedem Designprojekt berücksichtigt werden sollten, umfassen Dinge wie Fehlervermeidung (und informative Fehlermeldungen, wenn Fehler auftreten), vertraute Sprache (verwenden Sie die Sprache, an die die Menschen gewöhnt sind, anstatt „niedliche“ oder kreative Alternativen, die unklar sein könnten ), Flexibilität und Effizienz sowie leicht verfügbare Hilfe. Die Nielsen Norman Group verfügt über zusätzliche Usability-Heuristiken, die ebenfalls berücksichtigt werden sollten.

Usability-Bewertungen sollten während des gesamten Design- und Entwicklungsprozesses durchgeführt werden, um sicherzustellen, dass das Produkt so funktioniert, wie es das Design- und Entwicklungsteam beabsichtigt hat, und dass die Benutzer nicht verwirrt werden. Bei heuristischen Bewertungen wird eine Liste vordefinierter Designprinzipien, denen ein Produkt folgen sollte, mit dem tatsächlichen Produkt verglichen, um festzustellen, wo Abweichungen auftreten (und diese Abweichungen dann behoben).

Sobald die Benutzerfreundlichkeit in Bezug auf das vorliegende Produkt gründlich verstanden wurde, können Designer-Entwickler zu den eher visuellen Aspekten des Designs übergehen.

Grundlegende Farbtheorie

Die Farbtheorie ist einer der komplexesten Aspekte des visuellen Designs. Leicht veränderte Farbtöne können die visuelle Wirkung und emotionale Wirkung einer Farbe komplett verändern. Das ist einer der Gründe, warum viele Designer, die seit Jahren in der Branche tätig sind, immer noch mit Farbe zu kämpfen haben.

Obwohl viele Bücher über Farbtheorie geschrieben wurden, gibt es einige sehr grundlegende Prinzipien, die Designer-Entwickler lernen können, um loszulegen. Kombinieren Sie diese mit einem der zahlreichen verfügbaren Farbdesign-Tools, und Sie können ganz einfach eine ansprechende Farbpalette erstellen.

Zuerst der Unterschied zwischen warmen Farben, kühlen Farben und Neutralen. Zu den warmen Farben gehören Rot, Orange und Gelb. Warme Farben wirken im Allgemeinen lebendig und anregend. Zu den kühlen Farben gehören Grün, Blau und Lila. Diese Farben sind normalerweise ruhiger und entspannender.

Zu den Neutralen gehören Weiß, Schwarz, Grau, Braun und Beige. Das Hinzufügen von Weiß, Schwarz oder Grau zu warmen oder kühlen Farben verändert ihre Bedeutung und Wirkung. Weiß hellt Farben auf und macht ihre Wirkung im Allgemeinen weniger intensiv oder positiver (z. B. gilt Lila als geheimnisvolle, königliche Farbe, während Flieder oft mit Frühling und Glück assoziiert wird). Grau dämpft Farben und kann ihre Wirkung verringern. Schwarz verdunkelt Farben und kann sie konservativer erscheinen lassen (berücksichtigen Sie die unterschiedliche Wirkung einer Farbe wie Hellblau und Marineblau).

Sobald ein Designer ein grundlegendes Verständnis der Farbbedeutungen hat, kann er Tools wie Coolors, Design Seeds oder Colormind verwenden, um eine endgültige, koordinierte Palette für sein Design zu erstellen.

Verwenden von HSL-Farbe

Wenn ein Designer an Webfarben denkt, denkt er oft an Hex-Werte. Während dies in Bezug auf Webfarben zum Industriestandard geworden ist, finden Entwickler möglicherweise, dass die Arbeit mit HSL-Farbwerten sinnvoller ist.

Für die meisten Menschen (einschließlich Designer) haben Hex-Werte scheinbar keine Korrelation zueinander. Zwei Farben, die sehr ähnlich aussehen, können völlig unterschiedliche Hex-Werte haben. Zum Beispiel sind #68B4D4 und #92C8E0 ziemlich ähnliche Blautöne (einer ist einfach etwas heller und heller als der andere) und dennoch haben ihre Hex-Werte keine offensichtliche Korrelation.

Ihre HSL-Werte zeigen jedoch, wie eng sie verwandt sind: #68B4D4 wird zu HSL (198, 58 %, 62 %) und #92C8E0 wird zu HSL (198, 56 %, 73 %). Die erste Zahl in der Folge (in diesem Fall 198) gibt den jeweiligen Farbton an. Die zweite Zahl ist der Prozentsatz der Sättigung (wie hell oder lebendig die Farbe ist). Die dritte Zahl ist der Prozentsatz der Helligkeit (oder des hinzugefügten Weiß) der Farbe.

Da die Korrelationen zwischen Farbwerten mit HSL vs. Hex so leicht zu erkennen sind, stellen Entwickler oft fest, dass die Manipulation von Farben per Code mit HSL erheblich einfacher ist.

Typografische Prinzipien

Typografie ist ein weiterer Bereich, der selbst erfahrenen Designern ein Bein stellen kann. Aber wie die Farbtheorie gibt es einige großartige Tools, die helfen können.

Typografische Hierarchie ist eines der ersten Dinge, die ein Designer-Entwickler lernen sollte. Die Beziehung zwischen verschiedenen Schriftelementen in einem Design ist entscheidend, um dieses Design benutzerfreundlicher zu machen.

Ein Design sollte mindestens drei Ebenen der typografischen Hierarchie haben: Titel, Untertitel und Hauptschriften. Der Titel sollte visuell am auffälligsten sein, die Untertitel kommen als nächstes und dann die Hauptschrift, die gut lesbar sein sollte.

Viele neue Designer konzentrieren sich beim Erstellen ihrer Hierarchie zu sehr auf die Schriftgröße und nicht genug auf den Schriftstil . Anstatt beispielsweise einen Titel deutlich größer als einen Untertitel zu machen, könnte ein Titel manchmal fett oder großgeschrieben werden, während der Untertitel in Groß- und Kleinschreibung und normaler Schriftstärke belassen wird. Farbe kann auch verwendet werden, um zwischen Untertiteln und Titeln sowie zwischen diesen Elementen und Fließtext zu unterscheiden.

Das Kombinieren verschiedener Schriftarten kann viele Designer ebenfalls verwirren, und dennoch ist es eine gängige Methode, um eine visuelle Hierarchie zu erstellen. Dazu gehören die Auswahl komplementärer Schriftarten (Gegensätze ziehen sich oft an, aber bis zu einem gewissen Grad muss die Kombination von Schriftarten auf der Grundlage eines im Laufe der Zeit geschärften Bauchgefühls bestimmt werden), die Auswahl geeigneter Schriftarten (verwenden Sie keine Comic Sans auf einem juristischen Dokument, z oder eine Display-Schriftart für Körperschrift, die bei kleineren Größen nicht lesbar ist), und um einen Kontrast zwischen Schriftarten zu schaffen (verwenden Sie nicht zwei, die sehr ähnlich sind).

Eine weitere einfache Möglichkeit zum Kombinieren von Schriftarten besteht darin, Schriftarten aus großen Schriftartfamilien auszuwählen. Es gibt sogar Familien mit Display-, Serifen- und Sans-Serif-Versionen, die gut zusammenarbeiten (wie Mrs Eaves und Mr Eaves, Fedra oder Museo und Museo Sans). Dies kann der einfachste Weg sein, wirklich mit dem Kombinieren von Schriftarten zu experimentieren, da sie so konzipiert sind, dass sie zusammen gut aussehen.

Wenn Sie mit größeren typografischen Hierarchien arbeiten (z. B. beim Hinzufügen von H1, H2, H3, H4 usw.), ist es wichtig, einer Art Grund in der typografischen Skala zu folgen. Die Fibonacci-Folge ist eine mögliche Skala für den Anfang, obwohl es andere etablierte typografische Skalen gibt.

Eine gemeinsame Skala, die sowohl in der Typografie (und allgemein in Designlayouts) verwendet wird, besteht aus 4, 8, 16, 24, 36, 48, 72, 108 usw. Diese Zahlen können auf verschiedene Weise kombiniert werden, um ein Design mit ansprechender Optik zu erstellen Proportionen (z. B. eine 24-Pixel-Schriftart kombiniert mit einer 36-Pixel-Zeilenhöhe).

Grundlegende Layout-Prinzipien

Seit den Anfängen des Webs haben sich bestimmte Layoutmuster als „Standards“ herauskristallisiert. Beispiele hierfür sind die Hauptnavigation oben, die linke oder rechte Seitenleiste mit zusätzlichen Informationen oder Navigationsoptionen und der Body-Content, der den restlichen Platz einnimmt.

Obwohl es deutliche Abweichungen von diesem Grundlayout gibt (keine Top-Navigation, keine Seitenleiste, zwei Seitenleisten usw.), ist dies oft eine ziemlich sichere Sache, wenn Sie ein neues Layout erstellen. Abweichungen von diesem Grundmuster sollten nur mit Absicht erfolgen, insbesondere von neuen und unerfahrenen Designer-Entwicklern.

Das Erstellen eines vorhersehbaren Designs – das bedeutet normalerweise konsistent – ​​trägt viel zur Benutzerfreundlichkeit eines Produkts bei. Abweichungen von dem, was ein Benutzer erwartet, wenn er ein Produkt verwendet, sollten nur dann erfolgen, wenn die Usability-Gewinne größer sind als die Verluste.

Es ist am besten, für dieselbe Art von Inhalten keine fetten blauen 72-Pixel-Titel auf einer Seite und dann rote 36-Pixel-Titel auf einer anderen Seite für denselben Inhaltstyp zu verwenden, da die Konsistenz des Layouts entscheidend ist. Ebenso führt ein Abstand (Padding) zwischen Titel und Fließtext, der in einem Abschnitt 36 Pixel und in einem anderen 32 Pixel beträgt, zu visuellen Inkonsistenzen. Während eine Person vielleicht nicht sofort versteht, warum der Unterschied erschütternd ist, wird sie es fühlen.

Ähnlich wie bei der oben erwähnten typografischen Skala erzeugen Abstandselemente auf einer Skala von 4, 8, 16, 24, 36, 48, 72 oder 108 Pixeln ein optisch ansprechendes Design. Es ist eine gute Idee, genügend Platz zwischen den Elementen zu lassen, ihnen Raum zum Atmen zu geben; Neuere Designer vermeiden oft Leerraum und können mit Designs enden, die überladen und überwältigend wirken.

Einige fragen sich vielleicht, warum die Skala so beabstandet ist, wie sie ist. Warum gibt es zwischen den ersten beiden Zahlen nur einen Unterschied von 4 Pixeln, aber einen Sprung von 36 Pixeln zwischen den letzten beiden? Der Grund ist einfach: Bei kleinen Maßstäben ist eine Erhöhung um 4 Pixel leicht erkennbar (8 Pixel sind doppelt so groß wie 4, was leicht zu erkennen ist). Aber bei größeren Zahlen ist der Unterschied zwischen 72 Pixel und 76 Pixel nicht leicht zu erkennen. Größere Unterschiede sind mit zunehmender Größe leichter zu erkennen.

Konsistente Abstände sind einer der Gründe, warum rasterbasierte Designansätze so beliebt geworden sind. Beginnend mit einem Raster (im Allgemeinen 12-, 16- oder 24-Spalten) gibt Designern einen Rahmen, in dem sie arbeiten können, um alles konsistent zu halten. Eingebaute Dachrinnen zwischen Säulen tragen auch dazu bei, dass verschiedene Designelemente und der darin enthaltene Inhalt etwas Luft zum Atmen haben.

Fazit

Designer und Entwickler sollten sich gleichermaßen darauf konzentrieren, ihre Fähigkeiten zu erweitern, um ihre Karriere voranzutreiben. Die Zeit, die Entwickler damit verbringen, die Grundprinzipien des Designs zu lernen, wird in Zukunft Zeit sparen, wenn sie mit Designern zusammenarbeiten oder ihre eigenen Produkte erstellen.

Ein Verständnis der Grundprinzipien des Designs – Usability-Prinzipien, Farbtheorie, Typografie, Layout und UX – wird Entwickler auch in der Entwicklung besser machen . Wenn sie sehen können, warum Designer die Entscheidungen treffen, die sie treffen, können Entwickler besser mit Designern zusammenarbeiten, um wirklich herausragende Produkte zu entwickeln.

Weiterführende Literatur im Toptal Design Blog:

• Die Gestaltungsprinzipien und ihre Bedeutung
• Wie viel Codierung sollten Designer wissen?
• Ein Spektrum an Möglichkeiten: Der Go-To UI Color Guide
• Steigern Sie Ihre UX mit diesen erfolgreichen Prinzipien des Interaktionsdesigns
• Design Foundations – Ein Leitfaden zur visuellen Hierarchie (mit Infografik)