To Designers With Love (Ein Brief eines Frontend-Entwicklers)

Liebe Designer,

Dieser Brief brodelt seit Jahren. Teile davon wurden über einen langen Zeitraum in Wort und Schrift an verschiedene Designer weitergegeben.

Allerdings habe ich mich immer gefürchtet, es zu veröffentlichen, aus Angst, dass es den aktuellen Designer oder Kunden, mit dem ich arbeite, in Mitleidenschaft ziehen könnte. Bevor ich fortfahre, möchte ich betonen, dass dies keine spezifische Beschwerde ist, sondern eine detaillierte Liste von 18 Jahren Meinungsverschiedenheiten.

Wir arbeiten seit fast zwei Jahrzehnten zusammen, und jede PSD-Datei, die Sie mir geschickt haben, hatte (mehr oder weniger) die gleichen Probleme. Verzeihen Sie mir dann die Unanständigkeit, Ihnen Ihren Beruf beizubringen.

Ich maße mir nicht an, Ihnen etwas über Grafik oder Ästhetik beizubringen. Ich werde mich nicht mit Typografie, Lesbarkeit oder der Verwendung von Leerraum befassen.

Stattdessen möchte ich erklären, wie die Früchte Ihrer Arbeit meine beeinflussen.

Ich möchte Sie daran erinnern, was erforderlich ist, um Designs als pixelgenaue Webseiten zu reproduzieren. Ich möchte Ihnen sagen, wie Ihre Designdateien zur Dokumentation verwendet werden und wie die von Ihnen erstellten Bilder die verwendeten Technologien bestimmen – bis hin zu den grundlegenden Ebenen der Skalierbarkeit und Leistung.

Außerdem möchte ich demonstrieren, was schnell und einfach erledigt werden kann und was einen Overhead verursacht, der die gesamte Produktion in die Knie zwingt.

Und vor allem möchte ich Sie daran erinnern, dass das Bild , das Sie gerade erstellen, zu einem lebendigen Ding wird, das interagiert und reagiert, das mit Tausenden von verschiedenen Personen kommuniziert, das sie unterrichten und von ihnen lernen muss sie so mühelos wie möglich. Sowohl dafür als auch für sie.

Design für die Dokumentation

Zunächst möchte ich Sie daran erinnern, dass die von Ihnen erstellten PSD-Dateien nicht nur die Quelle der Bilder sind, die der Kunde genehmigen muss, sondern auch technische Dokumentation und Quellmaterialien für Entwickler. Halten Sie Ihre Ebenen und Gruppen daher bitte ordentlich, organisiert und benannt .

Beschriften Sie Ihr Design. Erstellen Sie entweder eine separate Datei mit den von Ihnen verwendeten Konventionen oder notieren Sie sie in einer separaten verborgenen Ebene.

Sagen Sie mir, welche Schriftarten Sie wofür verwendet haben. Lassen Sie mich wissen, welche Farben, Abstände und Kontexte verwendet werden sollen. Ich muss wissen.

Ich muss auch wissen, was zu extrapolieren ist, wenn für ein bestimmtes Merkmal kein Design erstellt wurde.

Ich denke, was ich sagen will, ist: Erstellen Sie, wenn möglich, einen kurzen Styleguide für das Produkt, das Sie entwerfen.

Fügen Sie für uns beide beim Hinzufügen von Standardtextblöcken – wie z. B. Titeln – ein Rechteck dahinter hinzu, um den Abstand um sie herum anzuzeigen. Das sollte es Ihnen ermöglichen, sie jedes Mal konsistent zu platzieren. Wenn dies zu viel Arbeit ist, geben Sie zumindest an, welches Beispiel im Dokument kanonisch ist.

Ich kann Ihnen nicht sagen, wie oft ich finde, dass Titel mit dem Auge platziert werden, damit sie visuell zu der einzelnen Instanz passen, in der sie platziert werden, aber wenn sie gemessen werden, zeigen sie, dass jeder seinen eigenen individuellen Abstand hat.

Dasselbe gilt für Inhaltsblöcke. Wenn Sie eine Liste mit verschiedenen Inhaltsblöcken haben, verteilen Sie diese bitte einheitlich.

