Aktuelle Webdesign-Trends: Vollbild-Startseiten im Vollbildmodus

Der Vollbild-Splash ist derzeit eines der bekanntesten Muster im Web. Einige lieben es, andere verabscheuen es, aber was auch immer Ihre Gefühle sein mögen, werfen wir einen Blick auf einige bemerkenswerte Beispiele und sprechen über Best Practices, während wir dabei sind.

Ein Hinweis zur Designkonvergenz

Der Begriff „Designkonvergenz“ bezieht sich auf die Art und Weise, wie Designs die Gewohnheit haben, im Laufe der Zeit ähnlich und konvergierend zu werden. Kürzlich hat @jongold Folgendes getwittert:

Welche der beiden möglichen Websites entwerfen Sie derzeit? pic.twitter.com/ZD0uRGTqqm

- gold (@jongold) 2. Februar 2016

Sein Standpunkt war, dass Designern heutzutage die Kreativität fehlt und sie stattdessen beim Entwerfen von Webseiten nach der nächstmöglichen Konvention greifen. Der Vollbild-Splash ist ein perfektes Beispiel dafür. Gehen wir als Designer mit diesem Muster den einfachen Weg? Ignorieren wir die Möglichkeit, Grenzen zu überschreiten und Innovationen zu entwickeln? Steht das Web wegen Faulheit still?

Oder sind wir, wie Paul Boag feststellt, nur Teil einer ausgereiften Webdesign-Szene? Bauen wir, was Benutzer wollen? Was erwarten sie und erleichtern dadurch die Verwendung unserer Produkte?

"Je länger ein Objekt in der Nähe ist, desto mehr standardisiert sich sein Design" - Paul Boag

Ich überlasse es Ihnen zu entscheiden. Schauen wir uns in der Zwischenzeit einige Vollbild-Webdesigns an!

Von oben nach unten, von links nach rechts

Viele Vollbild-Websites haben genaue Abmessungen und verwenden JavaScript oder CSS, um sicherzustellen, dass der anfänglich sichtbare Bereich genau die gleiche Größe wie das aktuelle Browserfenster hat. Sobald dies erledigt ist, können einige CSS-Positionierungen Elemente an den Extremen platzieren, selbst wenn die Fenstergröße geändert wird.

Makeshift verwenden Sie dieses Muster, um eine sekundäre Navigation am unteren Bildschirmrand mit einigen Links zur vorherigen / nächsten Ausgabe links und rechts anzubringen. Das Hintergrundbild verwendet die background-size: cover; auf einem massiven figure element.

Ideas ist ein Vollbild-WordPress-Thema mit verschiedenen Optionen für Diashows, Intros, Homepage-Präsentationen usw. Es verwendet einen Farbverlauf am unteren Bildschirmrand, um den Bildtitel und die Beschreibung besser lesbar zu machen.

James Tupper schaut vom unteren Bildschirmrand nach oben, indem er seine Gesichtsgrafik mit der background-position: center bottom;. Der riesige gelbe Spritzer wird elegant mit der nativen CSS-height: 100vh; der Höhe des Ansichtsfensters gleichgesetzt.

Erfahren Sie mehr über diese beiden CSS-Techniken:

• 
  CSS
  7 CSS-Einheiten, die Sie möglicherweise nicht kennen
  Jonathan Cutrell
• 
  CSS
  Überprüfung der CSS-Hintergrundeigenschaft
  Thoriq Firdaus

Das Lifestyle-Magazin Lagom, eine Idee von Elliot Jay und Samantha Stocks, verwendet eine Homepage, die den gesamten Bildschirm ausfüllt. Kein Scrollen hier (außer auf einem kleinen Bildschirm). Lagom nutzt den unteren Rand, um seine sozialen Verbindungen unterzubringen.

Soul ist eine Shopify-Vorlage, und eines der Layouts ist ein Vollbild-Schieberegler mit Navigationslinks auf der rechten Seite.

Scrollen Sie bitte weiter ↓

