Posted on

#284: Settings Redesign (Part 2)

Show Description

Klare, Dee, and Marie chat about the process behind redesigning the settings pages inside CodePen – how decisions were made, adding helper text to various locations, and designing React components to reuse.

Time Jumps

  • 01:24 What was the process behind the design?
  • 09:55 Context switching
  • 17:13 Adding helper text
  • 19:24 Sponsor: imgix
  • 20:50 Designing React components

Sponsor: imgix 19:24

imgix is the API for fast, responsive, beautifully optimized images.

Your images create complex challenges with web performance, user experience, conversion rates, SEO, and responsive design. Our APIs solve them.

Visit imgix.com/codepen and signup to receive a $300 account credit.

Show Links

CodePen Links

The post #284: Settings Redesign (Part 2) appeared first on CodePen Blog.

Posted on

#283: Settings Redesign (Part 1)

Show Description

Marie and Dee talk about changes to the settings panel in your account on CodePen – design changes, how changes you make to your settings get saved, making use of feature flags to test, making sure billing is done right, and Stephen’s beautiful tables.

Time Jumps

Sponsor: Netlify 15:10

Netlify is the fastest way to build the fastest sites, Jamstack style. Netlify is a web host that hosts your static files, but for not-so-static sites. The static file hosting is just so that the site can be served over a global CDN as quickly and securely as is possible to do. Any kind of functionality is possible through things like built-in form processing, auth, and cloud functions, and the developer experience is second to none.

Show Links

CodePen Links

The post #283: Settings Redesign (Part 1) appeared first on CodePen Blog.