Ich erzähle Ihnen mehr im Abschnitt Inhaltliche Gestaltung , aber gehen Sie bitte nicht davon aus, dass Ihre Titel immer in einer Zeile stehen, und verwenden Sie diese Informationen in der Datei.

Ich stoße immer wieder auf diese Titel, die eine Schriftgröße von 22 Pixel und eine Zeilenhöhe von 92 Pixel haben (offensichtlich vom Titel der Hauptseite kopieren und einfügen). Die von Ihnen gewählten Einstellungen sind relevant, auch wenn sie die exportierte Datei optisch nicht verändern.

Design für Technologie

Dabei gibt es zwei Seiten: Was machbar ist und was dem Medium angemessen ist .

Während wir schnell den Punkt erreichen, an dem für die Website-Entwicklung technisch alles möglich sein wird (wenn nichts anderes, kann ich es immer noch Pixel für Pixel mit Canvas zeichnen), sind viele dieser Lösungen noch nicht produktionsreif.

Die Tatsache, dass Sie ein Beispiel gefunden haben, in dem jemand erfolgreich WebGL 3D mit CSS-Blur plus Filtermasken für eine Demoseite kombiniert hat, bedeutet nicht, dass Sie dieses als Vollfenster-Parallax-Panel in einer Single-Page-Anwendung verwenden können.

Und wenn Sie wirklich auf dem neuesten Stand sein wollen, wenden Sie sich bitte an Ihren Entwickler, bevor Sie das Design zur Genehmigung einreichen. Andernfalls wird es schwierig, den Kunden dazu zu bringen, sich mit weniger zufrieden zu geben.

Wenn Sie die Kanten jedoch wirklich testen möchten und es zum Spaß ausprobieren möchten, wenden Sie sich privat an mich. Ich liebe es, solche Dinge zu erschaffen, genauso wie du. Stecken Sie das Zeug einfach nicht in ein budgetiertes Produktionsprojekt.

Über diese Dinge hinaus – über das Testen der Grenzen dessen hinaus, was getan werden kann, versuchen Sie, sensibel und vernünftig zu sein in Bezug auf das, was getan werden sollte .

Sie sind kein Grafiker; Du bist mehr als das, du bist ein Designer.

Sie müssen es nicht nur so gestalten, dass es auf eine bestimmte Weise aussieht, Sie müssen es auch so gestalten, dass es auf eine bestimmte Weise läuft , kommuniziert und sich auf eine bestimmte Weise verhält.

Um auf das Klischee hinzuweisen, das Designern überall bekannt ist: Was nützt ein wunderschön aussehender Stuhl, wenn niemand darauf sitzen kann ?

Sie müssen Ladegeschwindigkeit, Ausführungsgeschwindigkeit und Benutzerfreundlichkeit in Ihr Design integrieren, damit es ein Design und kein Bild ist.

Versuchen Sie, so viel wie möglich nur mit HTML und CSS zu erreichen. Vermeiden Sie gut aussehende Funktionen, die in Photoshop verfügbar sind. Verwenden Sie kein Mischen! Verwenden Sie kein faux fett und faux kursiv.

Wenn Sie nicht beabsichtigen, dass das Element ein Bild ist, verwenden Sie überhaupt keine Filter – außer den einfachsten Schatten.

Lassen Sie mich die Farben nicht berechnen oder auswählen, weil Sie gemischte Farbfüllungen verwendet haben. Bitte täuschen Sie keine transparenten Bilder vor, indem Sie Overlay-Blending verwenden; Ich brauche eigentlich ein transparentes Bild vor Ort.

Wenn wir ein Front-End-Framework wie Bootstrap verwenden, werden viele dieser Probleme bereits gelöst, also erfahren Sie, wie es gemacht wird und wie es geändert werden kann. Gehen Sie nicht einfach so hin und her und entwerfen Sie etwas, das nichts damit zu tun hat.

Wenn Ihr Design nicht mit dem übereinstimmt, was das Framework tut, dann ist die Implementierung nicht die Implementierung des Designs. Stattdessen überschreiben wir das Framework selektiv, damit es unser Design nicht durcheinander bringt, und implementieren es dann von Grund auf neu. Der Arbeitsaufwand verdoppelt sich statt sich zu halbieren.

