So erstellen Sie ein sauberes Website-Layout in Photoshop

Erstellen Sie ein sauberes Website-Layout in Photoshop – Das Entwerfen eines Website-Layouts ist mehr als das Anordnen bunter Bilder und das Ausfüllen von Text in den Textrahmen. Es ist ein Ansatz, der Bände über das Geschäft Ihres Kunden spricht. Die Farben und Grafiken der Website definieren die Art des Geschäfts, während die Qualität des Designs und der einfache Navigationsfluss der Website den Benutzer mit der Organisation verbinden und ihn zu einem potenziellen Kunden machen sollten.

Das Entwerfen eines gut aussehenden und leicht zugänglichen Website-Layouts ist für jeden Möchtegern-Webdesigner obligatorisch. Dieses Tutorial soll Sie durch den Prozess der Erstellung einer Website-Layout einfache und saubere Website von Grund auf neu zu nehmen. Während des Prozesses lernen Sie wichtige Punkte kennen, die Ihnen helfen, mehr Wissen über das Webdesign zu erlangen.

Schreiben Sie Ihre Anforderungen auf, bevor Sie ein Website-Layout entwerfen.

Bevor Sie mit dem Entwerfen eines Website-Layouts beginnen, sollten Sie wissen, wie Ihre Website aussehen wird und welche Themen Sie in die Website aufnehmen sollten. Es ist wichtig, eine Liste der Website-Layout-Elemente zu erstellen, die Ihr Kunde auf seiner Website benötigt. Darüber hinaus besteht die Qualität eines guten Designers darin, einen Mock der gesamten Website vorzubereiten, bevor er mit der Arbeit an der endgültigen Vorlage beginnt.

Verschiedene Designunternehmen passen verschiedene Ebenen von Pre-Design-Strategien an, die Drahtrahmen, Prototyping, Mockup, Beta-Versionen und vieles mehr enthalten können. In diesem Tutorial erstellen wir eine Mock-up-Version, bevor wir mit dem ursprünglichen Template-Design beginnen. Ich verwende die Grautöne, mit denen der Modellblock identifiziert werden kann.

Canvas

Jahre zuvor, als es nur sehr wenige Betriebssysteme und begrenzte Geräte für den Zugriff auf Websites gab, wurden die Abmessungen der Seite auf eine oder zwei Größen festgelegt. Heute ist das Szenario ganz anders. Endbenutzer greifen auf Websites auf Desktops verschiedener Größen, Mobiltelefone, iPads und Tablets zu. Es gibt keine Chance, dass Sie Ihre Webseite in dieser vielfältigen Situation auf eine bestimmte Größe festlegen können. Es gibt jedoch einige Industriestandardgrößen für jedes Gerät. Sie werden langsam Ihre Lieblingsgröße finden, oder Ihr Kunde verweist Sie auf eine Website, um die Größen nachzuahmen.

In diesem Fall arbeiten wir an den folgenden Dimensionen. Mach dir keine Sorgen über die Höhe, da sie sich im Laufe der Zeit ändern wird. Je mehr Inhalte Sie Ihrer Website hinzufügen, desto höher wird die Höhe.

Denken Sie daran, dass es üblich ist, die Seite vertikal nach unten zu scrollen, sodass Sie möglicherweise keine bestimmte Höhe für Ihre Webseite festlegen, es sei denn, Sie möchten nicht, dass der Benutzer auf Ihrer Homepage als Google scrollt. Aber es ist notwendig, nicht horizontal zu scrollen. Begrenzen Sie also Ihre Breite gemäß den Industriestandards und werden Sie nicht kreativ mit dem horizontalen Scrollen.

Für das Web ist die Auflösung auf 72 begrenzt. In letzter Zeit wurden Bilder und Seiten mit höherer Auflösung auf iPads und wenigen Tablets gefunden. Aber es ist in seltenen Fällen, und es ist besser, bei 72 zu bleiben, wenn man die Internetgeschwindigkeit auf der ganzen Welt berücksichtigt.

Wählen Sie die Dateien mit dem Befehl Strg + A aus und zeichnen Sie Hilfslinien gleichmäßig durch die Vorlage. Eine Website sollte ordentlich organisiert sein, wobei jedes Element kohärent zueinander angeordnet ist. Und Website-Layout-Richtlinien helfen Ihnen, es leicht zu erhalten.

Bereiten Sie Ihr Modell vor.

Wenn Sie Ihre Mockup-Datei auf Ihrer Originalvorlage platzieren, sparen Sie viel Zeit. Das Entwerfen Ihrer Website wird so einfach, dass Sie das Framework innerhalb weniger Minuten fertigstellen. Das Modell hilft Ihnen jedoch nur beim Entwerfen der Rahmen. Das Vervollständigen der Designelemente mit Details, Typanordnung und Ausrichtung dauert länger als das Zeichnen des Website-Layouts.

Farbschema und andere Optionen

Nachdem Sie Ihr Framework vorbereitet haben, müssen Sie als nächstes ein Farbschema auswählen. Es ist jedoch besser, Ihre Farben fertig zu machen, bevor Sie mit der Arbeit am Design beginnen.

