It’s week three of the October 2018 Halloween #CodePenChallenge!
Last week, the prompt was Masks, and the Pens were a wonderful mix of scary and playful. Just like a perfect Halloween night! Check out our CodePenChallenge: Masks collection to see the Pens from the challenge.
This Week’s Prompt: Skeletons 💀
Every-body loves skeletons. Get it⁉️ Every body? Is this thing on? And, front-end designers know that a skeleton screen is a good way to show the “bones” of your design before it fully loads in. But actual skeletons are cool too.
October’s Challenge Sponsor: WordPress.com
Create a Pen that incorporates a skeleton! Make a spine-tinglingly scary design or take a practical approach, it’s up to you.
How to Participate
Create a Pen and tag it codepenchallenge and the weekly tag cpc-skeletons. We’ll gather all those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).
- Build a skeleton screen! They are kinda like spinner alternatives. Rather than show nothing or a little animation as something loads, you load wire-frame looking UI that sorta mimics what the content will look like once it arrives. Max Bock explains one technique, but you can build your own.
- Go full on literal skeleton and craft the bones yourself like Jon Kanter did here.
- Can you combine the ideas? Skeleton loading screens full of literal skeletons?
- Read up Katerine Olvera and Kathryn Faulkner’s in-depth study of user experience and skeleton screens.
- If you need vector art of a skeleton, Wikimedia has a whole lot of anatomically correct versions, and of course the Noun Project has simpler stuff.
- Remember the Skeleton framework? It’s an oldie but a goodie. It has great bones, you might say.