Etwas mutige Prognose: 2014 wird als Parallaxenjahr untergehen. Bevor Sie diesen wiederkehrenden Trend herunterspielen, sollten Sie darüber nachdenken. Angesichts der Entwicklungen in HTML, CSS und jQuery sowie der zunehmenden Anzahl von Menschen, die mit Hochgeschwindigkeits-Internetverbindungen arbeiten, ist es keine Frage zu glauben, dass diese raffinierte Technik dieses Jahr wirklich explodieren wird.
Parallax-Scrolling-Effekte machen Spaß, sind benutzerfreundlich und ermöglichen neue Gestaltungsmöglichkeiten im Website-Design-Prozess. Das Endergebnis ist eine Technik, die Spaß machen kann und den Benutzern ein visuelles und interaktives Erlebnis bietet.
Was ist Parallaxe?
Parallax ist eine Technik, bei der Inhaltsebenen zusammenarbeiten und arbeiten. Die Funktionsweise besteht darin, dass Hintergrund-, Mittel- und Vordergrundbilder erstellt und so gestaltet werden, dass sie sich mit unterschiedlichen Geschwindigkeiten bewegen, sodass sich Elemente auf dem Bildschirm bewegen.
Parallaxe kann mit einer Klick- oder Bildlauffunktion (als Parallax-Bildlauf bezeichnet) arbeiten, und Elemente können sich nach oben und unten oder von Seite zu Seite bewegen. In einigen Parallax-Designs bewegen sich alle Elemente im Einklang, so dass Sie sich scheinbar von einem Bildschirm zum nächsten bewegen. Andere Parallaxendesigns ermöglichen mehrere bewegliche Teile, sodass fast aktive Animationen erstellt werden.
Parallaxeffekte sind nicht neu. Sie gibt es eigentlich schon seit Jahren. (Denken Sie an Videospiele und animierte GIFs.) Aber bis vor kurzem waren diese Effekte zumindest kitschig und oft grenzwertig. Die Technik war schwierig zu entwickeln und gut zu funktionieren, und Designer und Entwickler blieben meistens davon fern.
Aber Apple hat erneut dazu beigetragen, dass die Technologie weiter verbreitet wird. Parallax-Effekte wurden bei der Einführung von iOS 7 im letzten Herbst verwendet. Viele Designer folgten mit Parallax-Scrolling-Effekten im gesamten Web und in einer Vielzahl von Apps. Aber dieses Mal wurde die Technik viel weiter verfeinert und bietet eine unvergessliche Benutzererfahrung.
Dies wird ein Durchbruchjahr sein
Ein Schwerpunkt auf der Benutzererfahrung ist, warum Parallax-Effekte in diesem Jahr wirklich zum Einsatz kommen werden. Die Technik kann verwendet werden, um eine recht denkwürdige Website ohne viele Klicks zu erstellen. Parallax-Scrolling-Effekte können für den Benutzer als "Story" ein Mysterium erzeugen. entfaltet sich. Mit jeder neuen Bewegung entfaltet sich für den Benutzer etwas Neues. Dieser Effekt kann zu Intrigen und dem Wunsch führen, weiterhin mit einer Website zu interagieren. (Immer ein Bonus für alle, die die Zeit vor Ort verfolgen.)
Parallax bietet einen anderen Ansatz für die Darstellung von Inhalten und Design. Designer experimentieren mit Parallaxe, weil:
- Es macht Spaß
- Es schafft eine neue und unverwechselbare Benutzererfahrung
- Es ermutigt die Besucher, länger zu bleiben
- Es spricht unsere Neugier an
- Es ist eine neue Art, eine visuelle Geschichte zu erstellen
Tolle Effekte auf "Eine Seite"
Parallax-Effekte harmonieren mit einem anderen Webdesign-Trend - dem Design einer einzelnen Seite. Sie können verschiedene Bildschirme mit Inhalten erstellen, die fast wie andere Seiten aussehen und sich verhalten, sich aber eigentlich alle auf einer einzigen Seite befinden.
Einige meiner liebsten Parallax-Scrolling-Seiten? Fügen Sie Effekte hinzu, die für ein bestimmtes Seherlebnis sorgen. Oft ändert sich die Farbe, wenn Sie zu neuen Inhalten gelangen oder ein Bildwechsel stattfindet. Cyclemon leistet mit diesem Effekt auf einfachste Weise hervorragende Arbeit. Mit jedem Bildlauf-Bildschirm erhält der Benutzer einen neuen Hintergrund (in einer bestimmten Farbe) und einen neuen Fahrradstil im Vordergrund. Die Seite ist robust, aber es geht nie schief. Sie können durch jeden der 19-Bildschirme blättern. schnell oder verwenden Sie die leichte Navigation auf der rechten Seite der Seite, um Abschnitte zu springen. (Was schön, zeigt Ihnen alles, was Sie blitzschnell übersprungen haben.)
Die New York Times war auch einer der Marktführer im Parallax-Design mit bemerkenswerten Funktionen wie "Tomato Can Blues". und der preisgekrönte "Snow Fall". Auf der Zeitungswebsite kann Parallax dazu verwendet werden, eine Geschichte mit Bewegung, Text, Video und Bildern zu erzählen. In? Tomato Can Blues? Die Bilder im Comic-Stil werden dank Parallaxe mit einfachen Bewegungen zum Leben erweckt. In? Schneefall? Die langgestreckte Geschichte wird mit einer Mischung von Effekten erzählt, die Sie durch den Inhalt bewegen.
Parallax Plusses
Parallax hat zwar einige Vorteile für eine Vielzahl verschiedener Designstile, hat aber auch einige Vorteile. Einfach, die Effekte können viel Spaß machen. Das allein wird wahrscheinlich die Benutzer ansprechen.
Coole Effekte lassen die Benutzer darauf aufmerksam machen. Parallax-Techniken können jedoch auch andere Vorteile haben:
- Deutlicher Storytelling-Stil: Mit all dem Schwerpunkt auf Inhalten ist diese Art der Erstellung von Inhalten, die eine Geschichte erzählen, eine gangbare Option.
- Aufrufe zum Handeln: Parallax-Effekte können verwendet werden, um den Benutzern mitzuteilen, was sie tun sollen. Durch das Klicken auf einen Link, das Ausfüllen eines Formulars oder das Kaufen eines Artikels können Parallax-Effekte Benutzer zu einer direkten Aktion führen.
- Engagement: Es besteht kein Zweifel, dass Websites mit effektiven und gut konzipierten Parallax-Effekten längere Land-Kontaktzeiten mit den Benutzern haben.
- Kennzeichnen ein Produkt: Sie können Parallax-Effekte verwenden, um ein Produkt anzuzeigen. Denken Sie über die 360-Grad-Ansicht von Artikeln auf einigen Websites im Einzelhandel nach. Lassen Sie die Benutzer vor dem Kauf einen Artikel wirklich sehen.
Parallax-Tipps
Parallax-Effekte gelten nicht für jeden Standort. Sie müssen wissen, was Sie mit dieser Technik erreichen möchten, bevor Sie sie einsetzen, nur weil sie im Trend liegt.
Und während Parallaxeffekte schnell kompliziert werden können, ist es am besten, die Dinge einfach zu halten. Entscheiden Sie, welchen Effekt Sie verwenden möchten, und halten Sie ihn auf der gesamten Website ein. Stellen Sie Benutzern Hinweise zur Verfügung, wenn Sie Fragen zur Funktionsweise der Website haben. (Wenn zum Beispiel ein Bildlauf von links nach rechts und nicht von oben nach unten bewegt wird, informieren Sie die Benutzer.)
Verwenden Sie Parallaxe, um eine Geschichte zu erzählen. Es ist zweifellos die beste Anwendung der Technik. Stellen Sie sicher, dass die Aktionen Ihrer Effekte Spiegeln, die Benutzer während der Interaktion mit Ihren Inhalten durchführen würden.
Beachten Sie das Gewicht auf der Baustelle.Da im Hintergrund und im Code so viel passiert, sollte alles in Bezug auf diese Art von Website-Design richtig optimiert werden. Skalieren Sie Bilder richtig, halten Sie Ihren Code sauber und stellen Sie sicher, dass Ihre Website schnell geladen wird.
Richten Sie die Benutzer in die richtige Richtung. Handlungsaufforderungen sollten auf dem Bildschirm mit leicht verständlichen Anweisungen deutlich gekennzeichnet sein.
Fallstricke von Parallax
Parallax-Websites können schnell schwer werden, einige SEO-Probleme aufwerfen, sind inkompatibel mit responsive Design-Frameworks, lassen keine internen Seitenverknüpfungen zu und funktionieren nicht besonders gut für umfangreiche Inhalte.Zwar gibt es einige Diskussionen darüber, ob alle Benutzer Parallaxeffekte mögen oder nicht - die naheliegende Antwort ist nein, Sie können es nicht allen recht machen - es gibt ein paar Nachteile, über die man nachdenken muss. Parallax-Websites können schnell schwer werden, einige SEO-Probleme aufwerfen, sind inkompatibel mit responsive Design-Frameworks, lassen keine internen Seitenverknüpfungen zu und funktionieren nicht besonders gut für umfangreiche Inhalte.
Eine starke Parallax-Website sollte vermieden werden. Wenn die Site nicht schnell geladen wird, warten die Benutzer nicht auf Ihren Inhalt. Erstellen Sie die Website so schlank wie möglich und achten Sie besonders auf Bilder und Effekte.
Suchmaschinenoptimierung ist bei einseitigen Websites jeglicher Art ein großer Erfolg. Da die Website sehr einfach ist, kann nicht viel getan werden, um Keywords zu verbessern, Links zu erstellen und zur Suche beizutragen. Wo Sie einen SEO-Schub sehen können, ist durch soziale Medien, denn Websites, die einzigartig und anders sind, neigen dazu, geteilt zu werden.
Wenn es um Responsive Design und Mobile geht, ist Parallax noch nicht so weit. Oft benötigen Sie einen großen Bildschirm, um die Auswirkungen wirklich sehen zu können. Parallaxe ist auch eine Technik, die sich am besten für ein Projekt mit engem Umfang eignet. Mit zu viel Inhalt kann es schnell überwältigen.
5 großartige Parallax-Sites
Atlantis Weltausstellung
Express Anwälte
Mario Kart
Minhacidade.me
Soleil Noir
Fazit
Dank des Spaßes und der einfachen Natur sind Parallax-Designtechniken etwas, von dem wir im Laufe des Jahres immer mehr sehen werden. Die Anzahl der Websites, die bereits eine Form von Parallax-Aktionen verwenden, wächst täglich, da immer mehr Designer sich mit beweglichen Effekten beschäftigen.
Es ist ein Trend, den ich genieße. Ich liebe es, zum ersten Mal eine Website zu besuchen und wirklich mit dem Inhalt spielen zu wollen, um zu sehen, was als Nächstes passiert. Parallax spricht meine generell neugierige Natur an und das zusätzliche Element des Storytellings macht diese Art von Website-Design mehr Spaß.
Bildquellen: Ben der Bodyguard, Honda CRV, das Black-Eye-Projekt, Gefahren des Frackings, Arnold Clark und Tinke. (Ich empfehle, auf die genannten Bilder zu klicken, um ein Gefühl für die gesamte Funktionsweise der Parallaxen der einzelnen Websites zu erhalten. Die Screenshots vermitteln nicht die Schönheit der Funktionsweise dieser Websites.)