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

WordCamp Yokohama 2010

I’m presenting at WordCamp Yokohama today, along with a bunch of much smarter people (including fellow Automatticians Naoko and Isaac). There’s a really good crowd gathered, and it’s amazing to see the WordPress community getting stronger and stronger out here in Japan.

All of the presentations are being streamed live on Ustream.tv, so you can see them there if you’d like (or catch the recorded versions later). I should think we’ll also be adding presentation videos to WordPress.tv in the coming weeks.

I’ve also put up some additional resources from my presentation on Assaulting Indifference, which focuses mainly on using design thinking, storytelling and visual communication as tools to grab interest and attention for your blog, business, or whatever else you’re putting out into the world.

You can check out links for content and creators discussed in the presentation, along with a slideshow and gallery of the slide designs here. As always, your feedback is very welcome.

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!

2.7 Coltrane across the board

After a lot of hard work and some late nights, 2.7 and it’s WordPress.com sibling are now live and in use across the WordPress community.

I’ve been using 2.7 in it’s various builds for quite a while now, and assure you that if the huge change in UI initially shocks or confounds you, it won’t for long. Having been going back and forth to 2.6 for a few weeks, it gradually became harder and harder to give up the easy navigation, mighty pretty looks and new features that 2.7 has ushered in. Luckily, I won’t need to do that any more.

Thanks to the WordPress community, awesome developers and the good folks of Automattic (who really are an awesome bunch of people), it’s turned out to be a real beauty IMHO.

Hope you enjoy. Here’s the video I put together for the .org release. Most of what you see here applies to .com, but for the plugins and upgrades stuff.

For a full breakdown on what’s new check out Jane’s .com post, or Matt’s .org version.

Now, back to the zillion video tutorials you’ll be seeing around the place very, very soon :)

WordCamp Tokyo 2008

I returned from Tokyo yesterday after attending (and speaking at) the very first WordCamp in Japan, WordCamp Tokyo 2008. The event was booked out within a day of being announced, and I had the chance to meet a great cross section of Japanese bloggers, developers, business people and the awesome folks behind WordPress localization for Japan.

 

WordCamp Tokyo 2008 - Calm before the storm

WordCamp Tokyo 2008 - Calm before the storm

 

 

The event was smack in the middle of Tokyo’s Shibuya (this pic from my hotel room across the way):

 

Shibuya crossing, taken from my hotel window

Shibuya crossing, taken from my hotel window

 

 

In addition to some great presentations, on everything from Firefox + WordPress, to WordPress MU case studies, to the Sandbox theme, it was a really interesting opportunity to see the “state of the Word” Japan-side. I can’t thank the localization team enough for putting the event together, and I’m looking forward to the next meetup.

 

Naoko speaking at the after party

Naoko speaking at the after party

 

 

I particularly enjoyed speaking to the nice range of hardcore WordPress users in attendance – it was amazing to see the variety of applications people are finding for WordPress in Japan. These ranged from representatives of larger businesses (Adobe, Firefox, Paperboy & co. to name but three) through to web developers, students and freelancers. We had some food and drinks after the main event, and I was bowled over by the friendly atmosphere and hi-octane exchange of business cards.

 

Folks get stuck into the food and beer

Folks get stuck into the food and beer

 

 

This also gave me an excellent opportunity to gather feedback, ideas, criticisms and requests from Japanese WordPress users, which I’m now compiling and hope to share here, soon.

 

Japanese WordPress (& Firefox) books

Japanese WordPress (& Firefox) books

 

 

Thanks to everyone that made it, and particularly to Naoko McCracken & the localization team for making it happen! And thanks so much to the very kind Honda-San and Morita-San who walked me right to the door of my hotel (my Tokyo navigation skills aren’t what they were since I moved to Sapporo).

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.

Screengrabs ala iPhone

I’m not sure if this is common knowledge or not, but I picked up a cool iPhone tip the other day from I forget where.

If you want to grab screenshots of anything on your iPhone, like stuff you’re browsing in safari or in one of the flickr apps, hold down the sleep/power button and press the home button twice.

The screen flashes and the image is saved to your library – ready for you to insert into your WordPress for iPhone post like this:

photo

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.