Erstellen von inhaltsintensiven Layout-Tipps und Beispielen

Um umfassende Layouts für das Web zu erstellen, sind viel Können und viel Engagement erforderlich. Webdesigner erledigen einen Job, für den die meisten nicht in der Lage sind. Mit der Weiterentwicklung der Webseiten haben wir die Notwendigkeit erkannt, mehr Platz zu füllen und mehr Inhalte als je zuvor zu speichern. Wenn Sie bereits wissen, wie Sie eine Website entwerfen, ist dies ein großer Vorteil, wenn Sie diese Methoden besser verstehen. Kernfunktionen einer Website ändern sich selten. Bei überdurchschnittlichem Seiteninhalt spielen jedoch andere Faktoren eine Rolle, darunter Leerraum, Typografie und Elementpositionierung.

Wir werden im Detail einige wichtige Tipps zum Erstellen inhaltsintensiver Layouts behandeln. Diese können von Social-Networking-Apps, großen Business- und Unternehmenswebsites oder allem dazwischen reichen. Es ist wichtig sich zu fragen "Was versuche ich mit diesem Design zu erreichen?"wenn Sie Seiten entwerfen, da dies Ihnen hilft, eine breitere Perspektive vorhersehen zu können.

Benutzerdefinierte Webseiten

Ganz gleich, wie viel Erfahrung Sie im praktischen Webdesign haben, es ist wahr, dass wir alle irgendwo anfangen mussten. Das Erstellen von benutzerdefinierten Webseiten ist im Allgemeinen der erste Schritt auf dem Weg zu einer Karriere in der Webprogrammierung, bevor herkömmliche Spezifikationen angewendet werden.

Ich empfehle immer, eine kleine Liste von Seitenelementen zu erstellen, die als in die Vorlage installiert gelten. Sobald diese aufgeschrieben sind, wird es einfacher, die schlechten Ideen auszusondern oder verpasste oder vergessene Edelsteine ​​aufzugreifen. Dies ermöglicht auch eine einfache Planung, um die Straße zu entlasten.

Layout Wireframe

Bei der generischen 5-Seiten-Website werden häufig dieselben Elemente wiederholt. Ein Logo in der oberen Ecke, Kopfnavigationslinks, Hauptinhaltsbereich, der möglicherweise mit einer Seitenleiste aufgeteilt ist, und andere Funktionen (Anmelden, Suchfeld usw.)..

Betrachten Sie einen guten Ausgangspunkt für detaillierte Seitenlayouts. Viele Designer halten es für hilfreich, mögliche Drahtgitterdesigns zu skizzieren, um die nicht so offensichtlichen Mängel auszuschließen. Dies erfordert kein ausgefallenes Papier und kann sogar in einem heruntergekommenen Notebook ausgeführt werden. Der Zweck eines Wireframes besteht darin, eine ungefähre Vorstellung davon zu geben, wo sich das Site-Layout befinden sollte, um die Details später ausfüllen zu können.

Bei inhaltsintensiven Layouts sollte berücksichtigt werden, wie viel die Plattform enthalten wird. Wenn Sie ein geschlossenes Layout mit zwei bis drei Spalten erstellen, um mehr als 100 Seiten mit langen, komplizierten Inhalten zu hosten, bleibt nicht viel Raum zum Atmen. Indem Sie im Voraus skizzieren und planen, können Sie die Menge an Platz für den Seiteninhalt steuern. Dies kapselt nicht nur Text oder Bereiche ein, sondern behandelt auch Bilder und Videos.

Glänzender weißer Raum

Weißabstand ist möglich der wichtigste Faktor bei inhaltsintensiver Layoutgestaltung zu berücksichtigen. Der Inhalt der Website regelt dies mehr als jede andere Website. Wenn Leser den Inhalt nicht verstehen können, weil es keinen Platz gibt, um Ihre Worte zu verdauen, wird der Verkehr spottisch und unzufrieden sein.

Absätze und Seitenkopfzeilen sind ein guter Anfang, um mit Anpassungen zu beginnen. Mit CSS-Eigenschaften sollten Sie die äußeren Ränder bearbeiten und die einzelnen Blockzeilen-Textelemente auffüllen können. Dazu gehören alle Überschriften 1 bis 6, Absätze, Blockzitate, Listen, vorformatierten Text und einige kleinere Elemente.

