Ein Bildschirm ist zweigeteilt. Dies könnte einer der größeren Designtrends sein, die gerade auftauchen. Immer mehr Websites verwenden Designmuster, die zwei vertikale oder quadratische Felder enthalten, die nebeneinander angeordnet sind.
Und es ist eine schöne Ästhetik. Der Look ist benutzerfreundlich, kann an eine Vielzahl von Anforderungen angepasst werden und hilft bei der Navigation. Es ist ein Trend, von dem wir in den kommenden Monaten wahrscheinlich mehr und mehr Design sehen werden. Heute betrachten wir einige großartige Beispiele für das Design mit geteiltem Bildschirm mit Mini-Fallstudien und erfahren, wie Sie diesen Design-Trend optimal nutzen können.
3 Fälle für Split Screen Design
Warum sollten Sie Ihr Design in zwei Hälften teilen? Wenn Sie mir die Frage gestellt haben, ohne die Ergebnisse zu sehen, hätte ich sie vielleicht auch in Frage gestellt. Es gibt jedoch einen guten Grund, ein Split-Screen-Konzept auszuprobieren.
- Es ist eine gute Wahl für responsive Frameworks. Bei größeren Bildschirmen ist das Design aufgeteilt, aber bei kleineren Bildschirmen können die Paneele gestapelt werden.
- Es ist einfach, mit Animationen und Effekten zu arbeiten, die zum Klicken anregen. Schauen Sie sich das Gamification-Modell an, das für die? Tschechow is Alive? Website oben. Das Design fordert Sie auf, Ihren Charakter zu finden. (Und es ist sehr schwer, nicht hineingezogen zu werden.)
- Zwei symmetrische Fenster erleichtern die Erstellung einer modularen Gliederung für die Gestaltung der Füllstelle und das Organisieren von Inhalten innerhalb der Blöcke. Es ist fast eine übergroße Erweiterung der beliebten Kartenmuster.
Mit Farbe und Typografie werden Sie mutig
Farbe und Typografie sind dank des verstärkten Fokus auf Flach- und Materialdesign große Trendtreiber. Kombinieren Sie die beiden und Sie erhalten eine einfache Ästhetik, die interessant und fesselnd sein kann.
Baesman hat dies mit Split-Screen-Design meisterhaft gemacht. Zwei helle, kräftige Farbfelder sind die erste Einführung für diesen Benutzer. Coole Schwebeflugstaaten erweitern? Das Messaging in jedem Panel fordert den Benutzer fast dazu auf, weiter zu klicken. Die Auswahl der Schrift ist einfach, hat aber gerade genug Kanten, um einen Blick auf die Schrift zu werfen.
Klicken Sie sich durch die Website, und Sie können leicht erkennen, dass dieses Split-Screen-Konzept den Eindruck von Fluss und Organisation vermittelt. Während der Rest des Designs nicht so perfekt aufgeteilt ist wie die Startseite, werden die Inhalte im gesamten Design in Bedienfeldern angeordnet und die helle Farbe wird durchgelassen.
Erstellen Sie einen Bereich für Messaging
Ein geteilter Bildschirm ist eine großartige Option, um ein visuelles Thema zu erstellen, das mit anspruchsvollen Inhalten oder Bildern funktioniert, oder einfach, wenn Sie einen größeren Fokus für Handlungsaufforderungen erstellen möchten. Der Trick für diese Arbeit besteht aus viel Platz, sauberer Typografie und der Sicherstellung, dass der Split-Stil (im Fall des Beispiels hier eine Farbüberlagerung) die Bildsprache ergänzt.
BAO verwendet ein Heldenbild im Vollbildmodus hinter einem Farbblock mit Text, Navigation und einem Aufruf zum Handeln. Das Design ist in vielerlei Hinsicht interessant, da es aus einigen der uns bekannten Muster ausbricht, ohne jedoch verwirrt zu sein. Beispielsweise befindet sich die Navigation (Hamburger-Menü) in der Nähe der Bildschirmmitte, und das Heldenbild enthält nur eine Animation mit Schwebeflug.
Diese Dinge helfen Benutzern dabei, den Aufruf zur Aktion auf der linken Bildschirmgröße zu erhalten. Das Besondere an diesem Design ist, dass jeder Bildschirm fast wie eine eigene Homepage wirkt, so dass jeder Inhalt gleich gewichtet wird. (Diese Art der Behandlung ist nicht für jedes Projekt geeignet, eignet sich jedoch besonders gut, um die Portfolio- oder Kundenarbeit zu präsentieren.)
Konzentriere dich auf eine Aktion
Ein Split-Screen-Website-Design kann auch an Druck erinnern. Dies funktioniert besonders gut mit einem minimalistischen Rahmen, der einen eindeutigen Handlungsaufruf für Benutzer beinhaltet.
Im Falle von Tree That Gives besteht das Ziel der Website darin, Spenden mit der einfachen farbigen Schaltfläche in der rechten unteren Leiste zu fördern. Das Bild dient lediglich als Landeplatz für Benutzer, die auf die Seite gelangen, aber alle wichtigen Inhalte und Informationen befinden sich im anderen Fenster. (Diese Hälfte der Website könnte tatsächlich inhaltlich alleine leben, wäre aber visuell nicht annähernd so interessant.)
Karten erstellen?
Split-Screen-Design ist ein Muster, das aus der Beliebtheit von Karten abgeleitet ist. Viele dieser Websites enthalten Interaktionen, die auf der einen oder der anderen Seite des Bildschirms enthalten sind, und zwar nach einem Container und einer Klick-Philosophie, die für Kartenschnittstellen charakteristisch ist.
Erwägen Sie die Erweiterung des geteilten Bildschirms in mehrere Container, um noch mehr potenzielle Berührungen von jedem Benutzer zu ermöglichen. Si le Soleil verwendet auf dem gesamten Gelände einen geteilten Bildschirm. Der große Unterschied ist, dass das linke Panel eine "Karte" ist. während die rechten Felder ein Kartenpaar enthalten. Einfache Hover-Effekte weisen den Benutzer darauf hin, dass jedes dieser Elemente anklickbar ist und zu einer anderen Aktion führt. Das Design ist sauber, gut organisiert und so gestaltet, dass die Benutzer auf klicken klicken.
Ändere es nach oben
Während viele der Designs, die wir bisher betrachtet haben, eine klare Links-Rechts-Trennung mit einer harten Linie zwischen den Elementen im Mittelpunkt standen, ist dies nicht immer der Fall. Ein Bildschirm kann auch mit anderen Elementen visuell aufgeteilt werden.
Der Standort für Warsaw Rising tut dies mit Einfachheit und Schönheit. Ein Textblock ist die Trennlinie? zwischen den Paneelen. Auf jeder Seite befindet sich ein Gesicht, das auf dem Bildschirm ähnlich abgeschnitten und in Perfektion angeordnet ist. Durch Scrollen wird der mittlere Text geändert, ohne den Bedienfeldstil zu entfernen. Der fast umgekehrte Stil des geteilten Bildschirms, der Schwarz-Weiß-Bilder und der gelben Akzente hebt es hervor. Das Gesamtdesign ist dramatisch, ohne schwer zu navigieren oder aufzunehmen.
Fazit
Split-Screen-Design werden wir in den nächsten Monaten viel sehen. Das Muster ist einfach, verwendbar und funktioniert für eine Reihe verschiedener Website-Typen.
Der Trick, damit es funktioniert - und nicht in einem "überstrapaziert" hängen bleiben? Design - ist es, Berührungen hinzuzufügen, die es zu Ihren eigenen machen. Wenn Sie viel Farbe haben, verwenden Sie sie. Erwägen Sie das Stapeln von Elementen oder gehen Sie nur eine Mitte weg. Aber vor allem viel Spaß!