There’s a lot to like about the new iOS 7. As a whole, the result looks mostly unique. There’s a nice clean aesthetic going with the thin Helvetica, the white UI chrome, the sandblasted layers and the almost complete absence of gaudy textures. It’s also colorful. Which is a good thing. Right?
Leading up to this there were jungle-drums touting how flat the new UI was going to look (as though every UI will suddenly be clean and uncluttered if you just run it over with a bulldozer). Fortunately that’s not what happened. Don’t get me wrong: I do like my UIs to be clean and simple, I just find the term “flat” to be mostly meaningless when applied to design. There are no magic bullets, there’s only good design and bad design, and I think Jony Ive gets that. So instead of trumpeting flat, Apple trumpeted true simplicity. Oh, and grid-based icons:
Sure, there’s certainly a grid there. I was mostly paying attention to the light-source for those gradients, though: why does Phone looks embossed while Mail looks inset? Also: Game Center? Again?
There will be no tears shed for the linen texture. I will not mourn the loss of green felt. Still, the new iconography alone makes iOS 7 such a departure that there’s bound to be some learning curve, which begs the question: why didn’t they go further now they were at it?
They had a real opportunity here. Jony could’ve said to his team:
Team! We’ve dominated the smartphone market for the last 5 years with a grid of round-rect icons. How do we re-think it from the ground up for the next decade? How do we create something that’ll make Samsung scramble to copy us again?
Perhaps they did just that. Conceivably they created giant mood-boards. Maybe they decorated hip little cubicles with smiling model faces and photos of subway signs and collages of differently colored post-it notes. Could be they brain-stormed all the places they see the mobile space go in the next ten years: creepy glasses, holographic watches, voice-controlled smart underwear. No doubt they considered the convergence of the cloud with all these new-fangled features. Perchance they arrived right back at a grid of icons: Eureka! We had it right all along!
I hope that’s not the case. I hope they had grander ideas… post-smartphone ideas. I’m hoping they were just so lazer-focused on shipping on time they had to punt their ideas for replacing Springboard. I’m hoping Jony felt the most important thing was to uproot the old linen-clad ways and set out a strong new direction for all future Apple UIs. I want to believe.
I want to believe that maybe one day we’ll have smartphones whose strongest visual cues aren’t defined by the graphical prowess of 3rd party icon designers. I want to believe that maybe one day we’ll look back at websites that use confirm() to alert us of their mobile apps as a dark age. I want to believe that maybe one day it’ll be possible to avoid all social interaction in a manner more impressive than tapping in and out of apps. Is that so much to ask?
I’m a big fan of design that’s relieved of unnecessary flair like gradients and textures (calling it “flat design” is a disservice to simplicity). But the more cruft and flair you remove, the more important it becomes to get your physical space in order.
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.
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. My motto for the next couple of months was the Litany of Fear from Dune.
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.
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.
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.
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.
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.
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.
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.
Here’s a video of me creating one of the headers in Photoshop:
Here’s a fun header that didn’t make it:
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.
An Automattic 20% project of mine just graduated. Genericons is an icon font with emphasis on blogging. It’s GPL, so you can bundle it with WordPress themes. What makes Genericons special is that, like its inspiration: Githubs Octicons, the font was designed with a precise pixel grid in mind. That means if the icons are shown at appropriate font sizes (in this case, 16px, 32px, and similar multiples), the icons will render perfectly crisply. Thanks to Sheri and Takashi for contributions.
“Gobsmacked”, is probably the most descriptive word I can find to describe my state of mind when I was invited to design the new WordPress bundled Twenty Thirteen theme (also check out the demo site!). The pitch for the theme was to emphasize the blog, and encourage users to use post formats, an area of attention for WordPress 3.6 with which the theme will ship. I’m frankly quite proud of the end result, and I really hope you’ll find it fun and fresh. Special thanks to Matt, Lance and Konstantin for making this possible. It’s been quite a ride, we’re not done yet, and I’ll have more to say. I think it’s also time I started using post formats on this blog.
Every year, same as last year, WordPress.com sends out annual reports to sites, including Jetpack powered ones: a snacksized overview of what happened on your website. Have a look at this blogs report!
If you’re really into icon fonts, which I have recently become, you may have noticed a tiny storm brewing in the suburbs of the internet. It’s about CSS-specified font smoothing. Quite a nichy topic, one you can live a perfectly good life without ever knowing all about. You may in fact sleep better by not reading on.
Still here? Alright, here’s the deal. WebKit — born of Safari, engine of Chrome — allows webdevelopers to specify how the edges of fonts are smoothed. The modern default font smoothing method is called subpixel antialiasing. It smoothes font edges using quite impressive means, and in nearly all cases it drastically improves the rendering of letters. If you look at the text in a magnifying glass, though, you’ll notice a nearly imperceptible blue haze on the left side of each letter, and a red haze on the right side. WebKit provides a means for webdevelopers to pick which type of font smoothing is applied: subpixel-antialiasing, antialiasing, or none. Handy. Right?
The controversy is the fact that a number of people — smart people — feel that this CSS property is damaging to the readability of text on the web. There are very long articles on the topic. In fact quite recently a Google employee removed the CSS property from Chrome, citing the notion that the browser should render text according to the operating system. There’s just one problem: icon fonts.
Icon fonts are custom-made webfonts that contain no letters, only icons. The purpose is to have fast access to a bunch of icons in a very lightweight and easy way in your webdesigns. Other benefits include the fact that the icons are infinitely scalable because they’re vector graphics, and you can easily apply any color, drop-shadow or even a gradient to each icon using plain CSS. Sounds brilliant, doesn’t it?
The only downside is that an icon font is still technically a font, so the computer thinks each icon is actually a letter, and by default will try to subpixel antialias it. While subpixel antialiasing does wonders to letters, it’ll fuzzy up your icons and make them look blurry. Which is why the -webkit-font-smoothing property was so welcome. Here’s an icon font without and with subpixel antialiasing:
As you can imagine, I’m strongly in favor of not only keeping the font-smoothing property, but in fact expanding it beyond WebKit to both Firefox and Internet Explorer. Icon fonts won’t be a truly viable webdesign technique until every icon looks great on all the platforms.
“But SVG is the future of vector graphics on the web, surely you know that!” — Yes I do. But pragmatically speaking, that future is not here yet. SVG support is still lacklustre, especially when used as CSS backgrounds. More importantly, you can’t easily change the color of an SVG icon using CSS only, or apply a drop-shadow. Yes, drop-shadows are on the road map for SVG, but the way it’ll happen is not pretty. Icon fonts, on the other hand, provide a real-world solution today, which is both flexible and infinitely scalable. So next time you see someone bad-mouthing -webkit-font-smoothing, pat them on the head and mention icon fonts. The more you know.