Ein Bildschirm in zwei Teile geteilt.

Die Split-Screen-Technik ist seit langem in der Filmindustrie bekannt, mit frühen Beispielen aus den Stummfilmtagen des frühen 20. Jahrhunderts, und es ist immer noch ein beliebtes Gerät in Film und Fernsehen.

001

Ein Split-Screen-Layout wird verwendet, wenn Vollbildelemente in zwei oder mehr vertikale Teile unterteilt sind. Eine Szene aus dem Film "Scott Pilgrim vs the World"

Dies ist jedoch eine relativ neue Technik für die Webdesign-Industrie. Geteilte Bildschirme wurden erst Mitte 2016 populär und nun haben wir immer mehr Websites, die dieses Designmuster verwenden. Es gibt einige Gründe, warum dieses Designmuster so populär wurde:

  • Es hat eine schöne ästhetische Qualität. Bei korrekter Ausführung kann es Benutzern ein wunderbares Seherlebnis bieten.
  • Es ist eine gute Wahl für reaktionsfähige Frameworks. Split-Screen-Design kann für eine Vielzahl von Bildschirmen angepasst werden, auch für kleine. Bei kleineren Bildschirmen wie mobilen Displays können die Panels gestapelt werden.
  • Es hilft Navigation zu führen. Mithilfe einfacher Entwurfstechniken können Sie die Aufmerksamkeit des Benutzers auf einen bestimmten Teil des Bildschirms lenken oder ihn zum Klicken auffordern.

Wenn Split Screen am besten funktioniert

Split-Screen ist besonders gut, wenn Sie zwei Dinge zu fördern haben. Zum Beispiel, wenn eine Website zwei völlig gegensätzliche Varianten anbietet. Dieser Ansatz ermöglicht Designern, beide Dinge hervorzuheben und dem Benutzer zu ermöglichen, schnell zwischen ihnen auszuwählen.

002

Ein Bildschirm, zwei Nachrichten in Dropbox Guides

Wenn Sie den geteilten Bildschirm vermeiden sollten

Split-Screen-Designs lassen sich nicht gut erweitern, da der Inhalt wächst. Daher ist es nicht empfehlenswert, sie auf Content-schwere Layouts anzuwenden. Es ist wichtig, die Bildschirme einfach zu halten, da komplexe geteilte Bildschirme die Benutzeroberfläche überladen aussehen lassen. Aus diesem Grund eignet sich das Split-Screen-Layout perfekt für minimalistische Website-Designs.

Wie man entscheidet, wenn geteilter Bildschirm für Sie gut ist

Wenn Sie eine Split-Screen-Technik für Ihre Website in Betracht ziehen, rate ich Ihnen, sich ein paar Fragen zu stellen:

  • Ist es für deine Inhalte geeignet?
  • Wird es genug negativen Platz geben, um das Layout funktionieren zu lassen?
  • Werden Ihre Benutzer das Layout zu schätzen wissen, oder wird es sie verwirren?
  • Ist es in Ordnung, die Aufmerksamkeit Ihrer Nutzer in zwei Hälften zu teilen?

Die wichtigste Sache zu beachten, dass Inhalt ist König und Split-Screen sollte eine einfache Möglichkeit sein, Ihre Nachricht an die Menschen zu liefern.

Design-Techniken für geteilte Bildschirme

1. Paar lebendige Farbe und dramatische Typografie

Dank Flat und Material Design sind lebendige Farben und dramatische Typografie jetzt große Trends. Leuchtende Farben wirken visuell anregend und dramatische Typografie verstärkt den Textinhalt. Kombinieren Sie einfach beides und Sie erhalten ein visuell interessantes Design. Baesman hat das meisterhaft gemacht. Sie haben beiden Elementen gleiche Bedeutung beigemessen und gleichzeitig dem Benutzer die Möglichkeit gegeben, schnell zwischen ihnen zu wählen.

003

Helle Farben und interessante Typografie-Paare können Interesse wecken

2. Zeichnen Sie die Aufmerksamkeit des Benutzers auf die CTA-Schaltfläche

Viel mehr als ein einfacher Grafiktrend, der den Bildschirm in zwei verschiedene Teile aufteilt, bietet eine originelle Möglichkeit, den Benutzer durch Ihre Website zu führen. Es ist eine großartige Option, wenn Sie einen größeren Schwerpunkt für Calls to Action erstellen möchten. Im folgenden Beispiel können Sie sehen, wie der negative Raum eine vertikale Teilung erzeugt, um zwei verschiedene Optionen gleich zu gewichten.

004

Vertikale Unterteilung ermöglicht die Betonung von zwei verschiedenen CTAs, ohne diese zu bevorzugen

3. Erstellen Sie einen visuellen Fluss zwischen "Screens"

Wenn der geteilte Bildschirm ein einzelnes Objekt darstellt, ist es wichtig, eine Verbindung zwischen Inhaltscontainern herzustellen. Eine Möglichkeit, dies zu tun, ist die Verwendung einer Farbe. Duplizieren Sie einfach eine bestimmte Farbe, um den visuellen Fluss zwischen zwei Bildschirmen herzustellen. Dies funktioniert besonders gut mit einer Markenfarbe oder einem Farbton mit viel Kontrast. Durch die Verwendung von Farbe ist es möglich, eine stärkere Verbindung zwischen zwei Teilen des Inhalts zu kommunizieren.

Eine weitere Möglichkeit, eine starke Verbindung zu erstellen, besteht darin, ein einzelnes Element, z. B. eine Textkopie, auf mehrere Bildschirme zu kopieren:

005

Überlappender Text verbindet zwei Bildschirme

Zu guter Letzt können Sie ein farbiges Overlay für diesen Zweck verwenden:

006

Betrachten Sie den linken Teil des Bildschirms

4. Verwenden Sie Animation, um Benutzer zum Handeln zu ermutigen

Feine Animationen und interaktive Effekte regen den Benutzer zum Klicken an. Schau dir das Design für die " Tschechow ist lebendig "Seite unten. Das Design bittet dich zu klicken, um deinen Charakter zu finden.

007

Fazit

Es dauert ungefähr drei Sekunden, bis ein Besucher eine Entscheidung bezüglich Ihrer Website trifft. Folglich sollten Ihre Layouts immer besucherfreundlich sein, wenn Sie die Absprungraten reduzieren möchten. Split-Screen-Technik kann Ihnen dabei helfen. Split-Screen-Designs sind eine unterhaltsame, funktionale und reaktionsschnelle Möglichkeit, um ein ansprechendes Design zu erstellen.