Und schließlich: Verwenden Sie nicht mehr als drei Schriftarten – oder Schriftartvarianten – auf der Website. Wenn Sie sechs verschiedene Strichstärken benötigen, jede mit ihren eigenen regulären und kursiven Varianten, entwerfen Sie nicht mehr für das Web.

Design für Interaktivität

Dies ist eine riesige. Und dieser Brief wurde ursprünglich ausschließlich für dieses Thema geschrieben. Sie müssen wirklich alle Möglichkeiten kennen und verstehen, wie Benutzer und Funktionen interagieren können.

Beginnen wir mit den einfachsten Dingen: Links.

Links haben nicht nur zwei Zustände.

In der Navigation, die ich erhalte, stellen Sie immer Designs für Links und einen aktiven Link (aktuelle Seite) bereit.

In anderen Fällen geben Sie normalerweise Basis- und Hover -Zustände an.

Wenn Sie möglichst benutzerfreundlich sein möchten, sollten Sie unterschiedliche Designs für Basis-, Schwebe- und Fokuszustände haben ( besucht und aktiv sind auch für UX wünschenswert). Und für die Navigation haben ein Link und ein aktiver Link jeweils alle oben genannten Zustände .

Oh, und wagen Sie es nicht, ein Link-Layout zwischen Zuständen zu ändern (unterschiedliche Rahmenbreite, Polsterung und dergleichen).

Wenn es nicht wie eine Schaltfläche aussieht, hat es auch keinen Hintergrund. Zeitraum. Das Auffüllen eines Inline-Textelements ist ein Chaos, und nicht aufgefüllte Texthintergründe werden niemals ausreichen.

Da wir dies auf Mobilgeräten verwenden werden, stellen Sie sicher, dass zwischen separaten interaktiven Elementen genügend Leerraum vorhanden ist und dass jede Hitbox ausreichend groß ist. Ich denke, dass ein Minimum von 42 Pixeln auf jeder Achse die Norm ist.

Zeichnen Sie ein unsichtbares Rechteck oder eine verborgene Ebene mit Hitboxen; Stellen Sie sicher, dass sie sich nicht überschneiden und dass Benutzerinteraktionen eindeutig sind.

Formularelemente sind noch schlimmer.

Der häufigste Fall, den ich sehe, ist mit den Optionsfeldern und Kontrollkästchen. Die normalen sind hässlich! Sie entwerfen also Ihre eigenen und geben mir einen aktivierten und einen nicht aktivierten Zustand und betrachten sich als erledigt.

Es gibt jedoch eine vollständige mehrdimensionale Zustandstabelle für ein Kontrollkästchen, und jeder sollte dem Benutzer visuell angezeigt werden.

Wir haben folgende Zustände:

• Aktiviert oder deaktiviert
• Schweben oder nicht
• Fokus oder nicht
• Aktiviert oder deaktiviert
• Fehler oder nicht

Jeder von ihnen kann mit den anderen kombiniert werden.

Disabled verhindert einige Kombinationen (hover und focus sind normalerweise irrelevant, wenn sie deaktiviert sind), aber nicht alle (checked-disabled-error ist ein absolut gültiger und informativer Zustand für ein Kontrollkästchen). Am Ende haben wir also 16 aktivierte und vier deaktivierte Zustände, was insgesamt mindestens 20 verschiedene Zustände ergibt. Zum Beispiel sind die Zustände, die Sie mir normalerweise geben, in diesem Setup aktiviert-nicht-nicht-aktiviert-nicht und nicht aktiviert-nicht-nicht-aktiviert-nicht.

Andere Formularelemente haben möglicherweise keinen aktivierten/nicht aktivierten Zustand, können aber leer oder nicht leer sein (Platzhaltertext anzeigen). Sie können auch einen komplexeren Informationszustand haben, so dass der Fehler-oder-nicht-Fall so komplex sein kann wie der Neutral-Warn-Fehler-Erfolg.

Dann sollten Sie obendrein über obligatorische oder optionale Kennzeichen sowie ein klar definiertes Layout und Design für Beschriftungen, Eingabehilfen und Fehlertexte verfügen.

