Haupt / Rat

10 Designkonzepte, die jeder Webentwickler kennen muss

In den letzten Jahren habe ich einen Workshop über Grundlagen des visuellen Designs für Entwickler unterrichtet. Wie bei den meisten Dingen im Web habe ich sowohl bei den Studenten, die an meinem Workshop teilgenommen haben, als auch bei den Entwicklern, mit denen ich zusammengearbeitet habe, ein unterschiedliches Maß an Designkenntnissen und Interesse festgestellt.

Diese Liste soll eine Auswahlliste der Konzepte sein, mit denen die Entwickler, mit denen ich zusammenarbeite, das Design verstehen sollen. Es soll Entwickler in die richtige Richtung lenken, um eine Einführung in das Denken und Kommunizieren über Design zu erhalten.

01. Design ist nicht nur visuell

Design ist nicht nur die Fassade; Es ist die Persönlichkeit darunter. Aus irgendeinem Grund hat Design ein Stigma als ausschließlich visueller Teil der Website. Dies könnte nicht falscher oder missverstanden sein. Design ist die gesamte Erfahrung von dem Moment an, in dem Benutzer Ihre Website betreten, bis weit nach ihrer Abreise.

Design ist das „Wie“ und „Warum“, mit dem Menschen die Website nutzen möchten. die Geschwindigkeit, mit der der Standort geladen wird; die Interaktion zwischen Schweben, Klicken und Berühren; und das Tempo, mit dem Sie neue Funktionen und Inhalte bereitstellen. Alle diese Konzepte umfassen Design.

Da Design mehr als nur visuelle Aspekte sind und die gesamte Erfahrung beeinflussen, ist jede Person in einem Projekt ein Designer. Jedes Teammitglied, das herausfinden möchte, wie der Benutzer mit der Site interagiert, ist ein Designer. Das Frontend, das Backend und das Projektmanagement sollten alle über Design nachdenken.

02. Seien Sie benutzerzentriert

Benutzer stehen an erster Stelle und sollten bei jeder Entscheidung über Ihre Website oder App stets im Vordergrund stehen. Designs sollten es Ihren Benutzern ermöglichen, ihre Ziele schnell, effektiv und vor allem mit Vergnügen zu erreichen.

In meinem Workshop lassen ich die Schüler einen ersten Entwurfsauftrag erstellen, nachdem sie ein Projekt ausgewählt haben, an dem sie arbeiten möchten. Obwohl ich ihnen einfache Richtlinien gebe, die sie befolgen müssen, konzentrieren sie sich größtenteils auf den Benutzer: Wer sind sie, was machen sie auf Ihrer Website und wie sollen sie sich bei ihrem Besuch und wann fühlen? Sie gehen?

Obwohl dies für die kleinen Projekte des Workshops gut funktioniert, sollten Sie bei größeren Projekten in größerem Maßstab über diese Grundlage nachdenken. Designer verwenden Personas, Storytelling und mehr, um anzugeben, wer die Benutzer der Website sind und was sie auf der Website tun möchten. Tauchen Sie in diese Richtlinien in welcher Form auch immer ein und verwenden Sie sie, um alle Ihre Entwurfsentscheidungen zu beeinflussen.

Der Designer sollte nicht die gesamte Benutzererfahrung übernehmen müssen. Designer sollten es einfach führen. Die Erfahrung sollte stattdessen vom gesamten Team geteilt werden (falls vorhanden). Es gibt viele Fälle, in denen ich mich auf Entwickler verlassen habe, um herauszufinden, wie ich die beste Benutzererfahrung erzielen kann. Sie kennen nicht nur ihre Grenzen besser, sondern haben auch eine klarere Vorstellung von allen Möglichkeiten.

03. Design ist im Detail

Details können ein 'gutes' Design 'großartig' machen. Die Liebe zum Detail in einer Benutzererfahrung kann den Unterschied zwischen einem zufriedenen und einem verärgerten Benutzer ausmachen. Es ist wirklich wichtig, den richtigen Blauton zu haben oder den Link um einen bestimmten Text zu wickeln. Das Problem mit Details ist, dass es leicht ist, sich in ihnen zu verfangen. Eine zu frühe Konzentration auf die Details ist nicht erforderlich und kann den Prozess verlangsamen. Es ist wichtig zu wissen, wann Sie sich auf bestimmte Details konzentrieren müssen oder wann es von Vorteil ist, das gesamte, größere Bild zu visualisieren.

