Category: Work

Cyclocross

Every year our entire company gets together and one of the things we all have to do is give a four minute talk on any subject. In the past, this has always made me super nervous, and this was the first year that I wasn’t shaking in my boots. Progress!

The slides aren’t exactly synced up, but if you have ever wanted to learn more about cyclocross or have no idea what it is, your wait is over!

Two things I want to work on for next time:

Look at the audience instead of the slides
Less “um”s and “yeah”s

Thoughts Work

design.blog

At Automattic, we have an online design magazine at design.blog. It’s something that our Head of Design, John Maeda created and it has become a joint effort across all the designers and design lovers I work with.

Every Thursday we publish a new issue, which involves 2-3 articles from design leaders and a brand new homepage created by an Automattic designer. This week, it was my turn! I used the Paper app on the iPad Pro with the Apple Pencil to illustrate the cover. It was really fun and actually made me want to get back to my ink and watercolors doodles.

Design.blog cover:

Individual images:

Press:

New! Issue #9 of https://t.co/yPq9xJqaO0, featuring @cmiscm and @courtwrites, with cover by @kellychoffman https://t.co/1b2oGHxdZf pic.twitter.com/FwhYrDTpkr

— WordPress.com (@wordpressdotcom) October 13, 2016

https://t.co/4pyFNAJU37 is live with Courtney Martin on the Coworking Revolution and Jongmin Kim on the Essence of Programming. pic.twitter.com/F2bJdev5Fp

— John Maeda (@johnmaeda) October 13, 2016

“We need to all get out of our comfort zone.” —designer and leader @kellychoffman https://t.co/agnTIoCLRJ

— John Maeda (@johnmaeda) October 13, 2016

Work

Reblogs

Hack Day Project: Update Reblogs

You can reblog a WordPress.com post to your own site by using the reblog button.

The colors and typography of a reblogged post vary from theme to theme, but the overall layout remains fairly consistent. I updated the look and feel of reblogs to be cleaner and easier to read. You can check out a “before” shot if you’d like to compare 🙂

Below is a reblogged post from en.blog.wordpress.com, which features sites using the theme I designed:

Work

Media

Media management is done within the editor and was designed with that contextual nature in mind. You can add, edit, reorder, align, caption, resize, and remove photos and galleries without ever leaving the editor.

Work

Editor

A whole new way to create posts and pages. We had only recently launched an “interim editor” when we got to work redesigning a new one from the ground up. It was the last piece of the Calypso puzzle and it is my favorite thing I’ve ever had the pleasure of designing. (More screenshots and info coming)

Read the announcement post.

Automattic Work

Fullscreen Mode

I worked on designing and implementing a new editing interface on WordPress.com and my favorite feature is the fullscreen mode. I redesigned it to be as clean and zen-like as possible. I love using it and hope you do too.

Happy writing.

Tags ui design, wordpress.com

Work

WordPress theme

The first thing I did when I got my job at Automattic was to design a WordPress theme I always wanted, but couldn’t find. Its a single column theme that is super flexible. I’ve been using it on this site for well over a year and I’ve changed the font, color scheme, and background photo.

Check out the announcement post and this featured post over on the WordPress.com blog.

My sister Carole is using it on her blog as do over a quarter of a million others. Its available for both your self hosted WordPress and WordPress.com site.

Automattic Work

Embeddable Timelines

We recently launched embeddable timelines, which allows you to insert a nice list of recent postings on your site.

I had a lot of fun styling this one and really like how it came out. You can choose between two themes, depending on what you think will look best on your site.

Light Theme

[wptimeline url=”http://en.blog.wordpress.com” showgravatars=”true” width=”450″]

Dark theme

[wptimeline url=”http://withlovefromcarole.wordpress.com” showgravatars=”true” theme=”dark” width=”450″]

Add one to your WordPress site by visiting the timeline creation tool.

Tags ui design, wordpress

Work

Sharing icons

When you set up a WordPress site, you can choose whether or not you would like your readers to have the option to share your posts. You can select which ones to display in a few different styles. I designed a colorful new set that was released today.

In the wild

Countless sites are using these buttons including Re/code, News Corp, and my boss Matt’s photo blog.