Die besten Website-Designs von 2021

Seite 1 von 3: Die Neverlands von Active Color

Nicht jedes Web-Erlebnis muss bahnbrechend, optisch atemberaubend und voller unerwarteter Überraschungen sein. In den meisten Fällen möchten Besucher einer Website nur schnell und einfach die gesuchten Informationen finden.

Aber genau wie die ausgefalleneren Outfits auf den Laufstegen der Mode die tragbareren Kleidungsstücke auf der Hauptstraße auf subtile Weise beeinflussen können, lohnt es sich, Webdesigner mindestens ein halbes Auge auf das obere Ende der Website-Erstellung zu werfen. Selbst diejenigen, die übermäßig auffällig wirken, können Ihnen Inspiration und Ideen geben, die Sie auf unterschiedliche Weise in Ihre eigenen Designs integrieren können.

In diesem Sinne blicken wir auf die Designs zurück, von denen wir glauben, dass sie wirklich den Umschlag gedrückt haben. Diese Websites erfüllen nicht nur die grundlegende Aufgabe, den Besuchern auf unkomplizierte Weise das zu bieten, wonach sie suchen, sondern überdenken auch, wie eine Website auf frische, erfinderische und originelle Weise aussehen und funktionieren kann.



wie man einen Muskelarm zeichnet

01. Die Nimmerländer nach aktiver Farbe

Neverlands Homepage

Die Navigation basiert auf einem magischen Boot(Bildnachweis: Active Color)

Wenn Sie eine Website besuchen, die für ein Nachtleben wirbt, erwarten Sie etwas Auffälliges, Lautes, Buntes und wahrscheinlich etwas Knalliges. Aber Die Nimmerländer - Die Heimat von zwei der besten Nachtlokale in Los Angeles, The Edison und Clifton's Republic - wollte etwas Geschmackvolleres projizieren. Also wandten sie sich an Aktive Farbe , der für sie eine Website erstellt hat, die alles andere als gewöhnlich ist.

Basierend auf ihren Animationen von handgemalten Illustrationen von Shannon Stamey Es ist wirklich eine Sache von Schönheit. Wir haben uns mit dem Gründer und Kreativdirektor Damjan Krajacic unterhalten, um herauszufinden, wie sie es geschafft haben.

Wie bist du zu diesem ungewöhnlichen Auftritt gekommen?

Wir haben mit dem Kunden und Eigentümer von The Neverlands, Andrew Meieran, zusammengearbeitet, seit sie den ersten Veranstaltungsort in der Innenstadt von LA eröffnet haben. Das Edison ist ein wahrhaft spektakulärer Nachtlokal, das im Untergeschoss des historischen LA Higgins-Gebäudes errichtet wurde und die Stromerzeuger und industriellen Elemente des Kraftwerks bewahrt, die die neue Zukunft der DTLA signalisierten.

Später arbeiteten wir mit demselben Kunden an mehreren weiteren Projekten, einschließlich der Website von Clifton's Republic. Als dieses Projekt begann, waren wir bereits sehr tief in die Marke und die Veranstaltungsorte vertieft und standen dem Kunden und seinem außergewöhnlichen, visionären und exzentrischen Stil sehr nahe.

Screenshot von The Neverlands zeigt einen Mann, der durch den Nachthimmel fährt

Das Konzept von Active Color wurde auf einen handgemalten illustrativen Designansatz und parallaxengesteuerte, interaktive Zielseiten umgestellt(Bildnachweis: Active Color)

Was war der Auftrag?

Der Kunde hatte immer eine fantastische Vision, wie man diese visionären Räume in eine digitale Welt übersetzt. Sie wollten ein Gefühl von Abenteuer, Neugierde und Flucht aus dem Gewöhnlichen in eine kindliche Fantasiewelt schaffen. Dieses Projekt war über einen langen Zeitraum von mehr als zwei Jahren eine kreative Zusammenarbeit mit dem Kunden. Obwohl das übergreifende Konzept im Laufe der Zeit ziemlich gleich blieb, entwickelten sich die Ideen zur praktischen Umsetzung kontinuierlich weiter, und oft gingen wir bei Illustrationen, bestimmten Bewegungen oder Kunstwerken auf kleinste Details ein.

