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. :)

ADHD anti-patterns on the web

I’ve spent most of my life ignoring my untreated ADHD. Instead, I’ve devised personal hacks to work around it, such as:

  • Excessive caffeine consumption
  • Picking classes which highlight my skills
  • Gravitating towards a career that is compatible with my work habits
  • Etc.

My girlfriend was diagnosed with Autism earlier this year. I started learning more about Autism and the neurodiversity movement. That helped me explore my own neurodivergence; I thought more about how my ADHD effects me.

I have a lot of trouble reading (rather unfortunately — it’s one of my favorite hobbies). I lose focus easily. I lose my place. I find myself rereading the same sentences over and over again. I’ll get down to the end of a paragraph and realize I didn’t absorb anything. Usually I can push my way through, but reading on the web is full of distractions that break my attention. Paying attention to my symptoms helped me identify web patterns which inhibit my ability to process information.

Here are two patterns I find particularly difficult:

Collapsible headers

You know the kind: sticky headers that collapse upwards when you pause a page, or scroll down and read. But the second you start moving upward, they leap back into place. Designed to increase focus, this pattern instead jolts me out of whatever I’m reading. It often covers the content I scrolled back up to re-read. I find this particularly difficult to handle on Medium, especially on my phone or tablet. If you’re logged out, there are currently two bars that appears when you scroll upwards.

While reading, I often find myself having to go back and re-read a previous sentence to absorb the message. For me, collapsible headers reduce my focus, not enhance it.

Animation

Animation is distracting. Please use it with intention.

If there is something animating on the page, that is all I can focus on. I can’t keep my eyes from moving along with it. Sometimes an animation or gif is so distracting I have to hide it with my hand.

I can deal with animation when it’s an integral part of the article itself — for example, if I’m reading a post on animation techniques — but when animation is decorative or superfluous, it hinders my ability to read. (Worst of all are animated ads stuck in the middle of articles.)

If your site uses these two patterns, ask yourself: does it improve the user experience? Or is my content harder to engage with now?

Just food for thought.

Portfolio Design Tips

In the past couple of months I’ve gotten involved with hiring designers at Automattic (which is a pretty new and kind of weird experience for me). I’ve seen enough portfolios that I’m starting to get a feel for what’s effective and what misses the mark. Here are some tips:

Optimize your images

Don’t make me wait. Your images should be high-quality and retina-friendly, but they also shouldn’t take forever to load. If your design tool of choice doesn’t do the optimization for you, there’s a bunch of free tools you can use to whittle down your file size without losing too much quality. I want to see your big, beautiful portfolio examples, but I don’t want to have to wait for them to load forever.

Make your projects easy to browse

Should be intuitive, and yet… I’ve reviewed so many portfolios where it’s not easy to go from one project to the next. Simple navigation, whether it’s a grid of projects or even just a Back / Next link at the bottom of your project, is enough for me.

If you worked on a project with others, clearly state your role

Design is often collaborative. That’s awesome. But if you’re showing projects you worked on other designers (or art directors, etc.) try to be as explicit as possible about what part of the project you were responsible for. Don’t make whoever is viewing your portfolio try to guess which part is yours and which was done by someone else.

Write case studies

Show me your sketches and your process. In my opinion, the worst thing you can do is just throw a bunch of screenshots or mockups on your site with no sort of explanation or guidance. What were the project goals? Did you accomplish them? What was your process like? Why did you make these decisions? It doesn’t need to be an essay — even a paragraph is fine — but it needs to get me into your head and see the project from your perspective. A couple screenshots isn’t going to do that.

Remove your older projects

I’ve seen a lot of work from 2011-2013. It usually looks outdated, because it is. Just cut it. If you’re worried about not having enough work, spend more time on your recent examples and work them into case studies. Older or mediocre designs bring down the overall quality of your portfolio. It’ll be stronger without them, I promise.


I know this is probably kind of ironic, given I haven’t updated my own portfolio in quite some time and it’s pretty sad and outdated. I’ve honestly been thinking about redoing my site and removing my portfolio in favor of just my blog — but that’s a topic for another time.

PS: Automattic is hiring Product Designers and Marketing Designers!

Why WordPress.com Rocks for Small Business Freelancers

Disclaimer: I work for (and on) WordPress.com, so I’m obviously biased about how great it is 😉

WordPress.com is underutilized by freelancers in the WordPress community. When I hear freelancers talk about making small business websites for clients, self-hosting WordPress seems to be the only solution people mention.

That’s a shame — WordPress.com can be a quick, inexpensive, and secure way to build a website. If you’re adept at theme selection and setup, you can sit down with your client and build a website in just a couple hours.

Here’s why WordPress.com can be an attractive site-building tool for folks who target small businesses:

Easy for clients to use

The hardest part of setting up a site is actually setting up the site in the first place. This can be a huge hurdle for people without website building experience. Once you’ve built up that experience, however, setup can become fast and easy. This is the kind of skill freelancers build in abundance.

Once a site it set up, clients just have to worry about updating and editing content themselves. WordPress.com’s content tools are fairly intuitive. With a bit of training tacked on to your site-building process, you can get your clients up and running on their new site in just an afternoon.

Tons of Themes to Choose From

WordPress.com offers over 350 free and premium themes, the vast majority of which are responsive. (As of this post, 167 free and 192 premium, ranging in price from $19 – $175. Most are in the $49 – $79 range.) Though there aren’t any theme frameworks available, the number of available themes makes up for the lack of flexibility. The available themes, both free and premium, can be used for any small business site you can think of.

