State of the Word 2011 Slide Design Notes

State of the Word 2011

Last Sunday Matt delivered his yearly State of the Word presentation at WordCamp San Francisco. It’s a real humdinger, and they’ve even cut in the slides throughout for the full experience. You can catch a video of the presentation over on WordPress.tv, or here:

Vintage record covers, revisted

I worked (remotely this year) with Matt and fellow exile of the British isles Pete Davies on shaping up the narrative flow of the presentation and then experimenting with ways to visually represent it. Much fun was had. This year Matt decided it would be cool to revisit the vintage jazz LP cover theme for the slide design, so I went about picking out some covers to adapt to our purposes. I stuck mostly with jazz labels, as with last year’s Blue Note theme, but strayed occasionally into other genres where the temptation was too great not to. All of the designs fall somewhere within a decade or two of mid-century modern, arguably the golden age of jazz LP cover design.


Full Gallery

If you’re interested in seeing all of the slides in full-sized glory, I’ve uploaded them to a separate gallery page. Bear in mind that they were created at high speed, and were meant to be viewed that way, so you may find the odd kerntastrophe or grid insurrection (although hopefully not).

Inspiration

The idea was to allude to classic (mostly) jazz album covers, adapting them somewhat to suit the different aspect ratio of the Keynote slides and the considerably different usage. Here’s a slideshow of the source covers that I worked form. You can also check it out slightly larger images on the SOTW 2011 inspiration gallery page.

This slideshow requires JavaScript.

Huge shout outs to  Project Thirty-Three,Vintage Vanguard, and Cover Jazz for lovingly gathering hundreds of great cover designs together for me to ruthlessly plunder.

Likewise, to Christina Warren’s WordPress UI history on Mashable.


Process

Once we’d settled on the idea of revisiting the vintage jazz LP theme I had about two weeks to source, template up and populate the slides. Within the two weeks the presentation was being adapted and updated daily, up until the day itself. As is quite usual with any presentation, we cut, changed and even started over on around half of the 100+ slides about a couple of days before Matt was due to go on stage, so as I mentioned above, these were put together at high speed.

I made pretty much everything in Photoshop, with a bit of Illustrator and After Effects on the side. All of the slides were remade from scratch (no scans or clips from the original sources) with the exception of the image from the Jazzville cover and the central looped arrows of the Innovation loop slide, above. This mostly involved lots of vector tweaking, textures and layers-within-layers, tucked inside smart objects.

I’d love to have done everything in Keynote, but alas it still doesn’t support blending modes, which was a pretty much essential part of the process here, especially where dealing with vintage textures and the kind of overlays and colour blends so prevalent in this type of design. The downside of this is that tweaking a slide can be somewhat more longwinded when it involves finding, opening and navigating a multi-layered photoshop file per slide, rather than clicking on some text and quickly changing it in Keynote. The upside, I hope, is that the results aren’t really something you can really get with Keynote alone.


Challenges

The main challenges, beyond the tight deadline and iterative updates to the content throughout, were essentially:

  • Adapting square-format LP covers to 4:3 layouts, which meant either significantly adapting the whitespace and design elements, or taking liberties with typography and layout
  • Trying to do a fair job of staying true to the essence, if not the exact decisions, made typographically and visually in the original covers and estimating which typefaces were used in each case. With a month to research it, I could probably have done a better job here, but think I did okay given the approximate hour-per-slide timing and hopefully there aren’t too many typographic blunders scattered throughout. I’m putting the larger deviations down to the first point – adapting to the more vertically squat and horizontally spacious aspect ratio of the slide format
  • Working from pretty small, far from original-sized screenshots of the album covers often meant that high speed creative liberties needed to be taken, as enlarging the originals for a better look at the details led only to pixelmush.

 

Form & Function

The most important thing was that the slides didn’t just reflect Matt’s rabid love of jazz, which works it’s way into a lot of the messaging and storytelling in and around WordPress releases, but also supported the key themes and narrative of the presentation. This year the focus was on the emergent, ever evolving, open conversation between WordPress users, core developers and the larger community of plugin and theme developers pushing the platform in new directions.

Matt touched on concepts including the landscape design and architecture focused notion of desire paths, Stewart Brand’s ideas on how people adapt architecture to their needs, and Kenya Hara’s reflections on Japanese vs. Western design. To support these key ideas, in relation to WordPress, I did what I could to find visual analogues in the key slides, where the graphic elements emphasized simplicity, transformation, call-and-response, variations on a theme, point and counterpoint, and organic growth. Hopefully that comes across in some of the selections and adaptations of the visual content.

 

