Nacin Recaps WordPress 3.9

WordPress 3.9 “Smith” released today

WordPress 3.9 “Smith” was launched this afternoon. It’s the fifth release I’ve contributed to. The cycle focused a lot on improving the content and media editing experience within the WordPress admin, along with adding a redesigned theme browser for installing new themes, and a new way to add widgets to your site via the Customizer. (Post Status has a nice recap of the user-facing features) It was an incredibly feature-rich release that I’ve personally been looking forward to for a while.

Along with 266 other contributors this cycle, I:

  • Worked on refining the design of the playlist settings panel
  • Helped Gregory Cornelius and Andrew Ozz with the UI and UX around the various gallery and image editing improvements
  • Helped redesign a lot of the various TinyMCE modals along with Janneke Van Dorpe and Andrew Ozz
  • Along with Ben Dunkle, added a ton of new icons to Dashicons, the WordPress admin icon font, including an entire suite of of media icons to replace the old “crystal” icon set
  • Designed the 3.9 “About” page along with Kelly Dwan
  • Designed the 3.9 release post on WordPress.org

You can see all of the new icons we’ve added to Dashicons during this release, and check out the 3.9 release post here.

Thanks to all of the contributors this cycle, especially the release leads Andrew Nacin and Mike Schroder, and feature developers Andrew Ozz, Gregory Cornelius, and Scott Taylor. 3.9 was a good one. :)

I finally got the new Facebook update

A familiar notification ping summoned me over to Facebook. Hark! You’ve received a comment on your status update! When I clicked in to see what the new comment said, I was hit by the new Facebook design. Since then, I’ve had a couple hours to sit around with it in the background. Here are some of my initial thoughts:

  • The top nav/masterbar feels much nicer in this iteration. Already, I feel like I’ve done less hunting for the right thing to click.
  • Everything feels just a little tight. I don’t mind things being a little smaller, and I totally understand why Facebook took the approach they did, but I find myself longing for a bit more space between and inside of updates on my news feed, even at the expense of taller updates. Even just jumping from 12px to 15px inside of each update feels like a world of difference.
  • Same goes for the text itself — the line-height feels a little too short, so everything feels cramped.
  • I’ve wanted to be able to minimize groupings in my left sidebar for the last couple iterations; now that everything is just a little tighter, I really want to be able to now. Something like this:

    facebook-collapsed-sidebar

    Collapsed sidebar. Only while mocking this up did I discover that I can actually archive the plethora of lists I’m shown by default… but archiving doesn’t seem to actually do anything?

All this said… I am one of those people using a high-end computer with a beautiful retina screen. I’ve been spoiled by large, crisp images and text. A lot of the cramped issues could look better on an average laptop, or a smaller screen. A better test would be to give it a go on my Chromebook and see how it feels in that context. Maybe I’ll check it out when I get home later.

I don’t find the new Facebook update too bad. And, like all changes, I will adjust. Kudos to Facebook for putting the bulk of their users first, and not just going for the design that looked best on a retina Macbook Pro.

New England GiveCamp 2014 Recap

This past weekend, I attended New England GiveCamp. The goal is to spend a weekend helping out a local organization or non-profit somehow with their web presence. This could mean redesigning an outdated website, or helping them build a new site or app.

mfcs-logo

The camp went from 6pm Friday to 5pm Sunday. Over the weekend, my team and I spent about 24 hours total on our project, Mill Falls Charter School. We were comprised of:

  • Meryl Levin, the founding board chair at Mill Falls
  • Rachel Morris, our project manager
  • Kelly Dwan, our developer
  • …and myself!

I ended up on the Mill Falls project by chance — the original project I had been assigned to was unable to make it, so my team got split up and put onto other projects. (This worked out well for the Mill Falls team, whose original designer was also unable to attend.)

Once my group snafu got figured out, Kelly started making updates to the Mill Falls WordPress install (it was running WordPress 3.1 — ouch!), and started removing unused plugins. I huddled up with Meryl and Rachel to go through the project goals, and then on the site’s information architecture. The current site was a little complicated — there were some pages that could be condensed and combined, as well as restructured into more specific top-level categories.

We whiteboarded out all of the pages

We whiteboarded out all of the pages together

After deciding on an updated site architecture, we discussed what we thought some of the most important elements were, so we could highlight them on her homepage. I finished up the night wireframing out a basic homepage and interior layout at desktop and mobile sizes as the rest of my team got together and talked about some of the more technical bits. We touched on the site aesthetics at the end of the night, and then at around midnight, we wrapped up and Kelly and I headed home.

The second day dawned rainy and cold — the perfect kind of day to spend inside, designing and coding. I jumped straight into designing, mocking up the homepage and interior design in Photoshop. It’s been over a year since the last time I worked on a client site, and it was fun to slip back into familiar patterns.

Meryl was interested in keeping the existing look and feel of their site, but growing upon and modernizing it. Their existing site already looked pretty good, so I had a really solid base to work off of. One of my favorite features were some really charming slides in a carousel on the homepage. However, since you probably shouldn’t use a carousel, I decided to take out all of the slides and highlight them on each primary page. While I originally intended for Meryl to eventually replace them with photography, the slides grew on me more and more throughout the weekend.

Since the site was also pretty navigation-heavy, despite our re-architecting, I decided to give each sections its own on-page submenu, instead of just relying on the menu’s dropdown. This would give site visitors a better sense of where they were. I drew in colors from the slides, which already formed a really lovely color palette.

MFCS-colors

I finished mocking up my pages in the early afternoon and had a check-in with Meryl via Google Hangout, since she was unable to drive down to Boston that day. She was super enthusiastic, and provided some great feedback as we went through the designs. I ended up with very few elements to change. After making some minor adjustments, I handed off the mockups to Kelly to start implementing.

