4. The 404 Experience
If you’ve ever opened the door to the broom closet
instead of the bathroom...
If you’ve ever walked out of the theme park only to
realize you left something behind…
If you’ve ever been caught snooping in someone’s
medicine cabinet during a visit...
@michelleames
@wpcoffeetalk
@404playcom
5. Then you know what it feels like to experience a 404
page.
@michelleames
@wpcoffeetalk
It feels cut off.
Disconnected.
Like we stepped into the “do not walk on the grass” area.
@404playcom
6. A 404 page is not where you
intended to be, it feels
embarrassing, and sometimes
you’re not sure how to figure
out where to go next.
@michelleames
@wpcoffeetalk
@404playcom
7. A well-designed 404 page feels like discovering an
Easter egg or buried treasure.
A good 404 page uses creativity, is fun to do, and
creates a unique user experience for any site visitor
who ends up there.
@michelleames
@wpcoffeetalk
@404playcom
8. They can be REALLY boring
@michelleames
@wpcoffeetalk
@404playcom
9. They can be REALLY boring
@michelleames
@wpcoffeetalk
@404playcom
10. They can be funny
@michelleames
@wpcoffeetalk
@404playcom
18. Poor ones don’t do much
@michelleames
@wpcoffeetalk
@404playcom
19. And bad ones are just awful
@michelleames
@wpcoffeetalk
@404playcom
20. What should you include?
•Something relevant
•Something appropriate
•Something helpful
@michelleames
@wpcoffeetalk
Make your visitor feel special.
@404playcom
21. It Takes a Little Finesse
•What is the site’s topic
or business?
•What is the site’s
purpose?
•What is the tone of the
rest of the site?
@michelleames
@wpcoffeetalk
The 404 page should stay on brand.
@404playcom
22. Step 1. Make sure you don’t stray too far from
your purpose.
Keep it relevant.
●Is it a restaurant? Please don’t show animals.
●Is it a funeral home? Don’t make jokes.
●Is it a political fundraiser? Don’t malign the competition.
Match the site’s tone.
●A salon that is super exclusive and expensive should have a
404 that is also in that tone. A page with purple and orange
hair might not work.
●A children’s toy website shouldn’t have a serious or scary page.
@michelleames
@wpcoffeetalk
@404playcom
23. Step 2. Brainstorm ideas that could work
• Funny
• Cute
• Clever
• Serious
• Stylish
• Surprising
• Somber
@michelleames
@wpcoffeetalk
@404playcom
24. Step 3. Design your page
Use open source images/video or create your own
(Copyright still applies, even if you don’t expect it to be
found)
• Pexels.com
• Unsplash.com
• Pixabay.com
• Morguefile.com
@michelleames
@wpcoffeetalk
@404playcom
25. Step 3. Design your page
Use quotations when appropriate - but give attribution
to the speaker/writer.
• Brainyquote.com
• QuotationsPage.com
@michelleames
@wpcoffeetalk
@404playcom
“Everything we see hides another
thing, we always want to see what
is hidden by what we see.”
~Rene Magritte
26. Step 3. Give visitor options/guidance
Help them find their way out of the broom closet.
• Search area
• Links
● Home
● Blog
● About Us
• CTA
● Volunteer
● Sign Up
● Donate
● Hire Us
@michelleames
@wpcoffeetalk
@404playcom
27. A Few of My Designs
@michelleames
@wpcoffeetalk
@404playcom
28. A Few of My Designs
@michelleames
@wpcoffeetalk
@404playcom
29. A Few of My Designs
@michelleames
@wpcoffeetalk
@404playcom
30. A Few of My Designs
@michelleames
@wpcoffeetalk
@404playcom
31. A Few of My Designs
@michelleames
@wpcoffeetalk
@404playcom
32. A Few of My Designs
@michelleames
@wpcoffeetalk
@404playcom
33. A Few of My Designs
@michelleames
@wpcoffeetalk
@404playcom
34. A Few of My Designs
@michelleames
@wpcoffeetalk
@404playcom
35. A Few of My Designs
@michelleames
@wpcoffeetalk
@404playcom
36. A Few of My Designs (maybe?)
@michelleames
@wpcoffeetalk
@404playcom