04. Skizzieren Sie beim Entwerfen häufig

Die Vorteile von Skizzieren von Benutzererfahrungen sind gut dokumentiert . Durch Skizzieren können Sie unter anderem über Inhalt, Hierarchie und Ablauf nachdenken. Skizzen sind billig, einfach zu erstellen und sehr schnell. Sie sollten in der Lage sein, alle dreißig Sekunden eine neue Idee zu erstellen. Das Skizzieren ist auch eine der besten Möglichkeiten, um Ideen zu Layout, Benutzererfahrung und Benutzerfluss für eine Site zu kommunizieren.

Mit Skizzen können Sie Ideen schnell durchlaufen und viel Zeit beim Experimentieren mit Modellen oder Code sparen

Mein erster Hochschulprofessor hat dies in mir verankert, als ich Student war. Sie ließ uns den Computer nicht benutzen, bis sie Seiten über Seiten mit Skizzen sah. Junge Designer neigen dazu, an den Skizzen zu sparen oder sie ganz wegzulassen. Ich sehe immer noch, dass viele Designer zu früh von Skizzen zu einem Design mit höherer Wiedergabetreue übergehen, ohne zuerst alle möglichen Lösungen zu untersuchen.

Das Beste am Skizzieren ist, dass jeder es tun kann. Jeder weiß, wie man Kisten, verschnörkelte Linien und Pfeile zeichnet. Dies sind die grundlegenden Werkzeuge, die Sie benötigen, um mit dem Entwerfen zu beginnen - es ist wirklich so einfach. Wir suchen nicht nach unschätzbaren Kunstwerken, und Sie brauchen auf keinen Fall ein Kunststudium. Sie müssen nur in der Lage sein, Ihre Skizzen und den dahinter stehenden Denkprozess klar zu kommunizieren.

05. Verwenden Sie Leerzeichen

Es scheint das schwierigste Konzept für Entwickler zu sein: Der größte Vorteil einer angemessenen Menge an Leerraum besteht darin, dem Benutzer eine Pause zu geben. Pausen sind wichtig für die Verarbeitung von Informationen, insbesondere wenn eine angemessene Menge zu verarbeiten ist. Deshalb haben wir Absätze und Sätze anstelle von nur einem einzigen langen Block laufenden Textes.

Der Schlüssel besteht darin, sicherzustellen, dass der Leerraum eine Beziehung zu anderen Objekten auf der Seite hat, einschließlich des anderen Bereichs. Wenn Sie eine einzelne Spalte mit Leerzeichen haben, stellen Sie sicher, dass eine weitere einzelne Spalte mit Leerzeichen vorhanden ist, um diese auszugleichen.

Verwenden Sie für den vertikalen Raum nur Bruchteile der Körperschriftgröße. Ich neige dazu, die Dinge einfach zu halten und eine Skala von 0,25 zu verwenden, aber es gibt sie mehrere andere Skalen, die Sie verwenden können . Wenn die Körperschriftgröße beispielsweise 16px (1em) beträgt: 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. Dies ermöglicht die Auswahl von Schriftgrößen, indem Sie einfach die Skala wie I nach oben und unten bewegen wollen größeren oder kleineren Typ.

Apple nutzt Leerzeichen sehr gut, um seine Produkte hervorzuheben und zu präsentieren

06. Grids sind nicht nur CSS-Frameworks

Verrückt, richtig? Grids fanden zuerst im Design eine herausragende Rolle in dem, was jetzt heißt Internationaler typografischer Stil .

Ein Raster sollte verwendet werden, um:

Erstellen Sie Beziehungen zwischen Objekten
Stellen Sie ein Basissystem für die visuelle Ausrichtung bereit
Helfen Sie dabei, einen horizontalen und vertikalen Rhythmus zu erstellen
Helfen Sie dabei, ein optisches Gleichgewicht herzustellen

Alle diese Konzepte arbeiten zusammen, damit Sie ein besseres visuelles System für Ihre Benutzer erstellen können. Das von Ihnen ausgewählte Raster wirkt sich auf die Einheit des Designs aus. Die Auswahl eines Rasters, auf dessen Grundlage es am einfachsten zu implementieren ist, ist nicht unbedingt die beste Designauswahl für Ihre Inhalte und Benutzer. Am Ende ist es immer noch nur ein Werkzeug und wird nur so gut sein wie die Person, die es benutzt.

