Genericons Neue

One Automattic "hack day" many years ago, I released Genericons, a font containing a bunch of little icons useful for blogs and websites. For this years hack day, I created a new version, Genericons Neue. It's visually more coherent and icons are better weighted against each other. The set comes with minified SVG files ready for use, as well as an icon font if you want to use that (buyer beware). If you're a fan of Node, there's a module you can install. It's super easy to use, and I encourage you to use the set, fork it, customize it, and bundle it with your themes.

The original Genericons set was created for the WordPress Twenty Thirteen theme. A goal for that theme was to be colorful, and in order for that to work, icons for tags, categories and comments had to be easily re-colored using only CSS, something which PNGs did not allow. SVG support wasn't impressive at the time, and so Genericons became an icon font. Inspired by The Making of Octicons, Genericons were pixel-perfectly drawn in Glyphs Mini. It was quite an arduous process.

Genericons Neue is focused fully on icons, so all logos have been removed — more on that in a bit. The set now use grunt to build everything from the minified SVGs to the icon font. The build process is like a black box: you feed it a folder of SVG icons you drew, and it outputs formats ready to be used in your themes and web projects.

If you're coming from Genericons, do note that there are no logos in Genericons Neue. Because Genericons was so early to the icon-font game, it more or less became a kitchen-sink for icons and logos. First just a few logos — "the most important ones" — then slowly it grew into too many. There were a bunch of little dingbats and one-offs, like triangles for CSS speech-bubbles today better done using just CSS alone. It was useful at the time, but it diluted the focus on being a great and consistent set of icons. On top of that, logos present unique challenges. Aside from having to be kept up-to-date with rebrandings, how should they be sized? Every logo is drawn on a unique grid, they don't all fit well on a tiny pixel-perfect grid.

If you would like to upgrade from Genericons to Genericons Neue, you can use logos from a different set, such as Social Logos. If you are only using the icons also present in Neue, it's a drop-in replacement as the icon font will map to the same codepoints.

I hope that you'll like Genericons Neue!

Twenty Thirteen: Make It Yours

WordPress 3.6 was released today. With it, the Twenty Thirteen theme into which we've poured much energy. One aspect that was particularly important to me, when designing the theme, was to encourage users to customize the theme to their liking. For the very same reason, every icon in Twenty Thirteen is an easily recolorable icon-font glyph. So changing the whole color scheme is basically writing some CSS.

To celebrate the occasion, I made a couple of color themes you can install on your Twenty Thirteen blog.

2013 Green

twentythirteen-green

Green is my favorite color these days. Did you know when danish people have their final high school exams, they sit at a green table, because green has a calming effect on your mind? It's true. I tried it.

Get 2013 Green (preview)

2013 Green Sequence

twentythirteen-green-sequential

Twenty Thirteen has emphasis on blogging, and post backgrounds are assigned based on post formats. If you don't use post formats, but want the colors of Twenty Thirteen, get this one — it'll simply alternate the background colors sequentially.

Get 2013 Green Sequence (preview)

2013 Blue

twentythirteen-blue

I actually threw in a shade of pink, or "salmon", in this blue mix. So it's not entirely shades of sky blue, but I guess you could not use the "status" post format if you dislike salmon. Or you could customize it and make it your own!

Get 2013 Blue (preview)

2013 Blue Sequence

twentythirteen-blue-sequential

If you really don't like salmon but do want an alternating post-format-free blue theme, you'll want to get this one and customize it. Or you could embrace the salmon. Smoked. On toast. With salt and pepper.

Get 2013 Blue Sequence (preview)

2013 Orange Sequence

twentythirteen-orange-sequence

Having made sequence versions of blue and green, it seems unfair not to complete the triad. So here's Orange Sequence — that's the default Twenty Thirteen color scheme, but the colorful post backgrounds are assigned regardless of post format.

Get 2013 Orange Sequence (preview)

How To?

These are child themes. That means they're WordPress themes that require a parent theme to be present, in this case Twenty Thirteen. So these themes will only work if you also have Twenty Thirteen installed. If you're on WordPress 3.6 or higher, Twenty Thirteen is preinstalled.

More Options

One of the best things about open source is that you can modify things to your liking, and even redistribute.

Please do so. Make it your own, and share it back.

I would like nothing more than to see you modify and redistribute any of the above child themes. So much, in fact, that if you'd like to re-color the default Twenty Thirteen header, I've made you this PSD so you can easily do just that.

Now go play with some colors!

Four Little Numbers

twentythirteen

