Top Ten der Front-End-Designregeln für Entwickler

Als Frontend-Entwickler besteht unsere Aufgabe im Wesentlichen darin, Designs per Code in die Realität umzusetzen. Verständnis und Kompetenz in Design sind dabei ein wichtiger Bestandteil. Leider ist es leichter gesagt als getan, das Front-End-Design wirklich zu verstehen. Codierung und ästhetisches Design erfordern ziemlich unterschiedliche Fähigkeiten. Aus diesem Grund sind einige Front-End-Entwickler im Designaspekt nicht so kompetent, wie sie es sein sollten, und infolgedessen leidet ihre Arbeit.

Mein Ziel ist es, Ihnen einige einfach zu befolgende Regeln und Konzepte von einem Front-End-Entwickler zum anderen zu geben, die Ihnen helfen, ein Projekt von Anfang bis Ende zu durchlaufen, ohne das zu vermasseln, woran Ihre Designer so hart gearbeitet haben (oder möglicherweise Sie können sogar Ihre eigenen Projekte mit anständigen Ergebnissen entwerfen).

Natürlich werden Sie diese Regeln in der Zeit, die Sie zum Lesen eines Artikels benötigen, nicht von schlecht zu großartig machen, aber wenn Sie sie auf Ihre Arbeit anwenden, sollten sie einen großen Unterschied machen.

Machen Sie Sachen in einem Grafikprogramm

Es ist wirklich selten, dass Sie ein Projekt abschließen und von Anfang bis Ende gehen und dabei jede einzelne ästhetische Mutation in den Designdateien beibehalten. Und leider sind Designer nicht immer in der Nähe, um schnell eine Lösung zu finden.

Daher kommt bei jedem Front-End-Job immer ein Punkt, an dem Sie am Ende einige ästhetische Anpassungen vornehmen müssen. Ob es darum geht, das Häkchen zu setzen, das angezeigt wird, wenn Sie das Kontrollkästchen aktivieren, oder ein Seitenlayout zu erstellen, das die PSD übersehen hat, Frontender erledigen oft diese scheinbar geringfügigen Aufgaben. Natürlich wäre dies in einer perfekten Welt nicht der Fall, aber ich muss noch eine perfekte Welt finden, daher müssen wir flexibel sein.

Für diese Situationen sollten Sie immer ein Grafikprogramm für Mockups verwenden. Es ist mir egal, welches Tool Sie wählen: Photoshop, Illustrator, Fireworks, GIMP, was auch immer. Versuchen Sie nur nicht, aus Ihrem Code zu entwerfen. Verbringen Sie eine Minute damit, ein echtes Grafikprogramm zu starten und herauszufinden, wie es aussehen soll, gehen Sie dann zum Code und setzen Sie es um. Sie sind vielleicht kein erfahrener Designer, aber Sie werden am Ende immer noch bessere Ergebnisse erzielen.

Passen Sie das Design an, versuchen Sie nicht, es zu übertreffen

Ihre Aufgabe ist es nicht, mit der Einzigartigkeit Ihres Häkchens zu beeindrucken; Ihre Aufgabe ist es, es an den Rest des Designs anzupassen.

Wer nicht viel Designerfahrung hat, kann leicht versucht sein, dem Projekt mit scheinbar unbedeutenden Details seinen Stempel aufzudrücken. Überlassen Sie das bitte den Designern.

Anstatt zu fragen „Sieht mein Häkchen toll aus?“ Sie sollten fragen: „Wie gut passt mein Häkchen zum Design?“

Ihr Fokus sollte immer darauf liegen, mit dem Design zu arbeiten, nicht darauf, es zu übertreffen.

Typografie macht den Unterschied

Sie werden überrascht sein zu wissen, wie stark das endgültige Erscheinungsbild eines Designs von der Typografie beeinflusst wird. Sie wären genauso überrascht zu erfahren, wie viel Zeit Designer dafür aufwenden. Dies ist kein „Pick-it-and-go“-Unterfangen, sondern es wird viel Zeit und Mühe investiert.

Wenn Sie in eine Situation geraten, in der Sie sich tatsächlich für Typografie entscheiden müssen, sollten Sie sich ausreichend Zeit dafür nehmen. Gehen Sie online und recherchieren Sie nach guten Schriftkombinationen. Verbringen Sie ein paar Stunden damit, diese Paarungen auszuprobieren und sicherzustellen, dass Sie am Ende die beste Typografie für das Projekt erhalten.

Wenn Sie mit einem Design arbeiten, achten Sie darauf, dass Sie sich an die typografischen Entscheidungen des Designers halten. Das bedeutet nicht nur die Auswahl der Schriftart. Achten Sie auf Zeilenabstand, Buchstabenabstand usw. Übersehen Sie nicht, wie wichtig es ist, zur Typografie des Designs zu passen.