Die Gefahr bei der Verwendung des Vollbilds als Einführungsform besteht darin, dass Benutzer möglicherweise nicht erkennen, dass durch Scrollen mehr gefunden werden kann. Unsere eigene Envato-Homepage negiert dies mit einem "Bildlauf" -Symbol, was darauf hindeutet, dass Sie einen Blick unter die Falte werfen sollten.

Blandly entscheiden sich für die nach unten gerichtete Förderung zeigt Pfeilspitze „hier unten“ zu sagen.

Die Kindeo-Homepage verwendet eine Technik, die mir gefällt. Stellen Sie sicher, dass immer ein kleiner Ausschnitt des nächsten Abschnitts am unteren Rand des Ansichtsfensters sichtbar ist. Es gibt auch einen Pfeil mit der Aufschrift "Weitere Informationen", damit der Benutzer nie daran zweifelt, dass sich unter der Falte etwas befindet.

Kilani hat den eher zweifelhaften Ansatz gewählt, Sound automatisch abzuspielen. Unten rechts auf dem Bildschirm befindet sich eine Stummschalttaste. Interessant ist auch die Art und Weise, wie Sie vorschlagen, weiter zu scrollen, indem Sie eine Anweisung zum Scrollen nach unten an den Mauszeiger heften:

Video

Damir Kotorić, ehemaliger UX-Designer bei Envato, begann Falcon Films aufgrund seiner Leidenschaft für Luftaufnahmen. an und schauen Sie sich dann das Showreel an, um saftiges Melbourne-Drohnenmaterial zu sehen. Es ist nur vernünftig, dass Videos auf der Homepage von Falcon Films eine große Rolle spielen. Schauen Sie sich den Hintergrund <video> an und schauen Sie sich dann das Showreel an, um saftiges Melbourne-Drohnenmaterial zu sehen.

Wieder hat Damir native CSS min-height: 100vh; um einen Vollbild-Heldenbereich zu erstellen.

Landscape erzielt fast den gleichen Effekt; Ein Video im Vollbildmodus, das automatisch mit zusätzlichem Showreel abgespielt wird, jedoch JavaScript verwendet, um den Vollbildmodus zu erhalten. Die automatisch wiedergegebene mp4-Videodatei selbst ist 1,3 MB groß, aber es gibt nichts anderes, was Ihre Bandbreite verstopfen könnte.

Stil

Eine Sache, die wir noch nicht erwähnt haben, ist das, was uns der Vollbildmodus bietet: eine Leinwand! Die Nutzung des Raums zur Präsentation eines Produkts, eines Unternehmens oder einer Idee ist der springende Punkt dieses Musters. Es beseitigt die Unordnung des restlichen Inhalts und konzentriert sich auf Botschaft und Persönlichkeit.

Das Landschaftsbeispiel von früher verwendet ein wunderschönes Kobaltblau (einer der Gründe, warum ich es liebe) und Voog macht etwas Ähnliches, was großartig aussieht.

Ich sage es aber immer - dieses Bild ist duoton, daher können die aktuellen 540 KB leicht auf die richtige Größe reduziert werden. Durch leichtes Verwischen und anschließendes Reduzieren der JPG-Qualität auf 50% wird die JPG-Qualität auf etwa 50 KB reduziert, ohne den Effekt zu beeinträchtigen.

Die Bloomberg Businessweek Design Conference (gehen Sie?) Verwendet ein abstraktes typografisches Layout, um ihren Standpunkt zu verdeutlichen. Designkonvergenz? Nicht hier, Kumpel.

Habe ich jemals das Envato Tuts+ Translation Project erwähnt? Möglicherweise ... Wie auch immer, ich mag die Demonstration des RTL-Skripts in diesem Thema - sehen Sie sich Proland an, eine von Bootstrap erstellte Landingpage-Vorlage mit mehreren Layoutoptionen für das Vollbild.

Sind Sie fertig?

Die Vollbild-Startseite ist ein Muster, das wahrscheinlich nicht so schnell verschwinden wird. Und warum sollte es? Dies ist eine effektive Möglichkeit, Benutzern Websites aller Art vorzustellen. Was sind einige Ihrer Favoriten? Wo sonst haben Sie dieses Muster zum Guten oder Schlechten gesehen? Lass es uns in den Kommentaren wissen!