Und wenn Sie wirklich benutzerfreundlich sein wollen, brauchen Sie Pristine-Set-Dirty-Zustände, die angeben, dass der Benutzer die Daten nie bereitgestellt hat oder die Daten bereits gespeichert sind oder geändert, aber noch nicht gespeichert wurden.

Was ich sagen will ist: Interaktivität zu entwerfen ist schwierig. Und wenn Sie das Aussehen der Optionsfelder ändern möchten, tun Sie dies nicht leichtfertig mit zwei Zuständen.

Nur noch ein letzter Punkt zum Design für Interaktivität: Entscheiden Sie, wie Interaktion aussieht. Das heißt, entscheiden Sie, welche Konventionen Sie für interaktive Elemente verwenden möchten, und verwenden Sie sie nicht für andere Elemente.

Nein, Sie dürfen Ihre primäre Markenfarbe nicht verwenden, um Links anzuzeigen, insbesondere wenn Sie dieselbe Lösung verwenden, um wichtige Inhalte hervorzuheben!

Design für Inhalte

Das ideale Layout jedes mit Lipsum- Inhalten gefüllten Elements ist gut genug, um dem Kunden ein Bild zu präsentieren, um eine Bestätigung des visuellen Stils zu erhalten. Aber die inhaltliche Gestaltung beginnt und endet dort weder.

Wenn Sie eine ungefähre Vorstellung davon haben, was Sie mit dem Inhaltslayout machen möchten, denken Sie daran, dass Sie mit dynamischen Inhalten arbeiten. Es gibt zwei Fälle, die Sie für jeden Inhalt überprüfen müssen:

• Was ist, wenn es zu viel davon gibt?
• Was ist, wenn zu wenig davon vorhanden ist (oder ganz fehlt)?

Überprüfen Sie, was passiert, wenn der Titel lächerlich kurz oder ungewöhnlich lang ist. Wie soll der Inhaltsblock aussehen, wenn entscheidende Elemente fehlen? Was ist, wenn kein Bild vorhanden ist?

Wenn es für einen Seitenabschnitt keinen Inhalt gibt, entfernen wir den gesamten Abschnitt – Titel, Container und alles – oder behalten wir den Abschnitt bei und zeigen etwas an wie: „Noch keine Artikel, schauen Sie später noch einmal vorbei?“ Noch besser: „Möchten Sie benachrichtigt werden, wenn dieser Inhalt eintrifft? Melden Sie sich für unseren Newsletter an!"

Treffen Sie die Entscheidungen! Dann entwerfen Sie diese Dinge!

Wenn Sie einen Feed oder Inhalte entwerfen, die aus einer externen oder dynamischen Quelle geladen werden, vergessen Sie nicht, alle Fehler und Benachrichtigungen einzuschließen. Entwerfen Sie den Metainhalt für die Seitenbenachrichtigung tatsächlich so, dass er zeigt, wie er global aussieht, und halten Sie sich dann an diese Designkonventionen, um den Benutzer zu benachrichtigen, falls etwas schief geht.

Vermeiden Sie Schaltflächen mit fester Breite und Textblöcke mit fester Höhe. Und, falls ich es noch nicht gesagt habe, wenn Sie glauben, dass es immer nur eine Textzeile sein wird, liegen Sie falsch! Überprüfen Sie jetzt, wie Sie es am besten mehrzeilig machen können.

Achten Sie darauf, dass gleiche Inhalte die gleiche Struktur haben.

Wenn derselbe Titel an mehreren Stellen sichtbar ist, fetten Sie nicht ein Wort an einer Stelle und ein anderes an einer anderen Stelle fett!

Versuchen Sie sogar, die Formatierung von Strukturen innerhalb von Titeln ganz zu vermeiden. Ebenso sollten Sie den Text an einer Stelle nicht manuell umbrechen, sondern an einer anderen anders. Unterbrechen Sie Text nicht manuell!