Stellen Sie außerdem sicher, dass Sie die richtigen Schriftarten an der richtigen Stelle verwenden. Wenn der Designer Georgia nur für Überschriften und Open Sans für den Text verwendet, sollten Sie Georgia nicht für den Text und Open Sans für Überschriften verwenden. Typografie kann Ästhetik leicht machen oder brechen. Nehmen Sie sich genügend Zeit, um sicherzustellen, dass Sie der Typografie Ihres Designers entsprechen. Es wird gut investierte Zeit sein.

Das Front-End-Design verträgt keinen Tunnelblick

Sie werden wahrscheinlich kleine Teile des Gesamtdesigns machen.

Ein Beispiel, mit dem ich gearbeitet habe, ist das Häkchen für ein Design zu setzen, das benutzerdefinierte Kontrollkästchen enthält, ohne sie aktiviert anzuzeigen. Es ist wichtig, sich daran zu erinnern, dass die Teile, die Sie herstellen, kleine Teile eines Gesamtdesigns sind. Machen Sie Ihre Kontrollen so wichtig, wie ein Kontrollhäkchen auf einer Seite aussehen sollte, nicht mehr und nicht weniger. Bekomme keinen Tunnelblick über deinen einen kleinen Teil und mach es zu etwas, was es nicht sein sollte.

Eine gute Technik dafür ist es, einen Screenshot des bisherigen Programms oder der Designdateien zu machen und darin in dem Kontext zu entwerfen, in dem es verwendet wird. Auf diese Weise sehen Sie wirklich, wie es sich auf andere Designelemente auf der Seite auswirkt und ob es richtig zu seiner Rolle passt.

Beziehungen und Hierarchie

Achten Sie besonders darauf, wie das Design mit der Hierarchie funktioniert. Wie nah sind die Titel am Textkörper? Wie weit sind sie vom Text darüber entfernt? Wie scheint der Designer anzugeben, welche Elemente/Titel/Textkörper verwandt sind und welche nicht? Sie tun dies normalerweise, indem sie verwandte Inhalte zusammenfassen, unterschiedliche Leerräume verwenden, um Beziehungen anzuzeigen, ähnliche oder kontrastierende Farben verwenden, um verwandte/unverwandte Inhalte anzuzeigen, und so weiter.

Es ist Ihre Aufgabe sicherzustellen, dass Sie erkennen, wie das Design Beziehungen und Hierarchien herstellt, und sicherzustellen, dass sich diese Konzepte im Endprodukt widerspiegeln (einschließlich für Inhalte, die nicht speziell entworfen wurden, und/oder dynamische Inhalte). Dies ist ein weiterer Bereich (wie Typografie), in dem es sich lohnt, sich zusätzliche Zeit zu nehmen, um sicherzustellen, dass Sie gute Arbeit leisten.

Seien Sie wählerisch in Bezug auf Leerzeichen und Ausrichtung

Dies ist ein großartiger Tipp, um Ihre Designs zu verbessern und/oder die Designs anderer besser umzusetzen: Wenn das Design Abstände von 20 Einheiten, 40 Einheiten usw. zu verwenden scheint, stellen Sie sicher, dass jeder Abstand ein Vielfaches von 20 Einheiten ist.

Dies ist eine wirklich umwerfend einfache Möglichkeit für jemanden, der kein Auge für Ästhetik hat, um schnell eine signifikante Verbesserung zu erzielen. Stellen Sie sicher, dass Ihre Elemente pixelgenau ausgerichtet sind und dass der Abstand um jede Kante jedes Elements so gleichmäßig wie möglich ist. Wo dies nicht möglich ist (z. B. an Stellen, an denen Sie zusätzlichen Platz benötigen, um die Hierarchie anzuzeigen), machen Sie sie zu genauen Vielfachen des Abstands, den Sie an anderer Stelle verwenden, z. B. zweimal Ihr Standardwert, um eine gewisse Trennung zu erstellen, dreimal, um mehr zu erstellen , und so weiter.

Viele Entwickler erreichen dies für bestimmte Inhalte in den Designdateien, aber wenn es um das Hinzufügen/Bearbeiten von Inhalten oder das Implementieren dynamischer Inhalte geht, können die Abstände überall liegen, weil sie nicht wirklich verstanden haben, was sie implementiert haben.

Geben Sie Ihr Bestes, um zu verstehen, wie der Designer Whitespace verwendet hat, und folgen Sie diesen Konzepten in Ihrem Build. Und ja, verbringen Sie Zeit damit. Wenn Sie der Meinung sind, dass Ihre Arbeit erledigt ist, gehen Sie zurück und messen Sie den Abstand, um sicherzustellen, dass Sie alles so weit wie möglich ausgerichtet und gleichmäßig verteilt haben, und probieren Sie dann den Code mit vielen unterschiedlichen Inhalten aus, um sicherzustellen, dass er flexibel ist .

