Elemente des großartigen Webdesigns The Polish

Wenn ich Entwürfe zusammenstelle, mache ich das normalerweise in zwei Phasen - Layout und Polnisch. Während der Layoutphase platziere ich die Hauptobjekte auf der Seite, die normalerweise mit etwas abgeschlossen wird, das relativ vollständig aussieht. In der zweiten Phase - dem Polnischen - gehe ich das Design durch und passe Farben, Schreibvorgänge, Schatten, Ebenen an und säubere es im Allgemeinen. In diesem ersten Teil einer Reihe von Tutorials zum Thema Webdesign werden wir uns mit dem Polnischen beschäftigen.

Ein kurzes Vorwort

Im Gegensatz zu Photoshop-Effekten kann das Webdesign nicht mit einer Reihe von leicht wiederholbaren Schritten gelehrt werden. Wenn Sie die meisten großartigen Webdesigns betrachten, sind sie technisch nicht schwer zu reproduzieren. Sie könnten wahrscheinlich ein Design scannen, in Photoshop einfügen und dann das gleiche Design Layer für Layer replizieren. Der Trick kommt jedoch in erster Linie mit diesem Design.

Aus diesem Grund werde ich in diesen Tutorials zum Thema Webdesign verschiedene Techniken ausprobieren, um verschiedene Aspekte des Prozesses zu vermitteln, die ich persönlich durchführe, wenn ich eine Website entwerfe.

Heute schauen wir uns eine Seite an, die ich Anfang dieses Jahres unter dem Namen Not By The Hour zusammengestellt habe. Dies ist eine Unterwebsite für einen anderen Blog namens FreelanceSwitch. Zum Glück, als ich es vor Monaten entworfen habe, habe ich eine Version der PSD-Datei aufbewahrt, bevor und nachdem ich sie aufpoliert habe. So wie in einem Gewichtsverlust-Werbespot werden wir ein wenig vorher und nachher machen.

Bevor ich einige der Dinge erkläre, die ich zur Verbesserung der Website unternommen habe, ist es wichtig, das Vorher und Nachher zu betrachten.

VOR UND NACHSTEHEN

Schritt 1 - Klarheit:

Sie werden mich dies immer wieder sagen hören, aber wenn Sie für das Web entwerfen, geht es ALLE um die Pixel. Eines Ihrer Ziele sollte es immer sein, die Dinge scharf und sauber zu halten. Dies bedeutet zum Beispiel:

Text Klarheit
Beim Auslegen von Text sollten Sie darüber nachdenken, welches Anti-Aliasing Sie verwenden. Dazu rufen Sie das Zeichenfenster auf. Gehen Sie dazu zu Fenster> Zeichen oder wenn Sie das Textwerkzeug ausgewählt haben und Text hervorgehoben ist, drücken Sie die Tastenkombination Strg-T (ja, es ist dieselbe Abkürzung für die Transformation, also müssen Sie dies tun) stellen Sie sicher, dass der Text ausgewählt ist). In Ihrem Charakterfenster unten rechts können Sie zwischen Keine | wählen Sharp | Crisp | Stark. Für verschiedene Schriftarten und unterschiedliche Größen sollten Sie experimentieren. Ich verwende meistens die Einstellung Sharp, die die Ausrichtung einiger Pixel erzwingt und bei kleineren Einstellungen die Schriftart manchmal etwas verzerrt. Aber zum Beispiel im Bild unter dem Text Herstellung ist auf "scharf" gesetzt, weshalb ich beim Anwenden einer 1px-Kontur sehr klar definiere.
Futter
Wie Sie zwischen den helleren grauen und den dunkleren grauen Balken sehen können, habe ich eine schwache 1px-Linie hinzugefügt. Dieser Trick ahmt den Effekt des Schärfefilters nach. Wenn Sie jemals einen der Schärfefilter für ein Foto ausgeführt haben, werden kleine Ränder sichtbar. Dies liegt daran, dass das Hervorheben der Grenze zwischen den beiden Teilen für Ihr Auge separater und daher schärfer erscheint. So oft werde ich eine schwache Linie verwenden, um die Grenze zu betonen und die beiden Teile klarer erscheinen zu lassen.
Färbung
Farbe kann auch beim Schärfen etwas bewirken. In diesem Fall habe ich den Hintergrund von einer Art Grau / Grün zu reinem Grau gesättigt. Dies bedeutet, dass der Tresor, der einen grünlichen Ton hat, sich mehr vom Hintergrund abhebt und sich windiger anfühlt.
Objekte bereinigen
Eine andere Sache, die ich nicht in diesem Bild gemacht habe, aber Sie können etwas schärfer machen, ist durch Objekte wie das Logo oder den Safe zu gehen und sicherzustellen, dass die Kanten pixelorientiert sind. Schauen Sie sich zum Beispiel die linke Kante des Safes im Vergleich zur rechten Kante an. Sie werden sehen, dass der rechte Rand leicht verschwommen wirkt. Wir können dies beheben, indem Sie das Polygonal-Lasso-Werkzeug (L) verwenden und eine kleine Kante auf der rechten Seite auswählen und auf "Löschen" klicken. Natürlich ist dies nicht wesentlich und ich möchte nicht pingelig klingen, aber es ist eine gute Idee, über diese Details nachzudenken und sicherzustellen, dass alles schön und knackig ist!