Don

Stellen Sie sich ein Raster nicht nur als CSS-Framework vor. Es ist ein Design-Tool, das für einen bestimmten Zweck verwendet werden sollte

07. Wenn alles betont wird, tut nichts

Es ist wie ein Gespräch mit einer Gruppe von Menschen, die Sie alle gleichzeitig anschreien, um verschiedene Dinge zu tun. Nur ein Element sollte den Schwerpunkt auf der Seite haben: das wichtigste. Die Betonung eines einzelnen Elements und eine klare Hierarchie ermöglichen den Lesern einen Fluss und sollten sie in die gewünschte Richtung weisen.

08. Bewahren Sie einen Inspirationsordner auf

Führen Sie eine Galerie mit all den Dingen, die Sie visuell inspirieren. Dies können Fotos, Videos, Poster, T-Shirts und Websites sein. Alles, was Ideen für eine Lösung des jeweiligen Designproblems hervorrufen könnte.

Dies dient nicht nur als Bezugspunkt, sondern zwingt Sie auch dazu, das Design ständig zu suchen und zu bewerten. Der einfache Vorgang, Designelemente auszuwählen und in einem Ordner zu speichern, zwingt Sie dazu, diese Muskeln für die Designanalyse zu verwenden.

Halten Sie eine Galerie der Inspiration. Wenn Sie von Fotos bis zu T-Shirts auf Fotos, Designs oder andere Elemente verweisen können, kann dies zu einer Idee für Ihre eigenen Designs führen

09. Beim Design dreht sich alles um Problemlösung

Sie sollten Design als eine Reihe von Problemen betrachten, die Lösungen erfordern. Alles auf der Seite sollte einen Grund haben, dort zu sein und ein bestimmtes Problem für den Benutzer oder das Design zu lösen. Ich habe die Tendenz, Features aus dem Feature-Set zu entfernen, bis das Problem, das ich löse, sehr offensichtlich wird.

Manchmal fällt es uns schwer, die Probleme zu benennen, anstatt zu einer Lösung zu springen. Rückwärts arbeiten hilft dabei wirklich. Wenn Sie beispielsweise entscheiden, ob etwas rot sein soll, denken Sie an die Gründe, aus denen Sie es rot haben wollten. Fragen Sie sich: Was versuche ich zu erreichen, indem ich es rot mache? Was war mein Denkprozess? Möglicherweise landen Sie wieder dort, wo Sie begonnen haben, aber Sie haben ein besseres Verständnis dafür, warum und was Sie tun.

10. Wissen, wie man über Design spricht und es kritisiert

Ein sicherer Weg, einen Designer zu ärgern, besteht darin, ihm zu sagen, dass ein roter Block blau sein sollte, dass ein Textstück verschoben werden sollte oder dass das Logo größer werden sollte. Ich denke du kommst auf die Idee.

Der beste Weg, um konstruktives Feedback zu geben, besteht darin, auf die Probleme mit dem Design aufmerksam zu machen. Haben Sie Beweise basierend auf den Benutzern, dem Site-Flow, den Designzielen und den visuellen Prinzipien, um die Probleme zu unterstützen, die Sie beim Design sehen. Dies unterstützt dann Ihre Meinung darüber, was sich ändern sollte, und bietet eine solide Grundlage für den Erfolg des Benutzers sowie des Designs.

Dann wird der Designer hoffentlich mit Ihnen zusammenarbeiten, um eine Lösung für das Problem zu finden. Dies ist Ihre Gelegenheit, eine Lösung vorzuschlagen. Bitten Sie einfach nicht darum, das Logo größer zu machen.

Ressourcen und Workshop

Wenn Sie dies interessant fanden, schauen Sie sich meine an Design für Entwicklerressourcen und Lernpfade entwerfen . Ich würde dich auch gerne in einem der beiden sehen online Version oder an der Face-to-Face-Version der Werkstatt.

Wörter: Kyle Fiedler

Kyle Fiedler ist Designer beioughtbot und hilft beim Erstellen von Rails- und iOS-Anwendungen. Er hat seit dem Dotcom-Boom (und der Büste) in irgendeiner Form entworfen und entwickelt und ist seitdem nicht stehen geblieben.

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 244.