Behind the Scenes of Twenty Seventeen

It’s a wrap! After months of work and over 100 individual contributors, Twenty Seventeen, the new default theme for WordPress, shipped yesterday in WordPress 4.7 “Vaughan”:

WordPress 4.7 “Vaughan”

Twenty Seventeen was the first default WordPress theme I’ve had the pleasure of working on. I wanted to talk a little bit about the design and history of theme, and how we got to where it is now.

The design that would eventually become Twenty Seventeen went through a couple iterations. At its earliest, it was a one-page restaurant theme that we didn’t feel comfortable tackling yet at Automattic. Once we figured out a good way to do multi-page homepages, I brought it back up and it was suggested I turn it into a business theme. This theme would eventually become Lodestar, a yet-to-be-launched theme on WordPress.com.

Another couple rounds of iteration to introduce a more interesting grid, sharper typographic system, and the idea of video headers brought us to where Twenty Seventeen is today.

The coolest part of Twenty Seventeen wasn’t just watching it come to life, it was also watching it work with WordPress core to introduce new features: video headers, starter content, and even edit shortcuts (another feature I worked on alongside the Customizer team). The theme worked well with the release, which was centered around the idea of “your site, your way.” 4.7 is one of the most exciting releases yet, and I’m happy Twenty Seventeen contributed to that.

Of course, any good default theme also needs a strong team behind it. Working with Laurel Fulford and David Kennedy on the theme has been an absolute pleasure. Laurel coded my designs with accuracy and precision, and was ever patient and gracious in the face of my nitpicking. DK kept us on-track, and made the hard decisions that led us to success. You can read his writeup here:

Dear Twenty Seventeen Contributors

I’m thankful for all 103 contributors who helped create Twenty Seventeen:

aaroncampbell, acmethemes, adammacias, afercia, ahortin, akshayvinchurkar, alex27, allancole, anilbasnet, b-07, binarymoon, bradyvercher, brainstormforce, caspie, celloexpressions, claudiosanches, clorith, davidakennedydavidmosterd, delawski, dimadin, dineshc, doughamlin, electricfeet, enodekciw, fencer04, for, grapplerulrich, hardeepasrani, helen, hiddenpearls, idealien, imnok, implenton, implenton, initial, iv, joefusco, joemcgill, johnpgreen, jordesign, joshcummingsdesign, joyously, juanfra, karmatosed, laurelfulford, leobaiano, littlebigthing, lukecavanagh, mageshp, mahesh901122, manishsongirkar36, mapk, mattwiebe, mbelchev, metodiew, mor10, mrahmadawais, netweb, nikschavan, nnaimov, noplanman, nukaga, ocean90, odysseygate, patch, patilvikasj, peterwilsoncc, pratikchaskar, pressionate, presskopp, rabmalin, ranh, rianrietveld, ryelle, sami, samikeijonen, sandesh055, sgr33n, sirbrillig, sixhours, smyoon315, snacking, soean, sstoqnov, swapnilld, swisspidy, swissspidy, taggon, tg29359, themeshaper, transl8or, tsl143, tywayne, valeriutihai, voldemortensen, vrundakansara, westonruter, williampatton, yoavf, yogasukma, and zodiac1978.

All you folks were a pleasure to work with. We made a pretty dang nice default theme, if I do say so myself.

Comments

It’s taken me a while and a lot of thought, but I’m finally throwing the switch and removing comments from my blog for good.

Goodbye to Comments – Ryan Markel

My colleague Ryan Markel offers insights into why he’s removing comments from his blog. I agree with his reasoning, and to be honest, I’ve considered doing the same for my blogs — but receiving comments on my blog itself is rare enough that I’ve never bothered. If anything, most of my engagement happens through Facebook or Twitter.

Maybe I’ll also turn off comments when I eventually launch the site redesign I’ve been working on. Who knows?

Design Feedback

As some of you probably know, I’m a design contributor for WordPress. Lately, I’ve been working on Twenty Seventeen, the latest default theme. It’ll be released this December with WordPress 4.7.

A topic I wanted to bring up early in the public process for making Twenty Seventeen was design feedback. Designers, either through art school (which I didn’t go to), or working with other designers on teams, or even open source contributing, need to learn how to give and receive feedback. Most other people don’t have to learn this skill to succeed at their jobs. However, anyone can learn how to give good design feedback, even if you aren’t a designer. In fact, I believe it’s a good skill for anyone working in product design to learn. If you’re an agency designer, it’s also a good skill to teach your clients.

Here’s how I think good design feedback should be structured:

  • Empathize. Remember that behind every design is a person. If you wouldn’t say it to this person’s face, don’t say it on the internet.
  • Start with “I think…” and finish with “because…”.
  • Comment on particular elements that don’t work in the design, like the typography, colors, hierarchy, and composition. Try to be as specific as possible.
  • Stick to goal-oriented feedback: “This theme can become a better default theme for more users if it did [x], [y], and [z].”
  • Frame feedback as suggestions, not mandates. “What if you…” and “How about if you tried…” are great ways to present alternate ideas to a designer.

