In dieser Übersicht werden Ihnen die einzelnen Trends und schöne Beispiele vorgestellt, die Sie für Ihr nächstes Projekt inspirieren werden.
1. Außergewöhnliches Layout
Abbildung 1
2. Einzelseitenlayout
Abbildung 2
3. Mehrspaltiges Layout
Abbildung 3
4. Riesige Illustrationen und lebendige Grafiken
Abbildung 4
5. Mehr Leerraum als zuvor
Abbildung 5
6. Soziale Designelemente
Abbildung 6
7. Konversationsnavigation
Abbildung 7
8. Registerkarte „Dynamisch“.
Abbildung 8
9. Großes Suchfeld
Abbildung 9
10. Fügen Sie der Klassifizierung visuelle Effekte hinzu
Abbildung 10
11. Avatar des Autors
Abbildung 11
12. Symbole und visuelle Hinweise
Abbildung 12
13. Tag-Index (ersetzt Tag-Cloud)
Abbildung 13
14. Verwenden Sie Illustrationen in Blogs
Abbildung 14
15. Aquarellmalerei
Abbildung 15
16. Handschrift
Abbildung 16
17. Retro
Abbildung 17
18. Verwenden Sie organische Materialien, Ziegel und Fotografie als Hintergrund
Abbildung 18
19. Markierungssiegel
Abbildung 19
20. Preisschild
Abbildung 20
21. Band
Abbildung 21
Außergewöhnliches Layout
Wie in 40 innovative Design-Layouts: Außergewöhnliches Layout vor einigen Monaten gezeigt, beobachten wir einen starken Trend zu personalisierteren und innovativeren Layouts. Anstatt herkömmliche, kastenförmige Layouts zu verwenden, experimentieren Designer mit neuen Möglichkeiten der Strukturierung, Präsentation und Darstellung von Informationen.
Bei diesen außergewöhnlichen Layout-Designs ist die Gesamtkreativität oft wichtiger und einprägsamer als der spezifische Inhalt. Dennoch werden Benutzerfreundlichkeit, Typografie und visuelles Design selten übersehen und sorgfältig umgesetzt. Innovatives Layout ist besonders beliebt bei großen Projekten, Website-Design-Agenturen und Werbe-Websites (z. B. kommerziellen Aktivitäten großer Unternehmen), aber auch bei Blogs.
Abbildung 22
Wenn es um Kreativität geht, ist die Grenze zwischen brauchbarem und unbrauchbarem Design sehr fließend. Daher sind Usability-Tests besonders wichtig, da eine neue Idee die bestehenden Dinge auf der Website zerstören kann. Oft ist es eine gute Idee, eine Balance zwischen kreativen, klassischen und traditionellen Designs zu finden, was bedeutet, dass man versucht, eine Balance zwischen einem „unzerstörbaren“ (oder letztendlich sogar langweiligen) brauchbaren Design und einem kreativen, aber unbrauchbaren Design zu finden. Denken Sie daran, dass Ideen Zeit brauchen, um zu wachsen: überdacht, überarbeitet, optimiert, verfeinert und schließlich in Ihr Design integriert.
Designern wird dringend empfohlen, sich von den Konventionen traditioneller Box-Layouts zu lösen und neue Ansätze und eigene mutige und verrückte Ideen auszuprobieren. Zeigen Sie Ihre Talente!
Abbildung 23
Abbildung 24
Abbildung 25
Abbildung 26
Abbildung 27
Abbildung 28
Single-Page-Layout
Eine weitere Möglichkeit, mit der Designer häufig Besucher beeindrucken, ist das sogenannte Single-Page-Layout: Bei diesem Layout wird der Inhalt der Website auf einer einzigen Seite dargestellt. Dies bedeutet nicht unbedingt, dass diese Designs minimalistisch sind (nach dem Prinzip „Weniger ist mehr“). Im Gegenteil, diese Art von Design ist oft sehr komplex, enthält reichhaltige Bilder und lebendige Animationseffekte und dauert daher eine Weile zum Laden.
Abbildung 32
Wenn der Benutzer auf eine Navigationsoption klickt, ändert sich die Seite (teilweise) und der neue Inhalt von http://www.knowsky.com erscheint in dem Bereich, in dem der vorherige Inhalt angezeigt wird. Die Schiebe- und Scrolleffekte der Navigation in diesem Layout werden von öffentlichen JavaScript-Bibliotheken unterstützt.
Der Hauptvorteil für Benutzer ergibt sich aus der einfachen Tatsache, dass weniger Mausbewegungen und Klicks erforderlich sind, um die gewünschten Informationen zu erhalten. Da dieser Ansatz so neu ist, bietet er eine großartige Gelegenheit für Benutzer, die bei der Verwendung nicht-traditioneller Navigation möglicherweise verwirrt sind. Es gibt Situationen, in denen eine „statische“ Version nützlich oder sogar notwendig sein kann. Sie müssen beispielsweise eine andere Version für Suchmaschinen und Benutzer bereitstellen, die JavaScript deaktiviert haben.
Abbildung 33
Abbildung 34
Abbildung 35
Mehrspaltiges Layout
Mehrere Spalten (mehr als 3 Spalten) bedeuten nicht unbedingt ein komplexes Design. Auf der anderen Seite können mehrere Spalten bei richtiger Gestaltung für Besucher sehr hilfreich sein, da sie einen besseren Überblick über die sichtbaren Navigationsmöglichkeiten bieten und es Benutzern ermöglichen, die gesuchten Informationen schnell zu finden.
In den letzten Jahren haben wir eine Explosion von Website-Inhalten erlebt, die dazu geführt hat, dass die Aufmerksamkeit und die Zeit, die Benutzer auf der Website verbringen, zurückgegangen ist (Einzelheiten finden Sie unter ReadWriteWeb). Kein Wunder also, dass Designer versuchen, Informationen prägnanter darzustellen, damit Besucher möglichst lange auf der Website bleiben und die Inhalte leichter finden.
Abbildung 36
Eine Möglichkeit, dies zu erreichen, besteht darin, ein Layout mit mehreren benachbarten Spalten zu verwenden. Diese Idee macht absolut Sinn. Die Bildschirmauflösungen sind in den letzten Jahren gestiegen (dies könnte sich jedoch ändern, wenn Netbooks wie der Asus Eee PC allgemein verfügbar werden), wodurch den Benutzern mehr horizontaler Platz und den Designern mehr Platz zum Ausfüllen von Inhalten geboten wird.
Die Ergebnisse zeigen, dass immer mehr Designer immer mehr Spalten in ihren Designs verwenden. Unsere Untersuchungen ergaben einen starken Trend zu diesen sogenannten mehrspaltigen Layouts, typischerweise mit einer festen Breite von 850 Pixeln auf einem 1000-Pixel-Bildschirm. In Zeitschriftenlayouts und großen Projekten werden häufig mehrere Spalten verwendet. In diesen Layouts werden häufig Raster verwendet, um strukturelle Ausgewogenheit, Hierarchie und Ordnung sicherzustellen.
Bei der Verwendung eines mehrspaltigen Layouts kann die Bedeutung des aktiven Leerraums und zwischen einzelnen Spalten nicht genug betont werden. (Aktiver Leerraum wird absichtlich leer gelassen, um die Struktur der Seite besser darzustellen und verschiedene Inhaltsbereiche hervorzuheben.)
Zu diesem Zweck verwenden Designer häufig das „Shneiderman-Mantra“ („Zeigen Sie zuerst das große Ganze, zeigen Sie später die Details“). , indem Sie dem Benutzer zunächst einen Überblick über die Funktionalität geben und dann bei Bedarf Details bereitstellen – später, wenn auf einen Link geklickt wird (Mozilla Labs ist ein Paradebeispiel).
Abbildung 37
Abbildung 38
Abbildung 39
Abbildung 29
Abbildung 30
Abbildung 31