Mill Falls Charter School   bringing Montessori public

While Kelly started coding out the designs, I worked on restructuring the current site’s menus and pages to match the IA we had discussed the previous night. The rest of the day was focused on structure and development. Later that evening, when it started to get into crunch time, I helped out Kelly with some minor theming bits like styling forms and the interior sidebar. We wrapped up at 11 with an almost entirely complete theme.

The rest of today was spent wrapping up. We activated the theme on the live site and made some minor adjustments to the content, including setting the featured image and header background color for each page, depending on the image. We walked Meryl through the site and its various features, and had the pleasure of introducing her to the (somewhat new) WordPress media modal, Jetpack galleries, and the new admin color schemes.

We also put together a style guide so she would have quick and easy access the colors we used, and a visual guide to the different text and header stylings, using Mark Jaquith’s WP Help plugin. Kelly wrote up some additional documentation around widgets, menus, installed plugins, and changing the featured images and their background colors.

We ended up pushing right up to the presentations at the end of the day. All told, we spent 24 hours over the weekend working on the site. I’m incredibly happy with the site we produced, and it was really great being able to help. Working with Meryl, Rachel, and Kelly was a real pleasure. Their professionalism, enthusiasm, and and knowledge really helped shape this project into something special. I had a really great weekend.

Thanks for the fun, New England GiveCamp!

Reflections on An Event Apart: Seattle

This week, I attended An Event Apart Seattle with a handful of coworkers. It was the first time I had seen any of these particular coworkers since October (and in the case of one coworker, it was the first time I had met her). Getting a couple days to hang out in a conference setting with my coworkers was amazing. I’m constantly reminded of how passionate, talented, and dedicated they are. I get pumped just thinking about hanging out with them, and I can’t wait to get together with my team in New Orleans in a couple weeks.

AEA:S itself was fantastic — from a learning and development standpoint, it was definitely the best web conference I’ve ever attended. I learned something new at every talk. The speakers were smart, funny, and engaging. I got to see one of my own personal design heroes, Mike Monteiro, speak live for the first time. I can’t wait for my next chance to attend AEA.

I’m also incredibly grateful to work for a company that will let me take a few days to meet up with my coworkers and learn from some of the best and brightest minds in the industry. I love my job, and I love what I do, and I’m really excited to come back, full of energy and enthusiasm for what I’m working on.

Thanks for a good week, AEA.

The Laura Beckman story

I was reading an article on Marissa Mayer and this particular section kind of struck a chord with me, as it perfectly describes why I applied to Automattic:

When people ask Mayer why she joined Google after getting her masters in symbolic systems at Stanford, she likes to tell them her “Laura Beckman story.” It’s about the daughter of her middle school piano teacher, Joanne Beckman.

Mayer begins: “Laura tried out for the volleyball team her junior year at high school. At the end of the tryouts, she was given a hard choice: bench on varsity, or start on JV.

“Most people, when they’re faced with this choice, would choose to play – and they’ll pick JV. Laura did the opposite. She chose varsity, and she benched the whole season.

“But then an amazing thing happened. Senior year she tried out and she made varsity as a starter, and all the JV starters from the previous year benched their whole senior year.

“I remember asking her: ‘How did you know to choose varsity?’

“And she said, ‘I just knew that if I got to practice with the better players every day, I would become a much better player, even if I didn’t get to play in any of the games.’”

The moral of Mayer’s story is that it’s always better to surround yourself with the best people so that they will challenge you and you will grow.

“My quest to find, and be surrounded by, smart people is what brought me to Google,” she says.

The Truth About Marissa Mayer: An Unauthorized Biography

A Game of Themes

A couple weeks ago, I decided it would be a fun design exercise to explore a series of themes based around houses from A Song of Ice and Fire by George R.R. Martin. It comprised of three parts: creating a look & feel for each house, designing a base template to skin, and then applying that look and feel to the base theme.

I started by throwing together some style tiles for each house, looking to explore colors, texture and typography:

Next, I explored some potential layouts:

The first layout felt a little too corporate and the second one felt a little too complex, so I ended up going with the last layout, which I thought would fit the multiple skins best. Here’s the skins applied to that theme layout:

House Stark

got-mockup-stark

Built on shades of grey with a desaturated blue accent, Winter is like the Starks: dark, cold, and stoic. Winter features Titillium, a thick sans-serif to ward off the impending cold, and Crimson Text, a serif as sharp as Valyrian steel.

House Lannister

got-mockup-lannister

House Lannister drips danger, arrogance and power. Pride featurs rich crimsons and indulgent golds that hint at wealth. Domine is an enchanting and seductive header font, which is paired with the warmth ofSource Sans Pro.

House Targaryan

got-mockup-targaryan

House Targaryan is the biggest challenge, because while “fire and blood” evokes crimson and black, Daenerys herself is hot and white like the desert sun. She is sand and stone yet as soothing as an oasis. I decided to represent Daenerys with rich browns, tans, and blues. Queen uses Gentium Basic reflects her royal roots, while Cantarell hides danger behind grace and poise.

I don’t see these mockups going much further than this, but it was overall a pretty fun experiment.

Simplicity through thoughtful reduction

In The Laws of Simplicity John Maeda posits, “The simplest way to achieve simplicity is through thoughtful reduction. When in doubt, just remove. But be careful of what you remove.” The final warning is important. Removing things often leads to simplicity merely because the user has fewer items to process. But removing visual cues that help the user mentally process the interface — such as graphical elements that group items, that differentiate buttons and labels and that make things stand out — could do exactly the opposite by giving the user more work to do. So, rather than guide the design by style, guide it by principle.

~ Dmitry Fadeyev, Authentic Design