CodePen unleashes first major redesign

Code-sharing community site gets overhauled with a slew of new features and UI improvements.

For the last six months the CodePen team has been working in collaboration with Sparkbox to rework the website, which hasn't had a major redesign since its inception three years ago.

The site that's been unveiled has a lot of changes, but its just the beginning of an iterative process to improve how CodePen works and looks. The team will be designing in the open, taking on user feedback at every step and documenting their learnings via a blog and a series of podcasts.

The new features are covered in this post.

Here are some that stood out to us:

  • Better capabilities for exploring pens. You can now look at 12 pens at once instead of 6, and you can browse more collections curated by the people you follow and the CodePen team.
  • Any pen can be a template. Start a new pen (not a fork, just a normal pen) using any other pen as a starting point.
  • Improved search. Search for people, posts and collections.
  • Improved UI in editors. David DeSandro was drafted in to make the editor UI smoother and nicer.
  • Custom CSS for all. Now anyone can apply custom CSS to their profile, not just pro users. Pro users can now use a pen as a profile header background.

Users are encouraged to report and bugs they find here.

What do you think of the changes? Let us know in the comments.

Liked this? Read these!

Topics

CSS