Twenty Thirteen, the theme I designed with Konstantin and Lance is now on WordPress.com, and will soon be the default theme of WordPress 3.6.

Designing Twenty Thirteen has been a pretty remarkable experience, mainly because I got to work with such an amazing community. There's nothing to temper a theme into shape like hundreds of people submitting patches. It's as much a privilege as it is a learning experience and the design has changed so much since my initial mockups, all for the better. Here's how it all started.

Brief

Through machinations I have not yet fully understood, an invitation to design a new default WordPress theme landed in my lap at the end of 2012. After an ensuing song and dance show with no-one watching, the reality of the situation slowly descended on me.

The overarching vision for the theme that Matt had set out, was a focus on blogging, and great support for post formats. On top of that, we wanted a colorful, warm and friendly vibe. That plus total creative freedom was pretty much the extent of the direction given. Blue skies are both daunting and exhilerating.

Keeping those core values in mind, I started creating palettes, picking fonts, and drawing shapes.

Note: It's important to understand that there's a new Twenty theme every year, and one goal is to be different from the year before. Twenty Twelve is CMS oriented and features a squeaky clean codebase. Twenty Thirteen is focused on the blog, putting your reverse chronological post stream front and center. Will next year be a CMS theme again? Perhaps; I personally cannot wait to see what will be created for Twenty Fourteen.

Design

It was quite a relief that the theme didn't have to be anything like the previous Twenties. After all, Twenty Twelve is still a fantastic theme. It's current and it's wonderful, and the year-naming of the Twenty themes (unlike with Microsoft Office) does not indicate "newer or better" — just: different. This gave me the freedom to explore a bunch of ideas, including dropdown menu widget areas, multi-column posts, crazy abstract headers, tiled galleries, large pictures, huge fonts and bold colors. Some of those initial ideas survived, others were tempered by reality.

palette
bitter
source

Post Formats

Posts are posts, right? Sure, but what if there were special layouts that were tailormade to different types of content? That's the genesis of post formats in WordPress, and the feature is getting a huge bump in the upcoming 3.6 release. With Twenty Thirteen, we wanted to hook into that new ecosystem, and encourage the use of different post formats to better highlight a variety of content. So I spent a great deal of time trying to find a pattern for each post format: what does a "status update" look like? Let me tell, you, I have stacks of paper sketches — many of them angrily crossed out, some of them so quickly jotted down they're barely readable anymore.

mockups

In the end the key to cracking the design was assigning a color swatch to each format. You'd be able to create your own alternating tapestry of colors.

tapestry

The mockups were quite interesting and difficult to do, because a zoomed out view of such a tapestry of posts doesn't do the overall design justice. You have to zoom in 1:1 and watch the colors change as you scroll down the page — like how users will see it. Scrolling becomes almost magaziney.

Icon Font

One aspect of theme design that becomes much more difficult when a wide range of background colors is used, is iconography. Icons for comments, tags, categories etc, are usually PNG files. The problem with that is that you bake the icon color into the graphic file, making it necessary to create a rather large stack of different-colored icon files in order to ensure contrast on all background colors. Since we wanted it to be super easy for users to change the default Twenty Thirteen color scheme if they wanted to, PNG files weren't ever going to be an option. Fortunately I was allowed to release an icon font I'd created for WordPress.com, and use that. The result, Genericons, is a free and GPL icon font full of symbols that are useful for WordPress themes. I hope to see it in use far beyond Twenty Thirteen, because it's just so wonderful to be able to add colors, drop shadows or even CSS animation to fully resizable symbols, compared to dealing with PNGs.

Header

With a tapestry of alternating colors, how does a header fit in? The answer was to treat the header like we treated post format backgrounds: have the background illustration full size, regardless of browser width, cropped if seen on a mobile device. This made the header a decorative element and part of the tapestry. As for the contents of the header, I explored abstract color shapes, flat and simple like the post backgrounds themselves.

headershapes2
headershapes3
headershapes1

Here's a video of me creating one of the headers in Photoshop:

Here's a fun header that didn't make it:

scrapped-header

Speaking of kooky, one way to create a warm vibe, I find, is to not take everything too seriously. So we put little tweaks here and there to hopefully make you smile. The 404 page is an example.

Make Your Own Kind Of Music

Twenty Thirteen is not for everyone — it's for colorful blogs with a variety of content. If you're into that, I really hope that you'll enjoy using Twenty Thirteen. I hope you'll customize it, re-color it, hack it and make it your own. In fact at some point in the not too distant future, I'd like to release a couple of alternate color schemes and templates to get you started. This is not the end.