Wenn Sie nicht wissen, was Sie tun, tun Sie weniger

Ich gehöre nicht zu den Leuten, die denken, dass jedes Projekt minimalistisches Design verwenden sollte, aber wenn Sie sich in Ihrem Design nicht sicher sind und etwas hinzufügen müssen, dann ist weniger mehr.

Der Designer kümmerte sich um das Wesentliche; Sie müssen nur kleinere Füller machen. Wenn Sie nicht sehr gut im Designen sind, ist es eine gute Idee, so wenig wie möglich zu tun, damit dieses Element funktioniert. Auf diese Weise bringen Sie weniger von Ihrem eigenen Design in die Arbeit des Designers ein und beeinflussen sie so wenig wie möglich.

Lassen Sie die Arbeit des Designers im Mittelpunkt stehen und Ihre Arbeit in den Hintergrund treten.

Die Zeit macht uns alle zum Narren

Ich verrate Ihnen ein Geheimnis über Designer: 90 Prozent (oder mehr) von dem, was sie tatsächlich auf Papier oder eine Photoshop-Leinwand bringen, ist nicht so toll.

Sie werfen weit mehr weg, als Sie jemals sehen werden. Es braucht oft viele Überarbeitungen und ein Gefummel an einem Design, um es an den Punkt zu bringen, an dem sie sogar den Typen in der Nebenkabine ihre Arbeit sehen lassen würden, ganz zu schweigen vom eigentlichen Kunden. Normalerweise gelangt man nicht in einem Schritt von einer leeren Leinwand zu einem guten Design; Dazwischen gibt es eine Menge Iterationen. Menschen leisten selten gute Arbeit, bis sie das verstehen und in ihrem Prozess berücksichtigen.

Wie setzt man das um? Eine wichtige Methode ist es, sich Zeit zwischen den Versionen zu nehmen. Arbeite, bis es wie etwas aussieht, das dir gefällt, und lege es dann weg. Geben Sie ihm ein paar Stunden Zeit (noch besser ist es, ihn über Nacht stehen zu lassen), öffnen Sie ihn dann wieder und werfen Sie einen Blick darauf. Sie werden erstaunt sein, wie anders es mit frischen Augen aussieht. Sie werden schnell verbesserungswürdige Bereiche erkennen. Sie werden so klar sein, dass Sie sich fragen werden, wie Sie sie möglicherweise überhaupt übersehen haben.

Tatsächlich führt einer der besseren Designer, die ich kenne, diese Idee noch viel weiter. Er würde damit beginnen, drei verschiedene Entwürfe zu machen. Dann wartete er mindestens 24 Stunden, sah sie sich noch einmal an und warf sie alle weg und fing bei einer vierten von vorne an. Als nächstes würde er einen Tag zwischen jeder Iteration einplanen, da es immer besser wurde. Erst als er es eines Morgens öffnete und total glücklich war, oder zumindest so nah, wie ein Designer jemals total glücklich sein kann, schickte er es an den Kunden. Dies war der Prozess, den er für jedes Design verwendete, das er erstellte, und es leistete ihm sehr gute Dienste.

Ich erwarte nicht, dass Sie so weit gehen, aber es zeigt, wie hilfreich Zeit ohne „Augen auf das Design“ sein kann. Es ist ein integraler Bestandteil des Designprozesses und kann sprunghaft Verbesserungen bewirken.

Pixel sind wichtig

Sie sollten alles in Ihrer Macht stehende tun, um das ursprüngliche Design in Ihrem fertigen Programm bis auf den letzten Pixel wiederzugeben.

In manchen Bereichen kann man nicht perfekt sein. Beispielsweise ist Ihre Kontrolle über den Buchstabenabstand möglicherweise nicht ganz so genau wie die des Designers, und ein CSS-Schatten entspricht möglicherweise nicht genau einem Photoshop-Schatten, aber Sie sollten trotzdem versuchen, so nah wie möglich zu kommen. Für viele Aspekte des Designs können Sie wirklich pixelgenaue Präzision erzielen. Dies kann einen großen Unterschied im Endergebnis machen. Ein Pixel hier und da scheint nicht viel zu sein, aber es summiert sich und beeinflusst die Gesamtästhetik viel mehr, als Sie denken. Also behalte es im Auge.

Es gibt eine Reihe von [Tools], mit denen Sie Originaldesigns mit Endergebnissen vergleichen können, oder Sie können einfach Screenshots machen und sie in die Designdatei einfügen, um jedes Element so genau wie möglich zu vergleichen. Legen Sie einfach den Screenshot über das Design und machen Sie es halbtransparent, damit Sie die Unterschiede sehen können. Dann wissen Sie, wie viel Anpassung Sie vornehmen müssen, um es genau richtig zu machen.

