Everything kind of sucks right now. Things—generally—feel bad. Setting aside the broader realities of a global pandemic and rampant social injustices, we’re watching the identity of the web platform, an intrinsically free and open medium of creative expression, co-opted for the “Web 3.0” grift built on artificial scarcity and an accelerating climate crisis.
Websites (mostly) look kind of the same. The proliferation of frameworks, vector design tools, data-driven design and an imperative to maximize business value (oh dear, it was capitalism all along) has led to a status quo of design by default. Websites having their own, consistent, portable UX language that helps users quickly comprehend new sites is great, but embracing that language is a trade-off, and design doldrums is the cost.
What if it didn’t have to be this way? What if we decided to create joy with our work? After all, in a profoundly dark time for many, making someone smile or laugh with your work is a special thing. Shouldn’t we try to do that if we can?
“Okay, you got me, but how?” I hear you ask.
Well, this is how:
The web community is bursting with folks who create joy with their work. Let’s look at how they do it.
Unexpected interactions
Did you know that the web is an interactive medium? I know, weird, right? People get an “oooh neat” feeling when something responds to them. Cats knock stuff off shelves, people hover and click on stuff. It’s simple biology (probably; I’m not a biologist).
Cassie Evans puts the “virtuoso” in SVG (the V stands for virtuoso) (it does not) with this animated portrait on her personal site. I absolutely adore how it tracks the cursor in a natural-feeling way, and I love how her expression changes when you hover an interactive element.
I loved this little hover interaction from Josh Comeau’s site. I thought that there might be a hidden interaction in this 3D illustration, but I was surprised to see the background react to my cursor. As far as I can tell, it doesn’t serve a “purpose” and it cost me a few precious moments I could have spent Engaging With Content, but it made me smile.
This little pop-up book-esque pull tab on Lynn Fisher’s site is lovely. I’m sure a click or scroll would be easier to implement and get the job done, but this is special. It’s different, it’s unexpected. It’s fun. Every single iteration of her site is excellent, so I encourage you to check out her archive.
Animation
We’re finally at the place where motion is baked into design systems and considered (nearly) as important as your typefaces and colors. Despite this, we can still use animation to elevate an interaction from neat to joyful.
Another banger from Josh Comeau: this little interaction on his blog’s Like button. It could just be a ❤️ icon, sure, but it’s full of delightful personality, with lots of appeal and secondary action. The bouncy easing curve and the exuberant expression creates appeal, while the +1 and confetti at the end add some welcome secondary action. This even reinforces the experience because it encourages folks to hit that little button. Go try it out, there are also some wonderful little sound effects!
3D
Between WebGL and CSS 3D, pushing the web beyond two dimensions has been possible for ages. Good news is that it’s still a specialized skill and sometimes a pain in the ass, so it’s still rare. Even after “3D illustration” became all the rage, interactive 3D elements are still a great way to inject a little personality.
lepuzz.com is a joyful website throughout, but I especially love the spinning product images you get on hover.
Internet cryptid “Henry” “Desroches” adds a bit of personality with these animated 3D flags that appear when hovering over his case studies. He uses a noise texture to displace vertices on a plane, which creates this lovely, soothing effect.
Don’t turn this into a listicle, let’s wrap this up
- Break the rules!
- Use weird colors!
- Put animations and interactions where they don’t belong!
The web is as much a cultural artifact as it is a platform for tricking people into looking at ads. We have the power to make people happy with our work; to share the love in a literal sense.
Understand that prioritizing joy will have a cost. Like everything else involved with making things, its a tradeoff. It might make someone’s computer fans turn on which will make some people—who are not in the pocket of Big Fan—extremely upset. It might be slower, and less usable for folks on slower devices. Creating joy will take time that you can’t spend on maximizing key metrics and synergizing upward overflow; mitigating the negative impacts of these tradeoffs will eat yet more time. There’s a reason that almost all of the above examples are from personal sites and not big Brands, after all.
What if making somebody smile is worth it though? What if it’s worth the cost? In a lot of ways, we’re living in shitty times. It’s worth giving up a little to take your shot at making someone’s day. L
source https://css-tricks.com/make-joyful-things/
No comments:
Post a Comment