Wenn Sie die Aufmerksamkeit Ihres Lesers erhalten möchten, ist es wichtig, Abstand unter den Haupttextelementen zu verwenden. Absätze und kleinere Überschriften funktionieren am besten, wenn der untere Rand 15px-25px beträgt. Für größere Seitenelemente wie h1 oder h2 sollten Sie 35px + in Betracht ziehen (dies hängt auch von Ihrer Schriftgröße ab). Leerzeichen zwischen vertikalen Elementen sind wichtig für das Scrollen und das Scannen "auf einen Blick". jedoch Zeilenhöhe ist eine weitere wichtige CSS-Eigenschaft, die den Abstand zwischen Zeilen in einem Textelement beeinflusst. Absätze sollten im Vergleich zu ihrer Schriftgröße einen viel größeren Zeilenhöhenwert aufweisen, sodass zwischen den Zeilen viel zusätzlicher Abstand eingefügt wird.

Betrachten Sie dynamische Stile

Abgesehen vom Abstand, digitale Typografie sollte so manipuliert werden, dass es von der Seite springt. Bei Hunderten von Millionen von Websites in der heutigen Welt ist es üblich, überall dieselben Schrifttypen zu sehen.

Wenn Sie ein Layout für eine mit Inhalten beladene Website entwerfen, sieht das Ergebnis am Ende wie eine andere einfache Vorlage aus. Es gibt viele Eigenschaften, mit denen Sie für fortgeschrittene typografische Stile herumspielen können. Textschatten, weniger / mehr Buchstabenabstand, Hintergrundplattformen, Symbole… die Liste ist endlos.

Sie sind wirklich der Designer und Ihr letztes Wort ist Gesetz. Das Entwerfen eines Layouts ist nicht vergleichbar mit einer einspurigen Autobahn ohne Abbiegung. Während des Prozesses können Sie zurückgehen und Stile ändern, neue Elemente bearbeiten oder ein Konzept vollständig verwerfen. Überlegen Sie sich einige andere nützliche CSS-Tipps und probieren Sie aus, was am besten passt!

Dropdown-Menüs verwenden

Bei so viel Inhalt ist es unwahrscheinlich, dass alle Links auf eine einzige Seite passen. Es gibt viele Optionen zum Umgang mit einer Überladung von Seiten. Wenn Sie zusätzliche Links in Seitenleistenblöcken platzieren oder in Spalten in der Site-Fußzeile einnähen, stehen zwei zweckmäßige Optionen zur Verfügung.

Am bequemsten und praktischsten ist es, ein Dropdown-Navigationsschema mit Kopfkategorien und Unterkategorien zu erstellen. Es gibt auch viele Open-Source-Skripts, die Unterkubkategorien anbieten, wenn Sie detaillierte Themen haben.

Möglicherweise ist die schnellste und am wenigsten frustrierende Strategie, mit einem JavaScript-Framework zu beginnen. Einige der beliebtesten sind jQuery, MooTools oder möglicherweise Prototype. Alle diese Bibliotheken bieten Dokumentation, und viele bieten kostenlose Dropdown-Menüskripts an.

Planen von Inhaltsansichten

In der Praxis ist es viel schwieriger, einen vereinfachten Körperbereich zu erstellen, der den gesamten Inhalt Ihrer durchschnittlichen Website enthält. Mit den wechselnden Browser-Standards und der halbwegs mobilen Unterstützung ist es kein Wunder, dass solche inhaltsintensiven Websites abgeschaltet werden. Achten Sie auf jeden angezeigten Stil der Webseite. Einige enthalten mehrere Bilder, andere enthalten möglicherweise eine primäre Grafik oder ein Video oder überhaupt keine Grafiken. Nachdem Sie das endgültige Layout codiert haben, erstellen Sie mehrere HTML-Seiten, um verschiedene Ansichten aufzunehmen.

Diese haben alle dieselbe interne Markierung, außer für Inhalte im Hauptinhaltsbereich. Jede einzelne Seitenansicht kann manipuliert werden und bietet Einblick in ein fertiges Produkt. Aktivieren Sie diese Option, um alle wichtigen Ansichten zu enthalten, von denen Sie glauben, dass sie auf jeder Seite benötigt werden. Andere Beispiele für Seitenelemente könnten Kommentarfelder, Videos oder eingebettete Galerien oder Linkseiten enthalten.

Strategien gründlich planen

In Wahrheit ist es nicht ganz schwierig, ein leistungsstarkes Weblayout zu erstellen. Viele Designer erfahren etwas über die kleinen Details, wie das Blockieren von Elementen oder das Hinzufügen von Hyperlinks. Diese Details sind wichtig, da sie über eine Branding-Nachricht gesendet werden. Auch aus kleineren Elementen sollte die Nachricht mit der gesamten Seite kombiniert werden. Planen Sie geistig die Phasen Ihres Designs, um herauszufinden, wie sich die einzelnen Hindernisse am besten nähern. Wenn Sie mit einem Kunden arbeiten, sollten Sie vorher besprechen, welche Art von Inhalt Seiten füllen soll. Dies gibt Ihnen die Möglichkeit, im Voraus zu planen und den besten Ansatz für ein allgemeines Layout zu bestimmen.