Diese Dinge können Ihr Design verbessern, aber denken Sie daran, dass der Inhalt höchstwahrscheinlich über ein CMS eingegeben wird und die Person, die ihn eingibt, möglicherweise nicht sieht, wie er aussieht, bis er veröffentlicht wird, oder möglicherweise nicht einmal über die Tools verfügt, um ihn manuell zu brechen, oder den Text formatieren.

Entwerfen Sie mit den gleichen Einschränkungen wie der endgültige Inhalt – Textcontainer mit fester Breite und automatischer Zeilenumbruch. Wenn es so hässlich aussieht, ist das Design nicht gut.

Design für Reaktionsfähigkeit

Das hat sich in letzter Zeit stark weiterentwickelt. Zumindest in den Fällen, in denen tatsächlich mobil gedacht ist. Mehr und mehr lassen wir es von Bootstrap herausfinden und kleben Pflaster auf die Risse.

Unabhängig davon gibt es ein paar einfache Prinzipien, die Sie kennen müssen.

Erstens sind die mobilen und Desktop-Varianten keine separaten Seiten. Ich weiß, dass du das weißt. Sie sind einfach Reflows derselben Seite.

Einfach gesagt, es ist dasselbe wie mit linksbündigem Text zu arbeiten. Der Satz ändert nicht die Reihenfolge der Wörter oder Buchstaben, nur weil Sie ihn in einen kleineren Behälter gelegt haben.

Außerdem sollten Inhaltsgruppen für alle Layouts freigegeben werden. Stellen Sie beim Hinzufügen von Spalten sicher, dass die Spaltenumbrüche konsistent sind.

Außerdem sollten Ihre Konventionen für verschiedene Versionen der Seite der gleichen Struktur folgen. Das heißt, wenn zwei Elemente auf einem Desktop identisch aussehen, sollten sie auch auf Mobilgeräten identisch sein.

Oh, und wenn Sie Parallaxe wollen, stellen Sie bitte ein Bild zur Verfügung, das groß genug ist, um sich zu bewegen. Wenn Sie das Bild so anpassen oder zuschneiden, dass es auf der Datei, die Sie dem Client zeigen, genau aussieht, muss ich nichts bewegen.

Ausnahmen gestalten

Ausnahmen sind natürlich immer möglich. Darüber hinaus sind sie notwendig, damit das Produkt attraktiv und effektiv aussieht. Fügen Sie sie jedoch nicht Box für Box beim ersten Durchgang hinzu.

Wenn Sie feststellen, dass Sie immer wieder dasselbe Designproblem lösen, wird dies nicht funktionieren, insbesondere wenn Sie sich in jedem Fall für eine andere Lösung entscheiden.

Sobald Sie alle oben genannten Schritte durchgeführt haben, sollten Sie ein effizientes, stabiles und konsistentes (wenn auch etwas langweiliges) Design erhalten. Jetzt ist es an der Zeit, die Dinge aufzupeppen. Betrachten Sie eine Seite als Ganzes und sprechen Sie mit dem Kunden, um die Moneyshots zu identifizieren – die Artikel, die ihm das meiste für sein Geld einbringen.

Wir arbeiten seit Jahren zusammen und unsere Kunden waren immer mit dem Endergebnis zufrieden.

Natürlich springe ich ein, wenn Sie einige dieser Punkte vermissen, und wenn die Verwendung eines komplexen Designs gerechtfertigt ist, werde ich die Rendering-Logik bei Bedarf in JavaScript schreiben.

Ich springe ein und rechtfertige den Mehraufwand ggf. gegenüber dem Auftraggeber. Verdammt, ich entwerfe seit Ewigkeiten Formulare und Interaktivität zusätzlich zu erhaltenen Designs, also wird das kein Problem sein.

Ich hoffe nur, dass Sie, nachdem Sie dies gelesen haben, einige dieser Hinweise berücksichtigen, wenn wir das nächste Mal zusammenarbeiten. Ich hoffe, sie informieren Ihre Arbeit und geben Ihnen Orientierung, wenn Sie nicht wissen, was Sie tun sollen. Ich möchte, dass Sie verstehen, dass mir unsere Beziehung wichtig ist und dass ich dies nicht geschrieben habe, um Sie zu verletzen, sondern um unsere Beziehung zu verbessern.

Mit Liebe,

Ihr Frontend-Entwickler