Make Joyful Things

Alles ist im Moment irgendwie beschissen. Die Dinge fühlen sich – generell – schlecht an. Ganz abgesehen von den breiteren Realitäten einer globalen Pandemie und grassierenden sozialen Ungerechtigkeiten, beobachten wir, wie die Identität der Web-Plattform, eines intrinsisch freien und offenen Mediums des kreativen Ausdrucks, für den „Web 3.0“-Schwindel gekapert wird, der auf künstlicher Knappheit und einer sich beschleunigenden Klimakrise basiert.

Websites (meistens) sehen irgendwie gleich aus. Die Verbreitung von Frameworks, Vektor-Design-Tools, datengesteuertem Design und der Zwang, den Geschäftswert zu maximieren (oh weh, es war doch die ganze Zeit der Kapitalismus), hat zu einem Status Quo des Standarddesigns geführt. Websites, die ihre eigene, konsistente, portable UX-Sprache haben, die den Nutzern hilft, neue Seiten schnell zu verstehen, ist großartig, aber die Übernahme dieser Sprache ist ein Kompromiss, und die Kosten sind Design-Flaute.

Was wäre, wenn es nicht so sein müsste? Was wäre, wenn wir uns entscheiden würden, mit unserer Arbeit Freude zu schaffen? Schließlich ist es in einer zutiefst dunklen Zeit für viele eine besondere Sache, jemanden mit seiner Arbeit zum Lächeln oder Lachen zu bringen. Sollten wir das nicht versuchen, wenn wir können?

„Okay, du hast mich erwischt, aber wie?“, höre ich dich fragen.

Nun, so geht's

Die Web-Community platzt vor Leuten, die mit ihrer Arbeit Freude schaffen. Schauen wir uns an, wie sie es tun.

Unerwartete Interaktionen

Wusstest du, dass das Web ein interaktives Medium ist? Ich weiß, *seltsam*, oder? Die Leute bekommen ein „Oooh nett“-Gefühl, wenn etwas auf sie reagiert. Katzen stoßen Dinge vom Regal, Leute verweilen und klicken auf Dinge. Es ist einfache Biologie (wahrscheinlich; ich bin kein Biologe).

Cassie Evans macht aus SVG einen „Virtuosen“ (das V steht für Virtuose) (tut es nicht) mit diesem animierten Porträt auf ihrer persönlichen Website. Ich liebe absolut, wie es auf natürliche Weise dem Cursor folgt, und ich liebe, wie sich ihr Gesichtsausdruck ändert, wenn man über ein interaktives Element fährt.

Ich liebte diese kleine Hover-Interaktion auf der Website von Josh Comeau. Ich dachte, es gäbe eine versteckte Interaktion in dieser 3D-Illustration, aber ich war überrascht, wie der Hintergrund auf meinen Cursor reagierte. Soweit ich das beurteilen kann, dient es keinem „Zweck“ und hat mich ein paar kostbare Momente gekostet, die ich mit dem Konsum von Inhalten hätte verbringen können, aber es hat mich zum Lächeln gebracht.

Dieser kleine Pop-up-Buch-ähnliche Ziehlasche auf der Website von Lynn Fisher ist wunderschön. Ich bin sicher, ein Klick oder Scrollen wäre einfacher zu implementieren und würde den Job erledigt haben, aber das ist etwas Besonderes. Es ist anders, es ist unerwartet. Es ist **Spaß**. Jede einzelne Iteration ihrer Website ist exzellent, daher ermutige ich dich, ihr Archiv anzusehen.

Animation

Wir sind endlich an einem Punkt angelangt, an dem Bewegung in Designsysteme integriert ist und (fast) so wichtig genommen wird wie Schriftarten und Farben. Trotzdem können wir Animationen immer noch nutzen, um eine Interaktion von nett zu freudig zu machen.

Ein weiterer Kracher von Josh Comeau: diese kleine Interaktion auf dem Like-Button seines Blogs. Es könnte einfach ein ❤️-Symbol sein, sicher, aber es ist voller entzückender Persönlichkeit, mit viel Anziehungskraft und sekundärer Aktion. Die hüpfende Zeiteinstellung und der überschwängliche Ausdruck schaffen Anziehungskraft, während das +1 und die Konfetti am Ende willkommene sekundäre Aktionen hinzufügen. Dies verstärkt sogar das Erlebnis, da es die Leute ermutigt, auf diesen kleinen Button zu klicken. Probier es aus, es gibt auch einige wundervolle kleine Soundeffekte!

3D

Zwischen WebGL und CSS 3D ist es seit Ewigkeiten möglich, das Web über zwei Dimensionen hinaus zu erweitern. Gute Nachricht ist, dass es immer noch eine Spezialfertigkeit und manchmal eine Qual ist, daher ist es immer noch selten. Selbst nachdem „3D-Illustration“ in Mode kam, sind interaktive 3D-Elemente immer noch eine großartige Möglichkeit, ein wenig Persönlichkeit einzubringen.

lepuzz.com ist durchgehend eine freudige Website, aber ich liebe besonders die sich drehenden Produktbilder, die man beim Hovern erhält.

Internet-Kryptid „Henry“ „Desroches“ fügt ein wenig Persönlichkeit mit diesen animierten 3D-Flaggen hinzu, die erscheinen, wenn man über seine Fallstudien fährt. Er verwendet eine Rauschtextur, um Vertices auf einer Ebene zu verschieben, was diesen schönen, beruhigenden Effekt erzeugt.

Mach keine Listenartikel daraus, fassen wir zusammen

• Verletze die Regeln!
• Benutze seltsame Farben!
• Baue Animationen und Interaktionen ein, wo sie nicht hingehören!
• Benutze Soundeffekte!

Das Web ist ebenso ein kulturelles Artefakt wie eine Plattform, um Leute dazu zu bringen, sich Anzeigen anzusehen. Wir haben die Macht, Leute mit unserer Arbeit glücklich zu machen; die Liebe im wörtlichen Sinne zu teilen.

Verstehe, dass die Priorisierung von Freude ihren Preis hat. Wie alles andere, was mit der Herstellung von Dingen zu tun hat, ist es ein Kompromiss. Es könnte die Lüfter mancher Computer zum Laufen bringen, was einige Leute – die **nicht** von Big Fan gesponsert werden – extrem verärgern würde. Es könnte langsamer und weniger benutzerfreundlich für Leute auf langsameren Geräten sein. Die Schaffung von Freude wird Zeit in Anspruch nehmen, die du nicht für die Maximierung wichtiger Kennzahlen und die Synergisierung von Overhead aufwenden kannst; die negativen Auswirkungen dieser Kompromisse zu mildern, frisst noch mehr Zeit. Es gibt einen Grund, warum fast alle obigen Beispiele von persönlichen Websites stammen und nicht von großen Marken.

Was wäre aber, wenn es das Lächeln eines Menschen wert ist? Was, wenn es den Preis wert ist? In vielerlei Hinsicht leben wir in beschissenen Zeiten. Es lohnt sich, ein wenig aufzugeben, um deine Chance zu nutzen, jemandem den Tag zu versüßen.