Ein weiteres besonders drolliges Thema ist das mobile Design. In diesem neuen Markt werden nicht nur Smartphones, sondern auch leistungsstarke Tablet-PCs enorm erweitert. Dies bedeutet, dass Benutzer möglicherweise von einem mobilen Bildschirm aus auf Ihr Layout zugreifen. Stellen Sie sicher, dass der Inhalt nicht überläuft und ordentlich präsentiert wird.

7 Beispiele für Websites mit umfangreichen Inhalten

Im Folgenden finden Sie einige Beispiel-Screenshots von beliebten inhaltsintensiven Websites. Dies sind zumeist bekannte Marken sowohl in physischen als auch in digitalen Märkten. Sehen Sie sich einige Ideen an, um Inspiration für Ihre eigenen Projekte zu erhalten. Sie können auch andere inhaltsintensive Weblayouts im Kommentarbereich freigeben.

Clicker

Clicker ist eine neue Social-Networking-Anwendung für TV- und Filmliebhaber. Sie können sich für ein neues Konto registrieren und einige Ihrer bevorzugten klassischen Fernsehsendungen finden, die nach Saison und Episodenliste archiviert sind. Sie könnten die Site mit IMDB vergleichen, mit weniger Informationen und mehr Videoinhalten!

Zukunft des Webdesigns

Future of Web Design 2011 wird in diesem Frühjahr in London losgehen. Auf der Homepage finden Sie weitere Informationen und ein gutes Beispiel für eine textbasierte Layoutgestaltung. Alle Details werden wirklich geteilt und bieten Referenten, Zeitpläne, Workshops, Sponsoren und vieles mehr.

Lord Wahrscheinlich

In diesem komischen Layout wurde die Hauptfigur Lord Likely "cartoonisiert" und zu einer Illustration perforiert. Die Website ist in 3 Spalten mit jeweils neuen Inhalten, Anzeigen, Feed-Links und Archiven unterteilt. Das Design selbst ist sehr retro und eine clevere Interpretation der Illustrationsdesigns.

Microsoft

Die meisten Tech-Enthusiasten sind mit Microsoft vertraut. Die meisten Leute, die wissen, was ein Computer ist, können Ihnen sogar eine kurze Beschreibung von Microsoft und Bill Gates geben. Ihre Homepage enthält Inhalte für Dutzende von Softwarepaketen, Nachrichtenaktualisierungen, Pressemitteilungen und Entwicklerinformationen. Ein Stück weiter auf der Seite können Sie ein vertikales Registerkartenmenü mit dynamischem Inhaltswechsel erkennen.

Suchmaschinenland

Search Engine Land ist ein beliebtes Webmagazin, das sich auf Suchmaschinen und Internet-Marketing konzentriert. Sie werden häufig mit erstaunlichen Qualitätspostings aktualisiert und fahren jeden Tag hunderttausende Menschen auf ihre Website. Die Hauptseite gliedert sich in 3 Spalten, in denen jedes Inhaltsmodul und jede Werbung enthalten ist.

Das weiße Haus

Das United States White House-Design sieht sehr sauber und professionell aus. Es gibt viele Informationen zum Zeitplan des Präsidenten und zu anderen wichtigen politischen Ereignissen. Ein Trick, um den Seitenraum zu verringern, war das Hinzufügen eines kleinen Inhalts-Schiebereglers in Richtung der Seitenüberschrift. Dies ist ideal für die Anzeige von 3-4 großen Schlagzeilen, wenn Ihre Besucher auf der Seite landen.

Yahoo Portal

Soweit große Websites mit Inhalten gehen Yahoo! muss zur Spitze hin tendieren. Yahoo! bietet ihren Kunden Hunderte von Dienstleistungen an, darunter Webmail, Nachrichten, Videos und sogar die Websuche. Schauen Sie sich einige der Y an! Portal-Links in der Seitenleiste, um zu sehen, wie ihre Vorlagen miteinander verglichen werden.

Fazit

Dies sind nur einige der wichtigsten Punkte und Schritte zum Erstellen konkreter inhaltlicher Layouts. Webseiten mit großen Inhaltsreservoirs werden oft als belastendes SEO-Futter angesehen und nichts von echter Bedeutung. Design ist alles, denn es ist der erste Eindruck, den ein Nutzer von jeder Website bekommt. Bei hohen Inhalten kann dies zu einer Katastrophe mit Unordnung und übermäßigen Verallgemeinerungen führen. Nie aufhören zu üben, und mit nur wenigen Projekten erhalten Sie eine Meisterschaft für inhaltsintensive Layouts.