Obwohl wir normalerweise einen viel klareren, strategischeren und definierten Prozess haben, haben wir uns in diesem Fall entschlossen, uns vom künstlerischen Charakter des Projekts in vielerlei Hinsicht leiten zu lassen. Da der Kunde selbst äußerst kreativ und künstlerisch ist, haben wir keine andere Möglichkeit gesehen, das Projekt erfolgreich abzuschließen. Manchmal müssen Sie die Regeln biegen, um etwas Frisches und Unerwartetes zu schaffen.

Screenshot von The Neverlands zeigt eine Frau im Baum, die einer Eule ein Licht vorhält

Der Ton ist durchweg lustig und fantastisch(Bildnachweis: Active Color)

Was waren Ihre visuellen Inspirationen?

Sowohl das Konzept als auch die Farben der Website wurden hauptsächlich von den atemberaubenden Innenräumen von Clifton's Republic und The Edison inspiriert, die buchstäblich diese fantastischen Welten sind, in die Sie eintauchen können. Obwohl Clifton's aus sieben verschiedenen Veranstaltungsorten im selben 5-stöckigen Gebäude besteht In jedem Raum liegt eine Wärme, und die warmen Bronze-, Kupfer- und Goldtöne durchdringen die Sinne. Wir wollten dieses Farbschema so erweitern, dass es für jeden Veranstaltungsort oder jede Zielseite etwas besser geeignet ist. Deshalb haben wir die Farbpalette um Pastellblau, Blaugrün und eine Vielzahl anderer Farben erweitert.

Ein Teil der Farbpalette wurde deutlich von den handgemalten Illustrationen inspiriert, und wir haben die Seite passend gebogen. In anderen Fällen haben wir die Farbtöne und Farben der Abbildungen angepasst, damit sie alle miteinander verschmelzen und zu einem zusammenhängenderen Stil passen.

wie man Wasser in Photoshop malt

Wer hat die Illustrationen angefertigt?

Die Illustrationen stammen von Shannon Stamey, die vom Kunden in Auftrag gegeben wurde. Gemeinsam mit dem Kunden und Stamey haben wir die Landebildschirme und Illustrationen konzipiert, die von Stamey perfekt ausgeführt wurden. Was wir nicht handgemalt bekommen konnten, konnten wir entweder in Archivbildern oder in gemeinfreien Archiven finden. Der Kunde Andrew Meieran ist selbst Historiker mit unglaublichem Wissen und Leidenschaft für die Kunst dieser Zeit. Er war maßgeblich daran beteiligt, viele der Elemente zu finden und zu entscheiden.

Screenshot von der Neverlands-Website mit Strichzeichnungen

Active Color arbeitete rückwärts, um die Typografie an die Kunst anzupassen(Bildnachweis: Active Color)

Wie sind Sie mit der Typografie umgegangen?

Dies war ein Gleichgewicht zwischen Praktikabilität und Zufall. Wir hatten hier kein visuelles Identitätssystem, keinen vordefinierten Stil oder ein vordefiniertes Logo, also haben wir rückwärts gearbeitet, um die Schriftarten zu finden, die zum Bildmaterial passen. Wir wollten, dass sich die Dinge menschlich, natürlich und nutzbar anfühlen, aber gleichzeitig ein bisschen magisch in unseren Entscheidungen sind.

Mit welchen Technologien haben Sie die Website erstellt?

Wir haben eine benutzerdefinierte WordPress-Installation verwendet, um das Back-End mit Strom zu versorgen. Die Website ist im Frontend vollständig benutzerdefiniert mit viel benutzerdefiniertem JavaScript und CSS codiert. Wir haben das großartige Open-Source-Parallax-Skript von Matthew Wagerfield als Hauptmotor für die Zielseitenbewegung modifiziert. Wir haben auch viele andere benutzerdefinierte Funktionen erstellt, die auf Veranstaltungsseiten wie The Edison, Clifton's Republic und Pacific Seas auftreten, wenn Benutzer scrollen, sodass Sie das Gefühl haben, in die Stadt, über die Baumkronen oder in den Ozean abzusteigen.