It's been such a privilege to work on this theme, and I thank Matt and the community for not only giving me the opportunity, but for embracing the colors and shapes I concocted. Probably the greatest privilege of all was to work directly with Lance Willet and Konstantin Obenland, my partners in crime. These guys took my mockups and made them sing. Seeing the theme come together was like magic. A design is just an idea, but for ideas to become real they need to meet with reality with all that entails. Lance and Konstantin were supportive and they understood and appreciated what we were trying to do, and for the work they did (and are still doing) they have my undying admiration. I'm tremendously proud to have my name listed next to them in the great halls of the Twenty theme developers. It's a bucket-list item I never thought I'd be able to check. So thanks so much for that.

Jetpack

large_jetpack

Exciting times at Automattic. We've just launched Jetpack, a brand new plugin for your WordPress blog. It brings you features that were previously WordPress.com only. A lot of features, actually — you should visit jetpack.me to find out all the nitty gritty details — but my favourite features are these:

  • All new, iPad friendly WordPress.com Stats
  • Some unannounced upcoming features!

I'm so completely proud to have played a part in the team-effort design of the Jetpack experience. We really, really hope you like it.

I've joined Automattic

Exciting news today! I’ve joined Automattic, the company that makes WordPress.com. I’ll be a full-time design wrangler.

I’ve done some consulting for Automattic in the previous months (most recently with regards to Stats), but the offer to join the company full-time came out of the blue. I wasn’t actually looking for fulltime employment, but the possibility of working with these supremely talented people on improving my favourite platform, while staying in Denmark which is near my favourite country (Sweden), was a combination offer that was simply too good to pass up.

I don’t have any more specifics at the moment, but feel free to question me up in the comments and I’ll try and answer if I can.

Limbo

screenshot02

Launched yesterday is a brand-spanking new-material-laden WordPress website for Limbo, an artistic, sidescrolling platformer. Limbo is engineered by Copenhagen-based Playdead Games which I’m proud to call my neighbours. As you can see from the screenshot above, the game is absolutely gorgeous, and it’s even better-looking when it’s moving, so you should definately check out the newest trailer on the website, and this gameplay footage from Gametrailers.com.

No Redesign Today

I know I promised the ether that I’d publish a Noscope redesign today. And here it is; white squares on what is currently a grayish background in a fixed-width single column left-aligned design.

One day I woke up and felt like shedding my old clothes1. Since I make my living doing websites, cleverer people than me might have advised that I do that years ago. I’d tell them that redesigns are essentially bad, and should only be done if you have really good reasons to do so. Fortunately, I’ve had plenty of reason for quite a while.

At one point I had a love-affair with liquid-width designs—you know, designs where if you scale your browser window, the contents stretch to fit? As it turns out, we were starcrossed lovers. This, in part due to James apt observations that the appearance of fullpage zoom spells the death of said mistress. I happen to agree.

Fullpage zoom is only available in modern browsers—nearly all browsers built after the year 2001, or in humanspeak: not IE6. That means users of said browser aren’t welcome here any more. That includes potential clients for my webdesign business; yep, I’m that serious. I won’t build your crap anymore! Shoo! Go back to your Ford T and speak of how the old days were better. All those are met with an unwelcome message.

No_IE6s_Club

I’m a fan of both simple, changing and not changing designs. Those are three core values that are fairly hard to wed. My attempt at doing so spells square shapes, no cut corners, a single column (another bandwagon I’m late to join) and changing backgrounds. Right now I’m really satisfied with the current Apophysis generated fractal flame gracing the underbelly of this vehicle of text, but it’ll change. From time to time. That and colors.

In fact, at one point I wanted every color to be so customizable that I tried to concoct deadly mechanisms to achieve my goals. The idea was to upload vectorized SVG icons, and colorize and convert them to PNGs on the fly, serving iconography fitted to the time of day, my mood, heck, even your mood. No such luck, this time around.

I also ditched the tabs;

Before:

Noscope_Before

After:

Noscope_After

Today, well, even back when I added the tabs in the first place, tabs indicate instant effect. This being an HTML powered website (the best type of powered website), the effects were never instant. So no more tabs, except on the frontpage, where the effect is instant. I knew this all along, but I told myself that I wanted to unite the various sections and bring focus to other content than just this journal. I have no such illusions any more, now I just want you to look once at my contact page, because I think it looks really nice.


  1. By the way, I’ve gathered a little wardrobe of discarded clothes, you can see all the previous no-designs there