Twenty Seventeen’s been going swell and we’ve had a lot of great contributions and feedback from the community. Thanks to everyone who’s left a comment, or made a GitHub issue, and helped keep the process positive. :)

Attending CSSConf

Earlier this week I attended CSSConf in Boston, the city where I conveniently happen to live. :)

This was my first CSSConf, and it had a very different vibe than the other conferences I’ve attended lately. Unlike An Event Apart, it was a smaller, intimate conference — but unlike a WordCamp, it focused with just one track both days. In general, I’m a big fan of one-track conferences. They feel more curated and eliminate the need to debate between different talks or speakers.

Throughout the conference, there was some division amongst speakers about the nature of CSS, which I feel like narrows down into “fuck the cascade” / “embrace the cascade,” with programmers on one side and front-end devs on the other. As a designer, I find myself in the embrace camp.

Some of my favorite talks of the conference were Will Boyd’s Silky Smooth Animation with CSS, Sara Soueidan’s SVG IRL (which ended up being more along the lines of “embrace hacks when you have to,” with lots of different tips and tricks from a recent project she’s been working on), Justin McDowell’s Bauhaus in the Browser (my top fave!), and Alisha Ramos’ Coding is a Privilege.

The videos are already starting to go up online:

Thanks to all the organizers and speakers for a great conference!

Say Hello to Twenty Seventeen ??

It’s that time again: time to build a new default theme for WordPress! WordPress 4.7 will launch with a brand new theme – Twenty Seventeen. Designed by Mel Choyce (@melchoyce), Twenty Seventeen sports a modern look and will make a good base for any business website or product showcase.

— Say Hello to Twenty Seventeen ?? – Make WordPress Core

More to come at the end of the cycle, where I’ll talk about the whole process behind the theme, but for now I wanted to announce that I’m working on Twenty Seventeen, next year’s default WordPress theme. ?

Check out the post for more details, and key an eye out for my full write-up once WordPress 4.7 is released later this year!

Designers and Chefs

“Rules? There are no rules. Do whatever you want.”

— Grant Achatz, A Chef’s Table (2×01)

In a recent newsletter, Tobias van Schneider talked about his fascination with chefs. While designers get pushed towards management as their careers progress, chefs continue cooking. They don’t put down their knives when they run a restaurant; they continue to create and innovate and push boundaries. It’s something many designers aspire to, but rarely accomplish.

I’m also fascinated and inspired by chefs. I love food and I love eating. I love cooking, too, though my skills there are average. When I watch documentaries about chefs (I’ve recently been enjoying season 2 of Chef’s Table) I see a lot of parallels between cooking and designing. Maybe it’s because both are “craft” fields. We’re both creative; we both make. When I listen to Grant Achatz, Dan Barber, Ed Lee, and April Bloomfield talk about cooking, I’m reminded of designers in similar positions: Eric Meyer, Frank Chimero, John Maeda… I see in them a kind of creative thinking I aspire to achieve. Their journeys resonate.

People have been cooking for the whole of human history. Somehow, we’re still discovering new flavor combinations, new dishes, new techniques for cooking. There’s always more room for experimentation and innovation.

Web design has been around for what — 25 years? It’s younger than I am (what a weird thought). It builds upon a hundred years of graphic design, hundreds more years of printing, but as a whole feels like a young field. (Maybe that’s just my inadequate grasp on art history. Guess I should have taken a class in college.) Our medium is always evolving. What I’m designing now might not even be relevant in a couple years, when we move on to new interfaces. Digital design is a moving target, and that makes it super exciting.

Bias in Design

Designers can get lost thinking ‘this is what I would do in this situation.’ But we are biased and need to always open ourselves to other perspectives in order to do our best work.

Designing Gaming for Everyone

Great article on how Microsoft is working to make gaming more accessible. I especially love that they brought in gamers with various degrees of hearing and verbal abilities as subject matter experts.

As designers, we should always be challenging our own biases and assumptions. That means testing our products with the people who will be using them, gathering feedback, and constantly iterating. That means listening, first and foremost.

h/t Kelly for sharing.

Designer Newsletters

One of the weirdest realizations I’ve had in the past year or so is that I don’t actually hate email. Maybe it’s because working at Automattic, I get very little of it. Or maybe I’ve just come to value relevant, interesting content being delivered to me every couple weeks. Who knows. ¯\_(ツ)_/¯

Here are some of my favorite designers to follow via email:

Verse by Nguyen Le

Nguyen’s a cool dude with a casual, relaxed style of writing I enjoy. He puts out a weekly newsletter highlighting his latest blog posts (always worth a read), along with some weekly inspiration from around the web. He always concludes with a fun fact. It’s a nice structure. I really enjoy reading his newsletter each week.

(Subscribe via the floating form in the corner of his site)

Desk of van Schneider by Tobias van Schneider

Tobias also puts out a weekly newsletter, but each week is a little different. Rather than more of a roundup like Nguyen’s, each email from Tobias is a standalone piece. Sometimes each email will revolve around a question one of his subscribers has asked him. Sometimes it’s related to what he’s been up to — like an email from a month ago about what we can learn from Pokémon Go. His emails are often chock-full of interesting links and ideas.