Das Ganze läuft darauf hinaus, dass Sie Ihre Waffen fertig machen, bevor Sie mit dem Design beginnen. Alles, einschließlich Symbole, Bilder und Farboptionen, sollte bereit sein, bevor Sie mit der Arbeit beginnen. Das Organisieren und Planen Ihrer Arbeit spart mehr Zeit und konzentriert sich auf das Design ohne Hindernisse dazwischen.

Die Auswahl von Farben kann die Wahl eines Designers sein, wenn das Unternehmen neu ist und zuvor keine Corporate Identity hatte. Kunden geben eine Vorstellung davon, welche Schattierungen das Logo oder der Hintergrund in einigen Fällen haben soll. Bei bestehenden Unternehmen, bei denen Sie möglicherweise eine gesamte Website neu gestalten müssen, müssen Sie möglicherweise die gleichen Farben wie die Anforderungen des Kunden auswählen.

Es gibt zahlreiche Websites, die Ihnen helfen können, Millionen von Farbschemata aus den Archiven auszuwählen. Probieren Sie die folgenden Websites aus, um eine große Auswahl an Farbkombinationen zu genießen.

Farbe.Adobe.kom

Colourlovers.com

Hier habe ich einige Blautöne für die Website ausgewählt. Die gesamte Website wird in folgendem Farbschema geplant. Vergessen Sie nicht, drei oder vier verschiedene Farbkombinationen zu wählen, da wir nicht wissen, welche Farbe der Kunde bevorzugen wird. Sobald der Kunde ein Farbschema festgelegt hat, speichern Sie die Farbwerte und stellen Sie sicher, dass die Farben in jeder Vertikalen des Unternehmens eine wichtige Rolle spielen, insbesondere in der Corporate Identity.

Entwurfsprozess

Es gibt viele Möglichkeiten, Ihre Designer weiterzumachen. Es gibt keine festen und schnellen Website-Layout-Regeln, um den Prozess des Entwerfens zu definieren oder zu befolgen; Es ist meistens ein Prozess, den der Designer nach Belieben wählt.

Einige Designer möchten die gesamten Blöcke und Rahmen erstellen und in der zweiten Phase mit der Arbeit an Details beginnen, gefolgt von der Art und schließlich den Ausrichtungen und Anpassungen. Manche beenden gerne einen Teil der Seite auf einmal und bringen ihn zum nächsten Teil. Wir folgen dem zweiten Stil.

Wir werden die Website in den folgenden Schritten fertigstellen

• Kopfzeile & Fußzeile
• Was wir tun
• Dienstleistungen
• Formular
• Nachrichten
• Fußzeile

Kopfzeile & Fußzeile

Die Daumenregel zur Definition der Abmessungen Ihres Headers oder Banners bleibt Ihrer Kreativität überlassen. Nach den neuesten Trends werden Websites mit einem riesigen Bild angezeigt, das Ihren gesamten Computerbildschirm abdeckt. Der Stil wird als Heldenbild bezeichnet, das in letzter Zeit sehr populär wurde.

In diesem Fall haben wir mit einem Header mit 120 Pixel Höhe und einer Höhe von 550 Pixel für das Banner begonnen. Die Breite sollte mit der Dokumentgröße übereinstimmen.

Designs mit Volltonfarbe haben ein flaches Aussehen, das nicht gut zu größeren Rahmen oder Bildern passt. Um das flache Aussehen zu vermeiden, habe ich eine Verlaufsüberlagerungsebene auf das Banner angewendet. Es gibt dem Banner eine Tiefe, die sich langsam von einem Farbton in einen anderen verwandelt.

Als nächstes haben wir begonnen, das Logo zu importieren und es in der oberen linken Ecke des Headers und ein weiteres größeres Logo in der Mitte des Banners zu platzieren. Sie können auch die Website-Layout-Vektorformen in der oberen rechten Ecke beobachten, die verwendet werden, um die Social-Media-Links zu teilen.

Zu diesem Zeitpunkt habe ich den Typ im Header & -Bannerteil hinzugefügt. Firmenname, Markenbotschaft, mit Links und Dienstleistungen, werden im Text hinzugefügt. Sie können auch eine transparente Schaltfläche auf dem Banner beobachten.

Klartext oder zu viel Typ ohne spezielle Funktionen beeinträchtigen das Erscheinungsbild Ihrer Webseite. Die Seite wird den Benutzer bald langweilen, wodurch er Ihre Website möglicherweise schnell verlassen kann. Schauen Sie sich die Vektorform an, die ich den Service-Links oben rechts im Banner hinzugefügt habe. Der Stil ist einfach, dennoch füllt er die Lücke und vermeidet den alltäglichen Look.

Wählen Sie ein für das Unternehmen geeignetes Bild. Es gibt Millionen von Stockbildern im Internet, und es wird nicht allzu lange dauern, ein Bild zu finden, das Ihren Anforderungen entspricht.

