Cloud Four Blog

Technical notes, War stories and anecdotes

Why Mobile First Design Works

Spending the last few days in New York City for Smashing Conference reminded me of an analogy for Mobile First Design that seems to resonate with people.

If you’ve made your life fit in a tiny New York apartment, you’ll have no trouble when you move to a house in the suburbs.

But going the other way, from a house full of stuff to a tiny apartment, is much more difficult.

Designing for small screens works the same way.

Mood Boards (Neither Bored Nor Moody)

Our team had a set of defining characteristics and was almost ready to start redesigning cloudfour.com. But before we dived into element collages (more on that in a future post), we wanted to draw from a shared well of design inspiration. So we decided to make a mood board.

A mood board is a collage of reference imagery from the outside world with some relevance to the project in question. It can include examples of typography, colors, illustrations, photography or other stylistic elements. Traditionally, you’d assemble one from magazine clippings or whatever else you didn’t mind cutting up and gluing to foam core.

Photo of traditional mood board exercise in progress circa 2009

We decided against the cut-and-paste method for a couple of reasons:

  • Most of the team’s favorite sources of inspiration are easier to assemble digitally than in physical form. One could argue that the value of a mood board exercise is in exploring sources outside one’s typical frame of reference, but for this project it felt like a poor fit.
  • By this point, our team was engaged in parallel projects that made scheduling a day-long, in-person exercise difficult to coordinate.

Digital mood boards are nothing new, and there are plenty of tools to choose from (InVision’s being particularly impressive). We decided to use Pinterest, simply because most of our team was already using it.

Over the next few days, we assembled 79 pins into the cloudfour.com mood board:

Screenshot of our Pinterest mood board

Although our team members contributed independently, the overall tone of the board is fairly cohesive (possibly owing to our earlier characteristics exercise). This gave us the inspirational mind-meld we needed for the next design phase.

Shared Visions and Sticky Notes

When we started redesigning cloudfour.com, I knew I wanted the entire team to feel a sense of ownership in the end result. To establish an inclusive design direction without designing a camel, we had to distill the collective input of every team member into one guiding vision… a singular “us.”

Fortunately for us, few problems in the universe cannot be solved by getting in a room and writing things on sticky notes.

After broadly discussing our hopes and dreams for the redesign, we jotted down words on stickies that described how we wanted Cloud Four to feel.

Each of us presented and clustered these notes on the whiteboard, grouping those that seemed thematically related.

Collage of sticky note exercise photos

Then, we agreed on informal titles for each cluster. These became (in no particular order):

  • Leadership
  • Academic
  • Open
  • Ahead
  • Craft
  • Integrity
  • Cheerful
  • Web ❤
  • Responsive
  • You
  • Boutique
  • Portland

We managed to swiftly condense 93 sticky notes from nine team members into twelve tidy descriptors. I call that a successful exercise!

These directly informed our mood boards… but that’s a story for another post!

Redesigning Cloud Four in the Open

We finally have the time to give our perpetual back-burner project the attention it deserves. And we decided we wanted to try something different this time.

We’re going to redesign Cloudfour.com in the open!

We’ve never done something like this before. Consider it a grand experiment.

We started the design a while ago before client needs overwhelmed us. We created mood boards and element collages. We even started a pattern library and plan on open sourcing the tool we’re using to build it.

Sample element collage from our redesign

Over the coming days, we’ll share with you what we’re working on and our thinking behind it.

In the meantime, if you want to follow along, you can join our public redesign Slack channel, read archives of that same Slack channel, and check out our in-progress pattern library.

We’re looking forward to sharing our progress with you and getting your feedback along the way.