Die mit Abstand größte Herausforderung bestand darin, mit so vielen transparenten PNGs, die sich in Parallaxenbewegung bewegen, ein reibungsloses Browsererlebnis zu schaffen. Es wurde viel Zeit in die Optimierung von Bildern und Skripten investiert, um sie browserübergreifend abrufen zu können.

Screenshot von der Neverlands-Website mit einer Auswahl fantastischer Karten

Fehlende visuelle Elemente oder Illustrationen wurden mithilfe von Bildmaterial beschafft und künstlerisch weiter manipuliert, um dem Stil und Konzept der Website zu entsprechen(Bildnachweis: Active Color)

Die Übergänge sind sehr effektiv: Wie haben Sie sie erstellt?

Mit viel Optimieren und Experimentieren! Wir waren etwas eingeschränkt in der Lage, nach Bedarf zusätzliche Illustrationen anzufordern, so dass wir manchmal die Teile zusammenfügen, das Kunstwerk erweitern und es manipulieren mussten. Sobald wir die Assets fertig hatten, nahmen wir uns viel Zeit, um die Übergänge anzupassen, um den Fluss reibungslos zu gestalten. Es war eine gute Balance zwischen dem, was wir visuell wollten und dem, was in jedem Browser mit begrenzter Renderleistung technisch machbar war.

Wie hast du die Seite auf dem Handy zum Singen gebracht?

Die Übersetzung auf Mobilgeräte verlief eigentlich recht reibungslos. Dieses Projekt war Desktop-lastig, aber wir wussten, dass Landing Pages auf Mobilgeräten gut funktionieren, da wir sie von Anfang an so konzipiert haben. Wir waren uns bewusst, dass Übergänge aufgrund stark reduzierter Bildgrößen glatt sind. Schließlich können auf einem kleinen Bildschirm nicht zu viele Dinge angezeigt werden, sodass wir die Dinge verkleinern und die Benutzeroberfläche vereinfachen konnten. Dies alles führte zu einem reibungsloseren und unkomplizierteren mobilen Erlebnis.

Auswahl an Fantasy-Illustrationen

Detaillierte Konzeption und Storyboarding verschiedener Zielseiten und Assets(Bildnachweis: Active Color)

Was ist die größte Lektion, die Sie gelernt haben?

Diese Geduld ist eine Tugend. Wir mussten sicherlich viel davon in diesem Projekt haben. Der Punkt ist, dass man bereit sein muss, sich Zeit zu nehmen und sich anzustrengen, um etwas gut zu machen, und das erfordert Geduld.

Auf der technischen und künstlerischen Seite erinnerte uns das Projekt daran, wie sehr wir Out-of-the-Box-Sites lieben, die auf Flash-Sites zurückgehen, die wir verehrten. Zu einer Zeit war das Internet viel vielfältiger und unkonventioneller. Mit den jüngsten Browserentwicklungen sind wir jedoch wieder in der Lage, außergewöhnliche Erlebnisse zu erzielen, die nicht in eine Box fallen, und wir freuen uns, dieses Bewusstsein als Leitfaden für zukünftige Projekte zu nutzen. Wir hatten Glück, dass wir in diesem Fall mit einem sehr einzigartigen Kunden zusammengearbeitet haben, der Ästhetik und Originalität schätzt.

Nächste Seite: Entdecken Sie das zweitgrößte Website-Design von 2020 ...

Es war einmal in einer weit entfernten Galaxie Google

Creative Bloq hat diesen Inhalt im Rahmen einer bezahlten Partnerschaft mit Adobe Stock erstellt. Der Inhalt dieses Artikels ist völlig unabhängig und spiegelt ausschließlich die redaktionelle Meinung von Creative Bloq wider.

  • 1
  • zwei
  • 3

Aktuelle Seite: Die Neverlands von Active Color

Nächste Seite Die Mühle von Studio Output