Home API system #CodePenChallenge: Skeletons 💀 – CodePen Blog

#CodePenChallenge: Skeletons 💀 – CodePen Blog

179
0
Norway


It’s week three of the October 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: 💀

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

- wordpress dot com graphic 62c0344e8e570dac4a2ae09fd21d41c0dfe858e79f9df52831cc2e19f4a74a09 - #CodePenChallenge: Skeletons 💀 – CodePen Blog

WordPress powers 31% of the . Create a for yourself with a custom domain name and 24/7 live support. writing, sharing, selling, and building your audience today.

Your Challenge

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).

Ideas

  1. 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.
  2. Go full on literal skeleton and craft the bones yourself like Jon Kanter did here.
  3. Can you combine the ideas? Skeleton loading screens full of literal skeletons?

Resources

  1. Read up Katerine Olvera and Kathryn Faulkner’s in-depth study of user experience and skeleton screens.
  2. 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.
  3. Remember the Skeleton framework? It’s an oldie but a goodie. It has great bones, you might say.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here