Joyful web design

I think about joy when I make web pages. If you hover over the mascot on my blog, its eyes will open. The typeface of my blog title on my home page is the same one Taylor Swift used for her evermore album. If you explore my website for long enough, you will find an Easter egg. I write and publish stories that I am proud of.

I want this site to be a constellation of moments of joy.

At Beyond Tellerrand this week, which followed IndieWebCamp Düsseldorf, Tantek and I got talking about the idea of joy and the web. Tantek shared the idea “joyful web design,” which immediately caught my attention. This got me thinking: given the success and memetic power of responsive web design, should we crystallise a definition for joyful web design? I think we should. Joy should be a design goal.

Joyful web design has two tenets: first, the joy that you, the site author, feel when making web pages; second, the joy that a visitor has when encountering what you have made.

As a site author, you might feel joy because you made something new, or you did something in a way that you like, or because something turned out just the way that you wanted it to. As a site visitor, you might feel joy because the author has added a feature that made you smile.

There are plenty of ways to bring joy into your web design. You might:

• Finally bring to life an idea that has been in the back of your mind for a while.
• Improve something that you are inspired to update.
• Try to build something in a specific way that challenges you (can you build [feature] using only CSS and no JavaScript?, for example).
• Draw a fun mascot for your website.
• Experiment with a different style of design.
• Add fun comments in your code.
• Add an easter egg.
• Add a reference to something you love (like my Taylor Swift reference via typography on my home page).

There are no shortage of examples of joyful web design

For example, earlier this week, I encountered Neal.fun’s Cursor Camp web page, which lets you explore a virtual playground where you can see the cursors of every visitor. The website brought be back to my childhood playing Club Penguin. In the Cursor Camp, I spent most of my time moving my cursor – dancing! – to the music at the DJ tracks. Others danced, too. The only information I had about each participant was the country they were in. I danced with people from around the world. I had so much fun. I bet the creator had fun making the site, too.

There are so many more examples, too. Whimsica11y invites us to go beyond accessibility compliance and think about how to create whimsical experiences for people who rely on assistive technology. omg.lol offers a playful way to start a website. Lola has explored the use of alt text as an art space. Ky has a working piano on their home page. The IndieWeb Carnival inspires dozens of people to write every month on a topic chosen by a rotating host; the whole project is organised through a community wiki.

On a broader level, every personal website brings me joy because having a personal website represents a choice someone made to express themselves on the web.

In the commercial realm, Octopus Energy’s website brings me joy. Their mascot is whimsical. The website is colourful. Their brand identity is playful. They even have an option to receive energy bills as plain text emails instead of HTML emails. This is all on top of a strong foundation that they have built for their website.

Joyful web design is about having fun while making things on the web. You can – and should feel free to – play with the web. Build what you want. Explore. Try new things. If you make something that makes you smile, share it with the world: what you made might make others smile, too. And don’t be worried if an idea doesn’t go to plan the first time around: we can learn something from everything; the best things take time.

Given that we have all of this wonderful web technology – all of the powerful standards that make up the web – I think it’s our responsibility to use it not only to make serious websites, but to create joy, too. Every web page we make has the potential to open someone’s eyes to the possibilities of the web.

Make your website cute, make it playful, make it fun. Above all: make the web yours.

Resources

• How to make a website
• 100 things you can do on your personal website

Acknowledgements

Thank you to Tantek for the initial spark of inspiration that inspired this blog post, and for defining the distinction between the joy of the maker and the joy of the web visitor that I have included in this post.

This post was syndicated to IndieNews.