(Subscribe here)

What’s new in typography by Jeremiah Shoaf of Typewolf

If you’re a fan of Typewolf, you’ll love Jeremiah’s monthly newsletter. He starts out by highlighting anything new going on with Typewolf. In the next chunk of his email, he does a roundup of interesting type news or developments across the web. He tops the email off with links to any notable typeface releases from the past month. If you’re a fan of typography, you should subscribe.

(Subscribe at the bottom of Typewolf)

Are there any other designer newsletters I should subscribe to? Let me know.

DIY Home Printmaking Studio

Every now and then I’m like “dangit, Mel, you should do some art.”

I started doing printmaking in college, mostly monotypes. I also made some linocuts, and a couple other assorted kinds of prints as the opportunity arose. I have some of my pieces kicking around on my art site.

After a recent visit with a friend who has their own home printmaking studio, I decided it was time to try it myself. It’s an idea I’ve been thinking about for a couple years now, but never got around to actually doing until now. Since I don’t own my own press (and have no interest in dropping hundreds of dollars on one), I figured I’d go simple. Linocuts would do quite well; unlike monotypes, I can get a couple of runs out of one linoleum plate.

I consulted with my friend and my college printmaking professor and came up with a list of supplies:

  1. Linoleum (no brainer)
  2. An assortment of inks
  3. Rubber brayers
  4. Palette knives
  5. Plexiglass for spreading ink onto
  6. A baren for hand-pressing my prints
  7. Some sort of non-toxic cleaner for cleaning my materials
  8. Rags for cleanup
  9. Watercolor paper for printing on
  10. A linoleum cutter (I already own this)

I ended up getting everything from Blick, since they were cheap and convenient. I picked up a couple different sizes of linoleum (4×5″, 6×8″, 12×12″), as well as some black, white, red, blue, yellow, and green inks. I bought a 4″ and 8″ brayer, but I’m thinking the 8″ might be too big and I still might swap it out for a smaller one, maybe 6″.

All told, it ended up costing me around $180 for all the supplies I needed. Honestly, this was lower than what I was expecting it to cost to get started.

For my first print, I decided to go with something small and simple — just one color. I traced one of the 4×5″ rectangles onto a sheet of paper and started sketching some ideas. When I had something I liked, I traced it onto the linoleum and drew over with a red Stabilo pencil so it would be easier to see and carve later. Once my drawing was all set, I tossed my linoleum in my oven on a super low heat to warm and soften it up so it was easier to carve (Note: this might be super dangerous. Who knows! We had a heating table when I did printmaking as a student).

Starting a simple, one color linocut. #printmaking #linocut #art

A photo posted by Mel Choyce (@mel_choyce) on

I ended up doing a second one free-hand, using just the pencil and then my linoleum carver.

I have a nice, open table in my living room, so I set up my printing supplied there. I chose the second block to print. I laid down some ink on my plexiglass surface and did some mixing. I was aiming for a reddish-brown and mostly got there, but I’m definitely going to need to get used to mixing inks again.

Side note: Super pleased with my palette knife — very flexible and springy. It mixed my inks really well. 

Once my ink was mixed, I spread it down into thin layers with my palette knife and then rolled it into a thin, even coating with my smaller brayer. Laying my linoleum down onto a sheet of paper, I rolled out a layer of ink, trying to be as thorough as I could without having anything to anchor it down. It was a little hard to manage and I got some ink on my fingers.

When at last I got a good layer of ink down, I transferred it to a clean piece of paper, laid my printing paper down on top of my linoleum, and pressed down with my baren, to… some success. I tried to do another print, this time switching so I was pressing my linoleum down onto the paper instead of the paper down onto my linoleum, but I didn’t have enough ink down to really tell the difference.

After printing, cleaning up went easier than I expected — the citrus-based cleaner I chose cut through my water-based inks without any trouble.

Takeaways: I didn’t wear gloves when I was printing and that wasn’t very smart. Always wear gloves, kids. I also need to find a better way to register my print onto my paper and transfer. I kept moving my paper around, which made it harder to press down firmly. I was worried I was going to smudge it a little (which I did). My print didn’t come out nearly as clearly as I was hoping, and there was a big splotch that didn’t really transfer. I need to find a way to stabilize everything and, if I do multi-color prints in the future, need to find a better way to line everything up. My alignment was pretty messy this time. I think pressing down onto the linoleum made it a little bit easier to control, so I might experiment with doing it that way first next time.

I also noticed after my first round of printing that my ink was starting to dry up — I tried to gather it all back up and re-spread for round two, but it was too thick and dry to spread again. I’ll need to figure out a way to keep my ink wet. I’m using water based inks, so maybe a splash of water? Not sure.

If I do a larger print, I think I’ll need to buy a larger piece of plexiglass — this one just barely fit everything. I don’t think my larger brayer would be able to get an even coating of ink without a larger space to roll out on.

All-in-all it turned out okay for my first home print. I’ll have to keep playing around so I can work out the kinks. :)