Layout kann sowohl eine der einfachsten als auch eine der schwierigsten Facetten des Webdesigns sein. Manchmal kann ein Designer in nur wenigen Minuten ein erstaunliches Layout erstellen, und manchmal kann derselbe Designer den größten Teil des Tages mit derselben Aufgabe kämpfen.
Jedes Projekt ist einzigartig und verlangt nach einer einzigartigen Lösung, aber ich fand es hilfreich, ein paar solide und unglaublich vielseitige Ausrichtungen im Auge zu behalten, an die ich denken kann, wenn ich nicht weiterkomme. Die folgenden zehn Layouts sollten ausreichen, um auch in den schlimmsten Fällen des Designerblocks durchzukommen, wenn Sie nicht herausfinden können, wie der Inhalt auf Ihrer Seite am besten angeordnet werden kann.
Einfach halten
Das Seitenlayout ist zu gleichen Teilen Kunst und Wissenschaft. Etwas zu schaffen, das optisch ansprechend und einzigartig ist, erfordert ein künstlerisches Auge. Es gibt jedoch einige sehr einfach zu befolgende Richtlinien, mit denen Sie solide Layouts erstellen können, die für eine Vielzahl von Fällen geeignet sind. Zu diesen Grundsätzen gehört das Auswählen und Festhalten an einer Ausrichtung, das richtige Strukturieren Ihres Whitespace und das Hervorheben wichtiger Elemente durch Größe, Positionierung usw.
Designer legen oft viel zu viel Wert auf den Layout-Prozess. Wir haben die Tendenz, an ein Projekt heranzugehen und dabei zu denken, dass es in jeder Hinsicht absolut einzigartig sein muss, um unsere Zeit und das Geld des Kunden wert zu sein. Wenn Sie sich jedoch gut im Web umsehen, werden Sie feststellen, dass dies nicht unbedingt der Fall ist. Gut aussehende Websites verwenden häufig Layouts, die ziemlich einfach und nicht zuletzt einzigartig sind. Es ist wahr, dass die Seiten, die wir am meisten bestaunen, oft von den besonderen Seiten stammen, die den Schimmel zerstören, aber Ihr durchschnittlicher Kunde möchte nur etwas brauchbares, sauberes und professionelles.
In diesem Artikel werfen wir einen Blick auf zehn sehr häufige Layouts, die Sie auf unzähligen Websites im Internet finden können. Beachten Sie, dass die Gestaltung dieser Websites, dh Farben, Grafiken und Schriftarten, einzigartig ist. Die grundlegende Struktur der Websites selbst basiert jedoch auf bewährten Methoden zum Erstellen einer Webseite. Wir betonen dies, indem wir Ihnen zunächst eine einfache Silhouette des Layouts zeigen, auf die Sie Ihre eigenen Gedanken und Entwürfe projizieren können, und dann mit ein oder zwei Beispielen realer Websites, die das Layout verwenden, folgen.
Wenn Sie ein Webdesigner sind, setzen Sie ein Lesezeichen für diese Seite und kehren Sie das nächste Mal zurück, wenn Sie nicht weiterkommen. Beachten Sie, dass jedes der folgenden Layouts einen grundlegenden Vorschlag für Sie darstellt, den Sie formen und ändern müssen. Ich ermutige Sie, sie nicht so zu verwenden, wie sie sind, sondern sie Ihren eigenen Wünschen entsprechend den Bedürfnissen Ihres Projekts zu widmen.
Drei Boxen
Dies ist wahrscheinlich das einfachste Layout auf der Liste. In der Tat werden Sie versucht sein zu glauben, dass es viel zu einfach ist, um Ihre eigenen Bedürfnisse zu erfüllen. Wenn dies der Fall ist, werden Sie überrascht sein, wenn Sie wirklich darüber nachdenken, wie vielseitig das Arrangement wirklich ist.
Das Layout der drei Boxen umfasst einen Hauptgrafikbereich, gefolgt von zwei kleineren Boxen darunter. Jeder von ihnen kann mit einer Grafik, einem Textblock oder einer Mischung aus beiden gefüllt werden. Das Hauptfeld in diesem Layout ist häufig ein jQuery-Schieberegler, der so viel Inhalt anzeigen kann, wie Sie möchten!
Die silhouettierten Formen am oberen Rand sind Bereiche, die für Logos, Firmennamen, Navigation, Suchleisten und alle anderen informativen und funktionalen Inhalte verwendet werden können, die normalerweise auf einer Website vorhanden sind.
Dieses Design ist ideal für eine Portfolio-Seite oder alles, was einige Beispielgrafiken zeigen muss. Jedes der Bilder könnte ein Link sein, der zu einer größeren, komplexeren Galerieseite führt. Später in diesem Artikel werden wir sehen, wie man diese Idee noch weiter mischen kann.
In der Wildnis
Im Folgenden sehen Sie eine schöne Umsetzung des Drei-Box-Layouts in Peter Verkuilens Portfolio. Wie oben vorgeschlagen, dreht sich die Hauptgrafik und zeigt einige der letzten Projekte von Peter. Wenn Sie auf eines der Felder klicken, gelangen Sie zur entsprechenden Seite des Projekts, auf der Sie weitere Informationen erhalten.
Einfach, effektiv und attraktiv. Sie können wahrscheinlich eine vollständige, Live-Webseite mit diesem Layout in weniger als einer Stunde erstellen!
Schnappen Sie sich eine Vorlage
Eine schnelle Möglichkeit, um mit dieser Art von Layout zu beginnen, ist eine HTML-Vorlage. Genius ist eine minimale, vollständig ansprechende Geschäftsvorlage für Unternehmen, Agenturen, Freiberufler und Einzelpersonen. Es ist sehr einfach anpassbar und gut dokumentiert, und es ist einfach, es in einem beliebigen Raster anzuordnen, das Sie möchten!
3D-Screenshots
Da die Entwickler weiterhin eine endlose Sammlung von Webapps erstellen, wird das unten gezeigte 3D-Screenshot-Layout oder eine Variante davon immer beliebter. Die Grundidee ist, Ihre Seite mit einer Überschrift zu versehen und dann eine stilisierte Vorschau Ihrer Anwendung zu erstellen. Diese beinhalten oft Reflexionen, starke Schatten, große Hintergrundgrafiken oder sogar komplexe Verzierungen wie Ranken, die über die gesamten Screenshots kriechen. Die Grundidee ist jedoch immer sehr einfach.
Ein anderer Ort, an dem dieser Trick häufig verwendet wird, sind vorgefertigte Themen. In diesen Fällen verkauft ein Designer ein Lagerlayout und benötigt wirklich seine Platzhaltergrafiken, um zu glänzen, und nichts sagt cool und modern aus, wie einige ausgefallene 3D-Effekte!
In der Wildnis
Pixelworkshop verwendet diese Technik nicht als Stockthema, sondern um tatsächlich Stockthemen zu präsentieren! Hier tauschen sich die 3D-Screenshots in einer Diashow aus und erscheinen in verschiedenen Arrangements. Schauen Sie vorbei und sehen Sie, auf welche Weise der Designer die Bilder präsentiert.
Erweitertes Gitter
Viele der Layouts, die Sie in diesem Artikel sehen, unterliegen einer ziemlich strengen Rasterausrichtung. Meistens schlagen sie jedoch nicht einfach nur eine Seite mit einheitlichen Miniaturansichten vor. Das unten dargestellte Layout mischt beispielsweise die Größe der Bilder, um Redundanzen zu vermeiden.
Wie bei den drei Feldern gibt es eine Hauptgrafik auf der Seite. Daran schließt sich eine einfache Variante der Idee eines einheitlichen Rastergitters an.Der Abstand würde einen horizontalen Abstand von vier Feldern zulassen, stattdessen haben wir die ersten beiden Bereiche so kombiniert, dass sich die linke Hälfte der Seite von der rechten unterscheidet.
Wie wir bereits beim ersten Layout erwähnt haben, müssen die Blöcke keine Bilder sein. Sie können sich dies beispielsweise als Textblöcke auf der linken Seite mit rechteckigen Bildern auf der rechten Seite vorstellen.
In der Wildnis
Im untenstehenden Beispiel wird dieses Layout für eine Website für Kinderbekleidung verwendet. Beachten Sie, dass sie am unteren Rand der Ausrichtung noch weiter nach oben verschoben haben, so dass auf der linken Seite ein fast seltsam großes Bild mit einem Absatz erscheint, von dem keiner perfekt auf den Inhalt auf der rechten Seite ausgerichtet ist.
Sobald Sie Ihr grundlegendes Layout vor Augen haben, können Sie geringfügige Änderungen wie diese vornehmen und dabei die Integrität der zugrunde liegenden Struktur beibehalten. Ein anderer interessanter Trick war, die Hauptgrafik in zwei Bereiche aufzuteilen. Es ist eigentlich alles ein JPG, aber es wurde in zwei Bilder aufgeteilt, um noch mehr Inhalt zu zeigen.
Schnappen Sie sich eine Vorlage
Eine schnelle Möglichkeit, um mit dieser Art von Layout zu beginnen, ist eine HTML-Vorlage. GoodFood ist eine Vorlage, die perfekt zu diesem Thema passt - das Beispiel, das für eine Website mit Lebensmitteln und Getränken verwendet wird, wäre jedoch für jede Art von Webseitenthema ideal!
Vorgestellte Grafik
Manchmal haben Sie nicht genug Inhalt für eine Seite mit Bildern. Was tun Sie also, wenn Sie ein Symbol, ein Foto oder sogar ein Symbol wie ein Et-Zeichen präsentieren möchten? Das folgende Layout ist eine sehr einfache Lösung, die sehr beliebt ist und sich aufgrund fehlender Ablenkungen sehr gut liest.
Das Ergebnis ist eine Seite, die fett, aber minimal und sauber ist. Die Aussage, die sie macht, ist stark und unmöglich zu übersehen. Stellen Sie nur sicher, dass Ihre Grafik gut genug ist, um so prominent dargestellt zu werden!
In der Wildnis
Wie häufig ist dieses Layout? Viel mehr als Sie vielleicht denken! Mit minimalem Aufwand konnte ich sofort zwei Standorte finden, die eine nahe Variante dieser Technik verwenden. Beachten Sie, dass Sie Optionen haben, wie Sie den Text formatieren möchten und sogar, wo Sie die Navigation platzieren möchten. Die zweite Site ordnet die sekundären Elemente ziemlich neu an, ist jedoch sofort als das gleiche grundlegende Layout erkennbar.
Schnappen Sie sich eine Vorlage
Eine schnelle Möglichkeit, um mit dieser Art von Layout zu beginnen, ist eine HTML-Vorlage. Motive ist eine minimalistische Portfolio-HTML-Vorlage, die sich perfekt für Agentur- oder persönliche Websites eignet. Diese Vorlage enthält einen vollständigen Portfolio-Abschnitt mit Filter- und Portfolio-Detailseite. Die Vorlage enthält auch Informationen zu Seiten und Blogs, mit denen die Vorlage für ein Blog anstelle eines Portfolios verwendet werden kann. Viele Anpassungen und umfassende Dokumentation sind enthalten.
Fünf Boxen
Das Layout mit fünf Boxen ist einfach eine Weiterentwicklung des Layouts mit drei Boxen. Es gilt alle die gleiche Logik, es wurde lediglich modifiziert, um noch mehr Inhalt aufzunehmen. Es könnten auch vier Boxen sein, es hängt nur davon ab, was Sie präsentieren möchten. Es sieht auch so aus, als ob Sie etwas mehr Mühe in das Design stecken würden!
Wenn Sie dem Layout hinzufügen, werden die sekundären Elemente natürlich immer kleiner. Für die meisten Verwendungszwecke werden fünf Kästchen wahrscheinlich das Limit erreichen.
Genau wie beim Drei-Box-Layout ist dieses Layout so vielseitig, dass es praktisch für jede Art von Website verwendet werden kann. Zum Umschalten können Sie eine große Hintergrundgrafik hinzufügen, die Ecken runden, Schatten und / oder Reflexionen hinzufügen oder sogar ein interaktives Element zu den kleineren Thumbnails hinzufügen. Sie können auf einfache Weise Schaltflächen hinzufügen, durch die sie horizontal verschoben werden.
In der Wildnis
Auch hier haben wir zwei Beispiele für dieses Layout, die auf unterschiedliche Weise verwendet werden. Die große Sache, die hier zu beachten ist, ist, dass diese beiden Websites trotz ähnlicher Layouts kaum voneinander abweichen würden, wenn sie es versuchten. Die eine verwendet einen von Hand gezeichneten Illustrationsstil, die anderen Fotografien und Farbverläufe. Die erste verwendet gedämpfte Farben und Skriptschriftarten, die zweite helle Farben und moderne Schriftarten.
Dies führt zu dem Argument, dass die Verwendung eines der Layouts in diesem Artikel Ihre Kreativität nicht tötet. Nachdem Sie den Inhalt zusammengestellt haben, gibt es noch viel zu tun im Bereich der Ästhetik. Dies ist es, was die Persönlichkeit der Site wirklich bestimmt und oft einen Kundenvorschlag macht oder bricht.
Schnappen Sie sich eine Vorlage
Eine schnelle Möglichkeit, um mit dieser Art von Layout zu beginnen, ist eine HTML-Vorlage. Phoebe ist eine saubere, minimale Blogger-Vorlage mit zahlreichen Funktionen wie einem automatischen Beitragsschieberegler und einem Promobereich (beide sind optional). 4 Homepage-Stile zur Auswahl (Slider + Promobereich, nur Slider, Promobereich oder klassisches Layout).
Feste Seitenleiste
Bisher hatten alle Websites, die wir gesehen haben, eine horizontale Navigation auf der Oberseite. Die andere beliebte Option ist natürlich eine vertikale Navigation, die sich zum Erstellen einer starken vertikalen Spalte auf der linken Seite der Seite eignet. Oft ist dies ein festes Element, das bleibt, wo es ist, während der Rest der Seite scrollt. Der Grund dafür ist, dass die Navigation von jedem Punkt der Website aus leicht zugänglich bleibt.
Der Rest des Inhalts kann von einem der anderen Layouts in dieser Liste übernommen werden. Beachten Sie, dass ich das Layout der drei Boxen erneut geändert habe, diesmal in einer Anordnung mit vier Boxen. Wenn Sie mit dem Lesen dieses Artikels fertig sind, schauen Sie sich noch einmal alle Layouts an und überlegen Sie, wie Sie die Ideen mischen und aufeinander abstimmen können, um neue Layouts zu erstellen.
In der Wildnis
Wie im vorherigen Beispiel sehen die beiden unten aufgeführten Websites auch in Bezug auf das Layout sehr unterschiedlich aus. Wenn Sie jedoch noch einmal hinschauen, werden Sie feststellen, dass beide eine linke Seitenleiste und das Layout mit vier Kästchen verwenden.Das zweite Beispiel hat einfach die kleineren Kästchen an den Anfang der Seite verschoben! Eine weitere interessante Idee, die Sie bei der Erstellung einer Website berücksichtigen sollten, die auf diesen Beispielen basiert.
Schnappen Sie sich eine Vorlage
Eine schnelle Möglichkeit, um mit dieser Art von Layout zu beginnen, ist eine HTML-Vorlage. Pebbles ist eine einzigartige Portfolio-Blogger-Vorlage, die sich auf Minimalismus, Eleganz und Einfachheit konzentriert. Es basiert auf einem modularen Konzept und einem erstaunlichen Mauerwerks-Portfolio. Diese Vorlage mit vielen erstaunlichen Funktionen bietet die beste Lösung für jede Nische.
Überschrift & Galerie
Jeder liebt eine gute Galerieseite. Was könnte vom Layout her einfacher sein? Alles, was Sie brauchen, ist ein solides, einheitliches Bildraster und Platz für eine Überschrift mit einem optionalen Unterkopf. Der Schlüssel hier ist, Ihre Schlagzeile groß und mutig zu machen. Fühlen Sie sich frei, dies als einen kreativen Punkt zu verwenden, und fügen Sie ein Skript oder eine verrückte Schrift hinzu.
In diesem Beispiel werden gekrümmte Rechtecke verwendet, um die tatsächliche Site unten zu spiegeln. Dies kann und sollte jedoch so geändert werden, dass es zu dem passt, was Sie zeigen. Der Punkt hier ist, um Sie dazu zu bringen, über den Tellerrand hinauszudenken und nicht auf ein Quadrat zu setzen. Vielleicht könnten Sie vertikale Rechtecke oder sogar Kreise in Ihrer eigenen Galerie verwenden!
In der Wildnis
Der folgende Entwickler hat dieses Design verwendet, um eine Galerie der Logos für Kunden zu erstellen, mit denen er gearbeitet hat. Beachten Sie, dass er nicht vorschlägt, dass er die Logos erstellt hat, sondern dass er seinen Kundenstamm auf eine sehr visuelle Art vorführt. Dies zeigt, dass selbst wenn Sie kein Designer sind, eine Miniaturansicht-Galerie eine gute Möglichkeit ist, eine ansonsten einfache und langweilige Liste von Elementen zu präsentieren.
Schnappen Sie sich eine Vorlage
Eine schnelle Möglichkeit, um mit dieser Art von Layout zu beginnen, ist eine HTML-Vorlage. Proton ist ein qualitativ hochwertiges Kreativdesign mit einzigartigem Stil und sauberem Code. Proton kann für viele Zwecke verwendet werden, angefangen bei minimalen Portfolios, Agenturen, Freiberuflern und vielem mehr. Die Vorlage wird in allen Geräten erstellt und getestet und funktioniert einwandfrei ohne ein einziges Problem.
Vorgestelltes Foto
Das folgende Layout ist äußerst üblich, insbesondere in der Fotografie-Community. Die Grundidee hier ist, ein großes Bild zu erstellen, das entweder Ihr Design oder Ihre Fotografie (wirklich alles) zeigt, begleitet von einer vertikalen Navigation auf der linken Seite.
Die Navigation ist in einer linken Ausrichtung möglicherweise am stärksten. Sie können jedoch mit einer mittleren oder sogar rechten Ausrichtung experimentieren, um die gerade Kante des Fotos zu unterstreichen.
In der Wildnis
Die folgende Website macht das Beste aus diesem Layout, indem sie das dargestellte Bild in einen horizontalen Schieberegler verwandelt. Es wird jeweils ein Bild angezeigt, aber Sie können das nächste Bild auf der rechten Seite der Seite sehen. Wenn Sie den Mauszeiger darüber bewegen, wird ein Pfeil angezeigt, über den Sie durch die Fotos blättern können.
Versuchen Sie alternativ, eine Website zu erstellen, die dasselbe Layout verwendet, jedoch eine vertikal verschiebbare Bildergalerie hat. Der Raum scheint dafür eher geeignet zu sein, da Sie zum Schutz der Navigation keinen unbequemen Sperrbereich hinzufügen müssen.
Stromnetz
Das Stromnetz ist das komplexeste Layout in diesem Artikel, aber es ist eines der effektivsten Layouts, das ich für Seiten gesehen habe, die verschiedene Arten von verwandten Inhalten enthalten müssen. Von Bildern und Musik-Playern bis hin zu Text und Videos können Sie alles in dieses Layout stecken und es bleibt stark.
Der Schlüssel liegt in der unteren Hälfte der obigen Vorschau. Beachten Sie, dass es tatsächlich einen großen Container gibt, der eine Reihe von Rechtecken enthält. In diesem Container erhalten Sie die Grenzen für Ihren Bereich. Der gesamte Inhalt, den Sie darin platzieren, sollte in einem starken, aber abwechslungsreichen Raster formatiert sein, ähnlich dem Layout für erweiterte Raster am Anfang dieses Artikels.
In der Wildnis
Es kann sehr schwer sein, Ihren Geist umzuhängen, bis Sie einige Live-Beispiele sehen. Der erste ist ein Schaufenster für Kunst und Kultur. Allein diese Beschreibung sagt uns, dass der Inhalt überall auf der Tafel sein wird, und tatsächlich sehen wir, dass die Seite mit Twitter-Feeds, Fotos, Listen, Bildern und mehr gefüllt ist.
Alles passt jedoch eng in das vom Designer eingerichtete Raster. Dieses Layout ist leicht erweiterbar, sodass das Gesamterscheinungsbild recht logisch und übersichtlich bleibt, solange Sie Ihren Inhalt richtig formatieren und ordnen.
Dieses Layout erinnerte mich stark an ein Tutorial, das ich vor einiger Zeit geschrieben hatte, als ich eine Website für eine Rockband entworfen hatte. Hier haben wir eine ganz andere Seite, aber eine nahezu identische Anordnung der Inhalte, insbesondere in der unteren Hälfte. Der eigentliche Trick, um dieses Layout richtig zu machen, besteht darin, mit ein paar wirklich großen Boxen zu beginnen, die dann je nach Bedarf in kleinere Inhaltsbereiche aufgeteilt werden.
Wenn Sie sich immer noch verloren fühlen, lesen Sie das vollständige Tutorial durch, das Sie durch jeden Schritt des Prozesses führt.
Schnappen Sie sich eine Vorlage
Eine schnelle Möglichkeit, um mit dieser Art von Layout zu beginnen, ist eine HTML-Vorlage. PunicPress ist eine vollständig ansprechende HTML5- und CSS3-Vorlage, die sich hervorragend für die Planung einer Online-News-Website oder -Magazin eignet.
Vollbild Foto
Das abschließende Layout auf der Liste ist ein weiteres, das sich ideal für Fotografen eignet, jedoch auf jeder Website mit einer großen, attraktiven Hintergrundgrafik zum Anzeigen und einer begrenzten Anzahl von Inhalten funktioniert.
Es kann sehr schwer sein, Inhalte zu lesen, wenn sie über ein Hintergrundbild gelegt werden. Daher besteht die grundlegende Idee darin, eine undurchsichtige (oder fast undurchsichtige) horizontale Leiste zu erstellen, die sich auf dem Bild befindet und als Container für Verknüpfungen dient , Logos und andere Inhalte.
Verwenden Sie die Leiste nicht als einen wirklich breiten Inhaltsbereich, sondern teilen Sie sie in einige verschiedene Abschnitte auf. Dies kann erreicht werden, indem die Hintergrundfarbe geändert wird, einige subtile vertikale Linien als Trennlinien hinzugefügt werden oder sogar die große Box in kleinere, nicht verbundene Boxen zerlegt wird, wie ich es oben getan habe.
In der Wildnis
Dieses Layout mag sich sehr einschränkend anfühlen, aber im Folgenden erhalten wir einen Einblick, wie viel es halten kann. Diese Fotoseite füllt die Leiste mit Navigation, einem? Textblock, einige aktuelle Fotos mit Beschreibungen und großem Logo! Nicht schlecht für so einen kleinen Raum, und es zieht alles auf sehr saubere und unordentliche Weise ab.
Schnappen Sie sich eine Vorlage
Eine schnelle Möglichkeit, um mit dieser Art von Layout zu beginnen, ist eine HTML-Vorlage. Diese einseitige Vorlage eignet sich hervorragend für Websites auf Portfolio- oder Fotografie-Basis. Die in der Vorlage enthaltenen Abschnitte umfassen Informationen über uns, angebotene Dienste, neueste Arbeiten, Testimonials, ein funktionierendes aJax-Kontaktformular, eine einzelne Portfolio-Seite, verschiedene Newsseiten-Stile und vieles mehr.
Fazit
Es wurden einige wichtige Punkte angesprochen, die ich zum Schluss noch einmal wiederholen möchte. Erstens, obwohl das Seitenlayout nicht unbedingt eine Einheitsgröße ist. In der Praxis gibt es eine Wissenschaft, die in einer unglaublich großen Anzahl von Situationen schnell und einfach angewendet werden kann.
Als nächstes müssen die oben dargestellten Layout-Ideen nicht zu Cookie-Cutter-Websites führen, die alle gleich aussehen, sondern lediglich eine grundlegende Leinwand bereitstellen, auf der ein bemerkenswert einzigartiges fertiges Design erstellt werden kann.
Der Schlüssel zur erfolgreichen Umsetzung dieser Ideen ist schließlich, sich daran zu erinnern, dass sie nicht in Stein gemeißelt sind. Jede sollte an Ihr spezifisches Projekt angepasst werden und kann sogar gemischt und zu neuen Ideen zusammengestellt werden!
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie von den oben genannten Layouts halten. Gibt es keine der oben genannten, die Sie standardmäßig verwenden, wenn Sie Probleme haben? Hinterlassen Sie einen Link zu einem Beispiel.