I can’t tell you how much I am loving Codepen right now. In the “Should Designers Learn to Code?” debate, I definitely fall on the side of why the hell not. (But I’m a DIY addict who thinks it’s totally reasonable to make your own cheese.)
Anyway, this app is perfect for the sorts of tinkering and code experiments I enjoy. I have very little interest in planning and executing production-level sites, but I love trying out new ideas and seeing how they work. Codepen is awesome because it handles all the boring bits of getting started, and the results of your experiments appear right next to your code.
Need some inspiration to get started? The CSS experiments on Codrops are interesting to try to reproduce. I like to try them out, then brainstorm creative ways I could use the concepts in my own projects.
Beautiful Web Type It’s easy to use Google Fonts inside of Codepen and experiment until your heart’s content. But, digging through to find a reliable typeface in the hundreds of choices can take all day. (Aren’t you supposed to be coding?) Thankfully, Chad Mazzola put together this rad site to display the beautiful possibilities of a few choice fonts.
Framer Framer is another little tool whose brilliance lies in automating the boring work so you can focus on the fun stuff. (Amazing UX, right?) Framer integrates with Photoshop or Sketch, and exports layered mockups into an HTML prototype you can manipulate. It’s a nice way for designers to tinker with bits of animation without committing to a full-scale code prototype.