See More
If you want to check out the full-sized slides, there’s a gallery for that.  I’ve also made a gallery of the collected original covers used as the inspiration for the slides. Why, you might even open them in two tabs and flit back and forth between them, should the mood take you.
Edit: They’re also up on Slideshare now, too.
Feedback
I had a ball making these, albeit an espresso-fueled late night race against time kind of ball. I’d love to hear your thoughts or feedback, here or on twitter (I’m @madebypick over there).

WordPress.tv says Hello World!

I’m really quite excited to say that we’ve launched WordPress.tv, a new addition to the WordPress family focused on making it easy for people to both learn how to use WordPress (in its dot-com and dot-org flavours), and check out the presentations at the WordCamps sprouting up all over the globe. Here’s a video I put together to mark the occasion:

I’ve been a bit quiet here for some time, but behind the scenes, this is the pet project I’ve been working on, with the talented folks at Automattic (Noel Jackson rocking the house with design and implementation and some very late nights, Jane Wells helping to make things more user-focused, MT lending a watchful art-director eye, and Matt performing chief BBQ testing duties).

I joined Automattic back in August 2008, and it’s insane how fast the time has gone. But announcement videos and the hundred plus tutorials I’ve put together aside, WordPress.tv is kind of why I’m here, my raison d’etre at camp WordPress/Automattic. So this is a great day for me.

There’s a long way to go – like all WordPress projects WordPress.tv has been built with the philosophy that it’s better to get it out there and shape things up as we go than try to unleash perfection on day one. So at the moment you’ll find a whole lot of tutorials, but might not see the one you’re looking for. Ditto with WordCamp presentations.

That’s where you come in – if you have requests, ideas or know of WordCamp videos we’ve missed, screencasts or video tutorials that would feel at home on WordPress.tv, let me know via the WordPress.tv blog contact form, or even the spanking new WordPress.tv twitter account. I’ll be posting the latest releases there, too, alongside the WordPress.tv blog.

Hope to see you there – until then, enjoy the show!

WordPress Videos – What Would You Like To See Next?

As the new (and first) Lightbulb Engineer at Automattic, my job is essentially to turn people on to the cool things you can do with the platform, and to inspire those lightbulb-over-heads moments when things suddenly CLICK into place and just make sense. I’ll be trying to do that a fair bit with the help of interweb video content.

As a long-time WordPresser myself, I (hopefully) have some good ideas – but I’m hoping that you have some even better ones.

 

WordPress Users:

 

  • What bugged you or confused the hell out of you when you first started blogging with WordPress.com or on your own self-hosted WordPress blog?
  • What confuses you or doesn’t seem to quite add up even now that you’re a battle-hardened WordPress veteran with years in the field and medals across your chest?
  • Which quickfire video tutorials would you like to have seen back in the day, or would you like to send to your blogging newbie grandma or old high school chum?
  • What other cool stuff would be handy to have around or share in punchy, straight to the point video nuggets of goodness?

 

Curious Non-WordPressers

 

  • What sucks about WordPress compared to the blog or social media tools you use now?
  • What sucks about the WordPress documentation out there on the interweb to date?
  • How can I help you to get acquainted with WordPress and snuggle up with your very own blog?

 

If you can spare a minute, I’d love to hear in the comments, or you can ping your thoughts over directly to me at michaelp <at> automattic <dot> com. I promise to share the results, and some of the latest developments in Lightbulb Land very soon.

WordPress For iPhone Test Shot

I’m writing this post as a quick test of the recent iPhone app for WordPress.

This a picture I snapped of Sapporo TV tower (with the iPhone camera), which we use as our clock. We can see it out of the window, so it seemed like a waste of time to buy a wall clock.

photo

Would love to hear how you’re using the app (or why you aren’t).

WordPress 2.6 Video Mayhem

Just a quick post to say thanks for everyone spreading the word about WordPress 2.6 by means of the short screencast I put together with the good folks as WordPress HQ.

Apparently it’s already done well over 600,000 views, which is somewhat awesome. If you haven’t seen it already, or need some convincing as to why you should upgrade your self hosted WordPress install, why not hit it up here. It’ll cost you a mere 3.5 minutes of your life.