Ein weiteres Element, das Sie hier besprechen möchten, ist, dass Sie im Text einen schwachen Verlaufs- / Strich-Effekt sehen. Dies wird mit zwei Ebenenstilen erreicht, einem inneren Strich von 1 Pixel und einem subtilen Farbverlauf. Ich habe dies hier verwendet, weil es Teil der Marke FreelanceSwitch ist und auch eine Art Web 2.0-Effekt ist. Es ist am besten mit Sharp-Text wie oben erwähnt. Die genauen Ebenenstile sehen Sie unten in der Beispiel-PSD.

Schritt 2 - Licht und Schatten:

Farbverläufe, Farbverläufe, Farbverläufe. Einige würden sagen, dass sie das Markenzeichen des Web 2.0-Designs sind, und ich muss zugeben, sie ständig in meinen Designs zu verwenden. In der Abbildung unten sehen Sie, dass ich an einigen verschiedenen Stellen Schatten und Farbverläufe hinzugefügt habe, um dem Design mehr Tiefe zu verleihen.

Meiner Meinung nach ist einer der Hauptunterschiede zwischen Print und Webdesign die Tiefe, die Sie für Ihr Design benötigen. Was ich damit meine, ist, dass im Printdesign ein Prospektdeckel mit einer geraden, flachen Farbe vorhanden ist, das oftmals aufgrund des Papiers oder einer eventuell aufgebrachten Celloglaze und der Reaktion des Lichts immer noch schön aussieht zu diesem Papier / Beschichtung. Im 'Design' mag es wie eine einfache, flache Farbe aussehen, aber in der Ausgabe wird es trotzdem Tiefe haben. Auf dem Bildschirm haben Sie diesen Effekt nicht.

Dies bedeutet nicht, dass Sie im Webdesign keine flachen Hintergründe oder Farbfelder haben können. Allerdings haben alle Druckdesigner, die ich je für die Erstellung von Websites eingesetzt habe, die häufigsten zwei Fehler, die ich je festgestellt habe

Der Fokus liegt nicht auf der Schärfe und Klarheit des Designs
Beim Drucken zoomen Sie selten genau nach rechts, um einzelne Pixel zu ändern, da beim Ausdrucken von Objekten diese Detailgenauigkeit oft ohnehin entgeht. Sie denken in Millimetern nicht in Pixeln.
Fehlende Tiefenhinweise und ausreichendes visuelles Interesse
Farbverläufe funktionieren im Druck zwar nicht so gut, aber auf dem Bildschirm wirken sie besonders gut. Das Hinzufügen von schwachen Schatten und Glanzlichtern funktioniert ebenfalls gut auf dem Bildschirm. Zusammen können sie eine Website optisch ansprechender gestalten, da die verschiedenen Elemente auf dem Bildschirm gegeneinander spielen. In der Abbildung unten wurden den Geldbeuteln, die anfangs gerade Vektorbilder mit flachen Farben waren, mit dem Burn-Tool (O) sehr subtile Abstufungen gegeben, so dass sie weicher wirkten.

Schritt 3 - Vorrang:

Vorrang ist der wichtigste visuelle Aspekt des Informationsdesigns. Und da es beim Webdesign hauptsächlich darum geht, wie Sie Informationen anordnen und Ihrem Benutzer Informationen präsentieren, ist der Vorrang daher von größter Bedeutung.

Was meine ich mit Vorrang? Wenn man sich die Seite ansieht, muss man sich fragen, was ich zuerst anschaue, was als nächstes kommt, was danach kommt und so weiter. Und warum betrachten Sie bestimmte Dinge in einer bestimmten Reihenfolge?

Visuelle Priorität ist eine Mischung aus Faktoren:

