New month, new #CodePenChallenge! This month's theme is Blogging.
Blogging is such a huge part of the web. What was once a niche phrase is now widely known and for good reason! Blogging is just writing on the web. A blog is just a place with published articles. In a sense, you could call just about any publication on the web a blog.
Since so many of us have blogs of our own, or have found ourselves in one way or another designing a blog, let's use this as a theme this month. Each week we'll have a challenge prompt for some element of a blog that typically needs designing.
This Week's Prompt: Cards
Cards are a staple design pattern in so many content-based sites. They might even be the primary pattern for displaying articles for the browsing user. They are an important pattern not only because of how common they are, but because they need to support variety and be resilient to vastly different content.
How to Participate
Create a Pen and tag it codepenchallenge and the weekly tag: cpc-cards. We'll be watching and sharing the best stuff on our blog, Twitter, and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).
- Search around Dribbble for article card designs. Are they up for the job of dynamic data? Can you make them responsive?
- As useful and practical as card designs are, what could you do to make them less boring? Could you evoke a deck of cards? Could they have an interesting interaction or animation? How weird can you get with them?
- Even though a card is a pretty simple component, its still composed of still-simpler components. Check out the theory behind Atomic Design and piece it together to make a card.
- Read Dave Rupert's Pitfalls of Card UIs. Stir up any ideas on how to approach card design?
- Nathan Curtis has a lot to say about card design as well in his article Cards and Composability in Design Systems. And here's another.
Thanks to our Sponsor!
This month's challenge is sponsored by Jetpack — the ideal way to experience WordPress.
JetPack is a WordPress plugin that combines all sorts of powerful functionality into a single plugin. Here's a handful of things it can do:
- Secure and back up your site.
- Connect your social media accounts for easy publishing after posting.
- Enable Markdown and editing enhancements.
- Increase performance though CDN-hosted and responsive images and video.