In meinem Fall habe ich ein qualitativ hochwertiges Bild gefunden, das meiner Meinung nach gut zu meiner Website passt. Ich habe kein Business-Thema für die Website, daher kann ich jedes Bild auswählen, das auf dem Bannerpost gut aussieht.

Versuchen Sie, einige HD-Bilder von den unten angegebenen kostenlosen Bildseiten herunterzuladen

www..com.

Blending ist eine Kunst, die Sie beherrschen sollten, um schöne Banner zu produzieren. Hier habe ich drei Schichten gemischt, um den im obigen Bild gezeigten Effekt zu erzielen. Hier ist, was ich getan habe

• Platzieren Sie die Bildebene über dem blauen Farbbanner
• Platzieren Sie die Verlaufsüberlagerung über dem Bild
• Ändern Sie die Deckkraft des Bildes um 40 Prozent und ändern Sie den Mischmodus in Differenz.
• Schauen Sie sich die Ebenenpalette im obigen Bild an, um zu verstehen, wie die Ebenen aufeinander gestapelt sind.

So wird Ihr Header & Banner aussehen, da wir gerade mit der Arbeit fertig sind. Wir arbeiten an einem Teil gleichzeitig und es ist Zeit, zum nächsten Level überzugehen.

Ausrichtung ist entscheidend, wenn es um Typ geht; haben Sie eine Vorstellung davon, wie Ihre Website aussehen soll, und Text sollte ausgerichtet werden, bevor Sie es starten. Auf dieser Ebene habe ich zwei verschiedene Textrahmen verwendet, die beide nach links ausgerichtet sind.

Der nächste Schritt ist das Entwerfen des Services-Teils der Webseite. Ich habe einen metallischen Stern in Grautönen entworfen, um verschiedene Dienstleistungen des Unternehmens zu präsentieren. Die Absicht hinter der Verwendung des Sternsymbols ist 5 Star Services.

Wenn es darum geht, den Text auszurichten, sind Hilfslinien Ihre besten Freunde. Kohärenz innerhalb von Typ und Objekten kann erreicht werden, indem der Leerraum und die gleichen Lücken zwischen den Designelementen gut genutzt werden. Ich habe viele Website-Layout-Richtlinien verwendet, um zu sehen, dass alle Objekte im Rahmen die richtigen Lücken und Abstände einhalten sollten, wodurch eine angemessene Menge an Leerraum entsteht.

Der nächste Schritt unseres Designs besteht darin, das Formularfeld zu erstellen. In diesem Fall arbeite ich entgegengesetzt zu der Methode, die wir beim Entwerfen des Banners verwendet haben. Wir platzieren die Bildebene unter der einfarbigen Ebene und wenden eine Verlaufsebene auf die beiden Ebenen an, um ein besseres Aussehen zu erzielen. Das Spielen mit den Mischmodi ist immer wichtig, wenn Sie größere Bilder platzieren.

Die Auswahl der Bilder für diese Website hat kein bestimmtes Thema. Ich denke, dieses Bild wird der Website helfen, besser auszusehen.

Platzieren Sie das Bild unter der farbigen Hintergrundebene. Verwenden Sie die Ebenenmaskierungsoptionen, um das Bild genau auf die Größe der farbigen Ebene anzupassen.

Schauen Sie sich die Ebenenpalette im obigen Bild an. Die durchgehende blaue Ebene befindet sich oben im Bild, der Mischmodus wird in Überlagerung konvertiert und die Deckkraft auf 65 Prozent reduziert.

Ich habe die Verlaufskarte über den beiden Ebenen verwendet. Der Mischmodus wird in Farbton geändert, und die Deckkraft bleibt gleich.

Die Formularbox ist fertig, was uns zum Ende der vierten Ebene in unserem Website-Design bringt.

Unsere nächste Ebene besteht aus zwei einfachen Textrahmen. Es ähnelt der zweiten Ebene der Webseite, und ich habe die beiden Felder ähnlich wie oben ausgerichtet. Die Aufrechterhaltung der Kohärenz in der Ausrichtung ist eine gute Möglichkeit, den Leerraum zu verwenden.

Als wir den letzten Teil der Seite erreicht haben, ist es an der Zeit, die Abmessungen der Fußzeile noch einmal zu betrachten. Der Designer muss die Höhe der Fußzeile anhand der Links planen, die er dort verwenden soll. In diesem Fall habe ich meiner Fußzeile eine Höhe von 170 Pixel zugewiesen. Die Breite bleibt die gleiche wie die Website.

Platzieren Sie die Links und Bilder gemäß Ihren Anforderungen.

Damit haben wir den Gestaltungsteil unserer Website abgeschlossen. Die von uns verwendeten Farbkombinationen sind minimal; Wir verwenden viel Weißraum in unserem Design und haben einfachen Text mit minimalen Schriftarten hinzugefügt. Die Absicht ist es, eine saubere Webseite zu entwerfen, von der wir hoffen, dass sie erfüllt wird.

Bitte schauen Sie sich das Design der gesamten Seite unten noch einmal an.