Rückmeldung bekommen

Es ist schwer, ein „Auge für Design“ zu bekommen. Noch schwieriger ist es, es alleine zu schaffen. Sie sollten den Input anderer suchen, um wirklich zu sehen, wie Sie Verbesserungen vornehmen können.

Ich schlage nicht vor, dass Sie sich Ihren Nachbarn schnappen und um Rat fragen, ich meine, Sie sollten echte Designer konsultieren und sie Ihre Arbeit kritisieren und Vorschläge machen lassen.

Es erfordert etwas Mut, dies zu tun, aber letztendlich ist es eines der wirksamsten Dinge, die Sie tun können, um das Projekt kurzfristig zu verbessern und Ihr Können langfristig zu verbessern.

Auch wenn Sie nur ein einfaches Häkchen für die Feinabstimmung benötigen, gibt es viele Leute, die bereit sind, Ihnen zu helfen. Egal, ob es sich um einen befreundeten Designer oder ein Online-Forum handelt, suchen Sie nach qualifizierten Personen und holen Sie sich deren Feedback ein.

Es mag zeitaufwändig klingen und zu Reibereien zwischen Ihnen und Ihren Designern führen, aber im Großen und Ganzen lohnt es sich. Gute Frontend-Entwickler verlassen sich auf wertvollen Input von Designern, auch wenn sie ihn nicht gerne hören.

Daher ist es wichtig, eine konstruktive Beziehung zu Ihren Designern aufzubauen und zu pflegen. Sie sitzen alle im selben Boot. Um die bestmöglichen Ergebnisse zu erzielen, müssen Sie bei jedem Schritt zusammenarbeiten und kommunizieren. Die Investition in den Aufbau von Beziehungen zu Ihren Designern lohnt sich, da es allen hilft, bessere Arbeit zu leisten und alles pünktlich auszuführen.

Fazit

Zusammenfassend ist hier eine kurze Liste mit Designtipps für Frontend-Entwickler:

• Design in einem Grafikprogramm. Entwerfen Sie nicht aus Code, nicht einmal die kleinen Dinge.
• Passen Sie das Design an. Achten Sie auf das ursprüngliche Design und versuchen Sie nicht, es zu verbessern, passen Sie es einfach an.
• Typografie ist riesig. Die Zeit, die Sie damit verbringen, sicherzustellen, dass es richtig ist, sollte seine Bedeutung widerspiegeln.
• Tunnelblick vermeiden. Stellen Sie sicher, dass Ihre Ergänzungen nur so stark hervorstechen, wie sie sollten. Sie sind nicht wichtiger, nur weil Sie sie entworfen haben.
• Beziehungen und Hierarchie: Verstehen Sie, wie sie im Design funktionieren, damit Sie sie richtig implementieren können.
• Leerzeichen und Ausrichtung sind wichtig. Machen Sie sie pixelgenau und gleichmäßig in allem, was Sie hinzufügen.
• Wenn Sie sich Ihrer Fähigkeiten nicht sicher sind, machen Sie Ihre Ergänzungen so minimal wie möglich.
• Nehmen Sie sich Zeit zwischen den Überarbeitungen. Kommen Sie später wieder, um Ihre Designarbeit mit neuen Augen zu sehen.
• Wo immer möglich, ist eine pixelgenaue Umsetzung wichtig.
• Sei mutig. Suchen Sie nach erfahrenen Designern, um Ihre Arbeit zu kritisieren.

Nicht jeder Frontend-Entwickler wird ein fantastischer Designer sein, aber jeder Frontend-Entwickler sollte zumindest in Sachen Design kompetent sein.

Sie müssen genug über Designkonzepte verstehen, um zu erkennen, was vor sich geht, und das Design richtig auf Ihr Endprodukt anwenden. Manchmal können Sie mit Blindkopien davonkommen, wenn Sie einen gründlichen Designer haben (und wenn Sie detailorientiert genug sind, um wirklich Pixel für Pixel zu kopieren).

Um jedoch große Projekte in vielen Variationen von Inhalten zum Strahlen zu bringen, müssen Sie verstehen, was dem Designer durch den Kopf geht. Sie müssen nicht nur sehen, wie das Design aussieht, Sie müssen wissen, warum es so aussieht, wie es aussieht , und auf diese Weise können Sie auf technische und ästhetische Einschränkungen achten, die sich auf Ihre Arbeit auswirken.

Auch als Frontend-Entwickler sollte es also immer Teil Ihrer regelmäßigen Selbstverbesserung sein, mehr über Design zu lernen.