Erstellen eines sauberen Website-Layouts in Photoshop - Beim Entwerfen eines Website-Layouts müssen nicht nur bunte Bilder angeordnet und Text in die Textrahmen eingefügt werden. Dieser Ansatz spricht für das Geschäft Ihres Kunden. Die Farben und Grafiken der Website bestimmen die Art des Geschäfts, während die Qualität des Designs und der einfache Navigationsfluss der Website den Benutzer an die Organisation binden und ihn zu einem potenziellen Kunden machen sollten.
Die Gestaltung eines ansprechenden und leicht zugänglichen Website-Layouts ist für jeden Möchtegern-Webdesigner obligatorisch. Dieses Tutorial soll Sie durch den Prozess des Erstellens eines einfachen und übersichtlichen Website-Layouts von Anfang an führen. Während des Prozesses lernen Sie wichtige Punkte kennen, die Ihnen dabei helfen, mehr über Webdesign zu erfahren. 
Notieren Sie sich Ihre Anforderungen, 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. Die Qualität eines guten Designers besteht darin, ein Modell der gesamten Website zu erstellen, bevor er mit der Arbeit an der endgültigen Vorlage beginnt.
Verschiedene Designfirmen passen verschiedene Ebenen von Vorentwurfsstrategien an, die Drahtmodellierung, Prototyping, Mockup, Betaversionen und vieles mehr enthalten können. In diesem Tutorial erstellen wir eine Modellversion, bevor wir das ursprüngliche Vorlagendesign starten. Ich verwende die Graustufen, mit denen der Mockup-Block identifiziert werden kann
Segeltuch
Jahre zuvor, als es nur sehr wenige Betriebssysteme und eingeschränkte Geräte für den Zugriff auf Websites gab, waren die Abmessungen der Seite auf eine oder zwei Größen festgelegt. Heute ist das Szenario völlig anders. Endbenutzer greifen auf Websites auf Desktops verschiedener Größen, Mobiltelefonen, iPads und Tablets zu. In dieser abwechslungsreichen Situation besteht keine Chance, dass Sie Ihre Webseite auf eine bestimmte Größe festlegen können. Für jedes Gerät gelten jedoch einige Industriestandardgrößen. Sie werden langsam Ihre Lieblingsgröße finden, oder Ihr Kunde verweist Sie möglicherweise auf eine Website, um die Größen zu imitieren.
In diesem Fall arbeiten wir an folgenden Dimensionen. Kümmern Sie sich nicht um die Höhe, da sie sich mit 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 Nutzer auf Ihrer Startseite als Google blättert. Es ist jedoch erforderlich, nicht horizontal zu scrollen. Beschränken 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 kommt nur selten vor, und es ist besser, sich an 72 zu halten, wenn man die Internetgeschwindigkeit auf der ganzen Welt berücksichtigt.
Wählen Sie die Dateien mit Strg + A aus und zeichnen Sie die Hilfslinien gleichmäßig in der Vorlage. Eine Website sollte ordentlich organisiert sein, wobei jedes Element kohärent zueinander angeordnet ist. Richtlinien für das Website-Layout helfen Ihnen dabei, diese problemlos zu erhalten.
Bereiten Sie Ihr Modell vor
Indem Sie Ihre Modelldatei in Ihre Originalvorlage einfügen, sparen Sie viel Zeit. Das Design Ihrer Website wird so einfach, dass Sie das Framework innerhalb weniger Minuten fertigstellen. Das Modell hilft Ihnen jedoch nur bei der Gestaltung der Rahmen. Das Vervollständigen der Gestaltungselemente mit Details, der Anordnung und Ausrichtung der Schrift benötigt mehr Zeit als das Zeichnen des Website-Layouts.
Farbschema und andere Möglichkeiten
Nachdem Sie Ihr Gerüst fertiggestellt haben, müssen Sie zunächst ein Farbschema auswählen. Es ist jedoch besser, die Farben fertigzustellen, bevor Sie mit der Arbeit am Design beginnen.
Das Ganze läuft auf die Nachricht hinaus, dass Sie Ihre Waffen fertig machen müssen, bevor Sie mit dem Entwurf beginnen. Alles, einschließlich Symbole, Bilder und Farbauswahl, 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 dass dazwischen Hindernisse entstehen.
Die Auswahl der Farben kann vom Designer gewählt werden, wenn das Unternehmen neu ist und noch keine Corporate Identity hat. In einigen Fällen geben Kunden eine Vorstellung davon, welche Schattierungen das Logo oder der Hintergrund haben sollen. In bestehenden Unternehmen, in denen Sie möglicherweise eine gesamte Website neu gestalten müssen, müssen Sie möglicherweise die gleichen Farben wie für die Anforderungen des Kunden auswählen.
Es gibt zahlreiche Websites, auf denen Sie Millionen von Farbschemata aus den Archiven auswählen können. Probieren Sie die folgenden Websites aus, um eine große Auswahl an Farbkombinationen zu erhalten.
Color.adobe.com
Colourlovers.com
Hier habe ich einige Blautöne für die Website ausgewählt. Die gesamte Website wird im folgenden Farbschema geplant. Vergessen Sie nicht, drei oder vier verschiedene Farbkombinationen zu wählen, da wir nicht wissen, welcher Farbclient es vorziehen wird. Wenn der Kunde ein Farbschema fertiggestellt hat, speichern Sie die Farbtonwerte und stellen Sie sicher, dass die Farben in jeder Vertikale der Organisation eine wichtige Rolle spielen. Vor allem in der Corporate Identity.
Designprozess
Es gibt viele Möglichkeiten, um Ihre Designer weiterzuführen. Es gibt keine festen und schnellen Regeln für das Website-Layout, um den Entwurfsprozess zu definieren oder zu befolgen. Es handelt sich meistens um einen Prozess, den der Designer nach Belieben auswählen wird.
Einige Designer möchten die gesamten Blöcke und Rahmen erstellen und beginnen in der zweiten Phase mit der Arbeit an Details, gefolgt vom Typ und schließlich den Ausrichtungen und Anpassungen. Manche mögen es, einen Teil der Seite auf einmal zu beenden und zum nächsten Teil überzugehen. Wir folgen dem zweiten Stil.
Wir werden die Website in den folgenden Schritten fertigstellen
- Kopfzeile Fußzeile
- Was wir tun
- Dienstleistungen
- Bilden
- Nachrichten
- Fusszeile
Kopfzeile Fußzeile
Die Faustregel zum Definieren der Abmessungen Ihres Headers oder Banners bleibt Ihrer Kreativität überlassen. Nach den neuesten Trends erscheinen Websites mit einem riesigen Bild, das den gesamten Computerbildschirm abdeckt. Der Stil wird als Hero Image bezeichnet, was in letzter Zeit recht populär wurde.
In diesem Fall haben wir mit einer Kopfzeile mit einer Höhe von 120 Pixel und einer Höhe von 550 Pixel für das Banner begonnen. Die Breite sollte mit der Dokumentgröße übereinstimmen.
Designs mit Volltonfarben sehen flach aus, was für größere Rahmen oder Bilder nicht geeignet ist. Um das flache Aussehen zu vermeiden, habe ich eine Verlaufsüberlagerungsebene über dem Banner angebracht. Es verleiht 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 der Kopfzeile und ein weiteres größeres Logo in der Mitte des Banners zu platzieren. Sie können auch die Vektorformen des Website-Layouts in der oberen rechten Ecke beobachten, mit denen die Social-Media-Links geteilt werden.
Zu diesem Zeitpunkt habe ich den Typ im Teil Header & Banner hinzugefügt. Firmenname, Markennachricht mit Links und Services werden im Text hinzugefügt. Sie können auch eine transparente Schaltfläche auf dem Banner beobachten.
Nur-Text oder zu viel Text ohne spezielle Funktionen beeinträchtigen das Erscheinungsbild Ihrer Webseite. Die Seite wird demnächst den Benutzer langweilen, wodurch er Ihre Website möglicherweise schnell verlässt. Schauen Sie sich die Vektorform an, die ich zu den Servicelinks oben rechts im Banner hinzugefügt habe. Der Stil ist schlicht, füllt aber die Lücke und vermeidet den alltäglichen Look.
Wählen Sie ein für das Unternehmen geeignetes Bild. Im Web sind Millionen von Bildern verfügbar, und es wird nicht lange dauern, bis ein Bild gefunden wird, 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 Geschäftsthema für die Website, daher kann ich jedes Bild auswählen, das auf dem Bannerpost gut aussieht.
Versuchen Sie, einige HD-Bilder von unten angegebenen kostenlosen Bild-Websites herunterzuladen
www.pixabay.com
Das Mischen 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
- Legen Sie die Bildebene auf das blaue Farbbanner
- Platzieren Sie die Verlaufsüberlagerung über dem Bild
- Ändern Sie die Deckkraft des Bildes um 40 Prozent und den Mischmodus auf Unterschied.
- Sehen Sie sich die Ebenenpalette im obigen Bild an, um zu verstehen, wie die Ebenen aufeinander gestapelt sind.
So wird Ihr Header & Banner aussehen, wenn wir gerade damit fertig sind. Wir arbeiten an einem Teil auf einmal und es ist Zeit, auf die nächste Ebene überzugehen.
Ausrichtung ist entscheidend, wenn es um Typ geht; Sie haben eine Vorstellung davon, wie Ihre Site aussehen und wie der Text ausgerichtet werden sollte, bevor Sie sie starten. Auf dieser Ebene habe ich zwei verschiedene Textrahmen verwendet, die beide linksbündig ausgerichtet sind.
Der nächste Schritt ist das Entwerfen des Serviceteils der Webseite. Ich entwarf einen Metallstern in Grautönen, um verschiedene Dienstleistungen des Unternehmens zu präsentieren. Die Absicht hinter der Verwendung des Sternsymbols sind 5-Sterne-Dienste.
Wenn es darum geht, den Text auszurichten, sind Guides Ihre besten Freunde. Kohärenz in Typ und Objekt kann durch eine gute Nutzung des Leerraums und gleicher Lücken zwischen den Gestaltungselementen erreicht werden. Ich habe viele Richtlinien für das Layout von Websites verwendet, um sicherzustellen, dass alle Objekte im Rahmen die richtigen Abstände und Abstände einhalten, um eine angemessene Menge an Leerraum freizugeben.
Der nächste Schritt unseres Entwurfs besteht darin, das Formularfeld zu erstellen. In diesem Fall arbeite ich gegen die Methode, die wir bei der Gestaltung des Banners verwendet haben. Wir werden die Bildebene unter der durchgefärbten Ebene platzieren und eine Verlaufsebene über die beiden Ebenen legen, 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 Site hat kein spezifisches Thema. Ich denke, dieses Bild wird dazu beitragen, dass die Website besser aussieht.
Platzieren Sie das Bild unter der farbigen Hintergrundebene. Verwenden Sie die Ebenenmaskierungsoptionen, um das Bild genau an die Größe der farbigen Ebene anzupassen.
Sehen Sie sich die Ebenenpalette im obigen Bild an. Die durchgehend blau gefärbte Ebene befindet sich oben im Bild, der Mischmodus wird in Überlagerung umgewandelt und die Deckkraft auf 65 Prozent verringert.
Ich habe die Verlaufskarte über den beiden Ebenen verwendet. Der Mischmodus wird auf Farbton geändert und die Deckkraft bleibt gleich.
Das Formularfeld ist fertig und bringt uns zum Ende der vierten Ebene unseres Website-Designs.
Unsere nächste Ebene besteht aus zwei einfachen Textrahmen. Es ähnelt der Ebene zwei der Webseite und ich habe die beiden Kästchen ähnlich wie oben ausgerichtet. Die Wahrung der Kohärenz bei der Ausrichtung ist eine gute Möglichkeit, den Leerraum zu nutzen.
Als wir den letzten Teil der Seite erreicht haben, ist es Zeit, die Abmessungen der Fußzeile noch einmal zu überprüfen. 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 gegeben. Die Breite bleibt die gleiche wie auf der Website.
Platzieren Sie die Links und Bilder gemäß Ihren Anforderungen.
Damit haben wir den gestalterischen Teil unserer Website abgeschlossen. Die verwendeten Farbkombinationen sind minimal, wir verwenden viel Leerraum in unserem Design und fügen einfachen Text mit minimaler Schrift hinzu. Die Absicht ist, eine saubere Webseite zu entwerfen, von der wir hoffen, dass sie erfüllt wird.
Bitte schauen Sie sich noch einmal das Design der gesamten Seite an