Größe
Es ist ziemlich offensichtlich, dass etwas Großes Vorrang vor etwas Kleinem hat. In diesem Design haben der Safe und der Haupttitel höchste Priorität. Wenn Sie sich die Seite ansehen, bemerken Sie als Erstes diese beiden Elemente.
Farbe
Farbe schafft auch Vorrang. Im Vorher-Bild sehen Sie zum Beispiel, dass die Untertitel in dem in diesem Bild unten mit 4 gekennzeichneten Bereich anfangs das gleiche Dunkelblau wie die Wörter waren Hallo! Dies bedeutete, dass es weniger Unterschiede zwischen den beiden gab und es nicht so klar war, was zuerst gelesen werden sollte. Durch das Zurückblenden zu Beige wird ihnen weniger Bedeutung beigemessen, und es ist offensichtlich, dass sie in der Informationshierarchie von geringerer Bedeutung sind.
Hintergrundfarbe
Bei Hintergrundfarbe und Farbe im Allgemeinen ist es weniger wichtig, welche Farbe etwas ist, als welche Farbe alles andere in Beziehung steht. Wenn zum Beispiel auf einer Seite alles schwarz ist und es ein weißes Objekt gibt, wird dieses weiße Objekt offensichtlich zu Ihnen springen. In diesem Fall werden wir durch den Kontrast von hellem Gelb und dunklem Grau hervorgehoben. Obwohl das allererste, was Sie auf der Seite sehen, der Safe und die Wörter sind Passives Einkommen erzielen, Sie werden es wahrscheinlich merken Ein Leitfaden für als nächstes und die Teil 1 | Teil 2 |… Zweite Navigation. Dies ist absichtlich so, wie ich möchte, dass der Benutzer zuerst ein visuelles Bild und einen Titel sieht, damit er weiß, was er sieht, und dann möchte ich, dass er die Hauptnavigation sieht, damit er weiß, wie er auf der Site herumkommt.
Position
Schließlich macht die Position im Layout auch einen Unterschied in der Wahrnehmung der Elemente. Wie Sie wahrscheinlich gehört haben, zeigen Studien, dass das Auge des Benutzers in einigen Variationen von links oben nach rechts unten geht (ich habe beide Studien gesehen, die besagen, dass es von links oben nach rechts oben und dann von links nach rechts unten geht und alternativ dazu geht in einer Art Bogen von Ecke zu Ecke.) Wichtig ist, dass etwas Höheres in der Regel Vorrang hat und etwas mehr Linkes in der Regel etwas Vorrang hat.

Schritt 4:

Ich habe es schon gesagt, ich sage es noch einmal… Es geht nur um die Pixel!

In diesem Bild sehen Sie einen scheinbar gradlinigen Verlauf. Tatsächlich sind drei Gradienten eingezeichnet und drei 1-Pixel-Zeilen verwendet. Es ist ziemlich subtil und macht wahrscheinlich keinen großen Unterschied, aber meiner Meinung nach zählt jedes Detail gegen Ende.

Schritt 5:

Jemand in den Kommentaren fragte nach Web 2.0-Stilarten. Hier ist ein einfacher Effekt, bei dem Sie einen Umriss mit 1 oder 2 Pixeln und dann einen schwachen Verlauf für einen Hintergrund angeben. Wenn Sie es nicht bereits bemerkt haben, werden Sie feststellen, dass es überall herumliegt, möglicherweise ein wenig überstrapaziert, aber irgendwie nett.

Schritt 6:

In diesem Bild können Sie sehen, wie Sie während des Poliervorgangs sogar die tatsächlichen Informationen auf der Seite ändern können. In diesem Fall entschied ich, dass, obwohl es mehr reichhaltig war, alle Titel für die verschiedenen Teile unter den Geldbeuteln zu haben, es so unordentlich aussah, dass ich es nicht besonders informativ fand - obwohl dies etwas umstritten ist. Stattdessen entfernte ich den überflüssigen braunen auf braunen Text und ersetzte ihn durch kräftiges Gelb auf dunkelgrau, was aufgrund des Kontrasts heraussprang.

Und da hast du es!

Es gibt also mein erstes Webdesign-Tutorial. Bitte lassen Sie mich in den Kommentaren wissen, ob dies informativ ist. Es ist eine Herausforderung, das Webdesign zu erklären! Denken Sie auch daran, dass mein Stil des Webdesigns natürlich mein Geschmack ist, zumal ich in 99% der Projekte, die ich derzeit mache, mein eigener Kunde bin :-)

Wenn ich das nächste Mal eine Website entwerfen muss, plane ich, das Ganze mit einem Bildschirmaufzeichnungsprogramm aufzuzeichnen und dann in ein paar Minuten zu beschleunigen. Darauf kann man sich freuen! Ich denke, es wird ziemlich cool, auch wenn ich ein bisschen nervös bin, denn wie bei allen Designern ist es manchmal einfach, und manchmal ist es eine leere Tafel.

Ich hoffe trotzdem, dass dir das Tutorial gefallen hat. Bitte gib es ein Digg, wenn du es getan hast!

Beispiel PSD

Eine kurze Anmerkung zu dieser PSD: Ich habe keine der Ebenen beschriftet oder gruppiert. Dies ist im wahrsten Sinne des Wortes die PSD, aus der ich die Site aufgebaut habe, die ich für Sie durchgebastelt habe. Das Design und der Inhalt der PSD werden bereitgestellt rein für Unterrichtszwecke. Das Copyright für das Design und die Illustrationen liegen bei den jeweiligen Inhabern. Bitte verwenden Sie keine anderen Elemente des Designs.

Laden Sie die PSD für dieses Tutorial herunter

Design & Illustration