All of the themes on WordPress.com have been reviewed for security, speed, and usability. They are maintained, even after retirement (which doesn’t happen until they’ve been around for a couple years). You don’t need to worry about a theme updating breaking your client’s site, or an ignored theme update becoming a vector for hacking.

Once you buy a Premium theme, there are no recurring fees or subscriptions — you can use it on that site forever. When it is eventually retired, you can continue using the premium theme until you switch to a new one, at which time the theme becomes unavailable.

If your client springs for a Business plan, they gain access to all themes on WordPress.com, free and premium. It’s a nice perk in a more comprehensive upgrade plan.

Built-in Constraints

One of the best parts about WordPress.com is that it has a lot of built-in constraints.

Because clients can’t upload any random plugins or themes they find, or add their own code to their site without you knowing, the risk of getting their site hacked through insecure code is pretty much eliminated. While this limits the kind of features your clients have available, it can also be used as justification for keeping their site small and focused. When you offer people the world, they’re likely to take it. Limited functionality = limited scope creep.

Having limited features available also keeps your build time down. When you don’t need to worry about building functionality from scratch, or installing and configuring a bunch of plugins, you save time. When it comes down to it, most small business websites don’t need a bunch of custom functionality — they can make due well enough with the tons of features WordPress.com does offer.

Provides Most of the Functionality You Need

So what features does WordPress.com offer?

In addition to basic content management, it offers:

  • Custom domains and email support
  • Site stats for all users, and access to Google Analytics integration for Business users
  • Google Webmaster Tools
  • Tools for improving your SEO
  • Easy ways to add your contact information
  • Contact forms
  • Sharing across all major social media platforms
  • Portfolios for creative professionals
  • Testimonials to bolster your social proof
  • Some sweet image galleries options
  • Tons of content embedding options
  • Additional integrations from services like Eventbrite, Google Calendar, etc.

Is it as comprehensive and full-featured as building a custom site for your clients? Heck no. But is it good enough for most small businesses? For sure.

Maintenance and Support

One of the best parts of going with a hosted solution like WordPress.com is what happens after you finish building the site.

Back when I was doing agency work, we’d end up supporting our small business clients pretty much forever. Unless you negotiate a retainer plan, getting emailed every couple weeks or months about updates can be a hassle when you have a bunch of clients or if you’re heads-down in another project.

When you’re using self-hosted installs of WordPress, there’s a lot to maintain — plugin updates, theme updates, security updates, major release updates, etc. You can mitigate some of that by enabling auto-updates on your client sites, but if you client starts installing their own plugins or even themes, the risk of something breaking can get pretty high.

On WordPress.com, you don’t have to worry about that. All of the updates are taken care of for you and your clients behind-the-scenes. In the off chance that something breaks, WordPress.com fixes it right away. That means no ongoing maintenance or emergency 2am phone calls for you. If your business it built on ongoing maintenance and retainer plans, maybe this isn’t for you. If you want to serve a variety of clients without getting tied down to them for a couple years, then you should consider the benefits.

It’s also a super reliable host. WordPress.com hosts some huge names in news and big media, so you can be sure that if one of your client’s blog posts goes viral, or they get linked to from Reddit or something, their site stays up. Downtime is very rare. If something does go wrong? WordPress.com has killer support. Free users get access to forum support, and Premium/Business users get access to email and live chat support (and I really do hope your clients have upgraded off of the free plan — small they may be, but they are a business). Once you build the site, you can essentially push all of the ongoing support to WordPress.com so you can focus on new clients. Your clients get quick answers, and you don’t get emergency phone calls. It’s a win/win.

Why not give it a try for your next small business client?

Good Design is Environmentally Friendly

I recently gave a talk at WordCamp Maine about good design. In this presentation, I had a section on Dieter Rams’ principles of good design. When I was writing the presentation, I thought about how I could apply one of Rams’ principles, “good design is environmentally friendly,” to the web. This principle states:

Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.

“Environmentally friendly” is easy to understand when we’re thinking about industrial design and the production of physical goods. Eco-friendly design is sustainable; the creation, production, and eventual disposal of that product does not harm the environment. Like a good girl scout, our well-designed products might even leave the environment better than we found it.

This concept is a little bit trickier when you think about the web. As designers and developers, the products we build don’t often impact the environment at all. (The exception is perhaps our physical tools themselves: computers, tablets, and phones.)

Instead of the physical environment, we can apply Rams’ principle to the digital environment. Eco-friendly design does not harm an online community or its denizens. This means protecting our users’ information and privacy, and shielding them from abuse and harassment. If our designs don’t protect our most vulnerable users, then they are not eco-friendly.

We need to design to reduce anxiety, and design for people in crisis situations. Above all else, we should design so we don’t need to build sites like this.

Eco-friendly design becomes even more important as our world becomes more connected. More than three billion people now use the internet. That’s a lot of people whose lives we can fuck up through laziness, neglect, or malicious intent.

Mike Monteiro has given a great talk on this topic, entitled How Designers Destroyed the World:

I had the privilege of seeing Monteiro present in person. His talk has made a lasting difference on how I think about our roles as architects of the web. The decisions we make can, and often do, have a huge impact on the lives of our users. It’s our responsibility to see that our impact is positive.

Let’s leave the web a better place than when we found it.