We loved the idea of this app, not just because it looks like fun, but also because of the unique way it engages its users. By eliminating the barriers to designing videogames, Pixel Press encourages people to embrace their creative side and to truly take ownership of the games they play.

Check out Pixel Press on Kickstarter.

Take this motiongraphic, created for the Gates Foundation, as an example. When watching it, you are much more likely to notice its snappy animation than its illustrations. But, without a solid base of beautiful visual design, the animation in this motiongraphic wouldn’t be nearly as captivating and the piece as a whole would suffer.

Beautiful visual design is the backbone of a beautiful motiongraphic. And, as the example above shows, designing a great motiongraphic is a process that requires different skill sets. To create a motiongraphic that’s as stunning as this one, make sure that your team has all the essential talents––including a great illustrator.

Last month, I had the chance to attend EG, a conference started by TED’s founders that is held in the same spot in Monterey where TED used to be.  While many conferences bring together experts on a specific subject, EG thrives on an eclectic mix of architects, art forgers, actors, scientists, explorers, filmmakers, academics, iconoclasts, musicians, and a collection of other inspirational figures. The intimate environment (250 people or so) allows for real connections to form with speakers and fellow attendees alike, while the content provides juicy material to spark lively interactions.

Gatherings like EG are increasingly becoming one of my favorite ways to connect with like-minded people, while forging new interdisciplinary relationships that encourage innovation and never fail to inject a burst of inspiration into my personal and professional lives.  I left each session of EG with a big new idea for my life and/or business, and met some incredible people who i now consider friends.

If the only conferences you’ve ever been to are little more than an excuse to escape the office while getting drunk on the company’s dollar, I highly recommend looking into gatherings like EG, which are an amazing blend of knowledge and inspiration, shared with people you will want to connect with on a much deeper level than their networking value.  In a world that seems more and more focused on constant innovation and endless learning, gatherings like EG are a great fit.

Elefint recently underwent a responsive website redesign.  This turned out to be a challenging and confusing process, and finding resources to guide us through it wasn’t easy.  A lot of the information we used to guide us was contradictory or incomplete, and we figured there must be a lot of people equally perplexed.  With this in mind, we put together this history of our process with the hope that it would be useful to other designers and organizations venturing into the world of responsive design.

Review of responsive web design

Let’s start with a quick review of responsive design.  With the multitude of devices that exist today ranging in size from big screen televisions to mobile phones, it’s not practical to design a site for each of these experiences.  We say experiences rather than devices to highlight the fact that we tend to use the internet differently on a tablet than on a TV.  The differences between these devices are not just sizes but the types of things we prefer and are likely to do on them, such as opening a new account (better on desktop) or quickly checking for updates (convenient on mobile).  With people accessing the internet more and more from these devices each year, investing in a responsive site is an important consideration for any redesign.

Our process

We began our redesign by listing the needs different users were likely to have on each platform.  On a white board we created four columns, one for each device type: mobile, tablet, desktop, and TV.  We started with desktop and then added and subtracted features based on each device.  For example, we had hover states that explained each of our services on desktop.  Since there is no hover state capability on tablet and mobile, we removed this feature for those devices. We did things like moving the navigation from the top of the screen on desktop to a dropdown on mobile, a style that has become common as it is much easier to use on mobile and takes up less space.

Iteration

An important lesson we learned is to design iteratively.  We chose to go one page at a time for each device, designing for example the home page on each device before moving on to the next page.  This turned out to be a good strategy as we caught systemic issues before we had created a large number of designs.  One of the early adjustments we made was to mostly drop tablet and TV from our process.  We found that for our particular site, the added value of designing for these formats was not worth the added effort.  All we really needed to do was to design a slightly different header for tablet.

A big point of confusion for us was around how much we needed to design to give the development team everything they would need.  This was one of the points where conflicting information was available in abundance.  Even when designing just for mobile and desktop, creating modified layouts for each format is a lot of work, so we didn’t want to do anything more than we needed to.  At the same time, we wanted to maintain the integrity of our design, and didn’t want to leave our developers with too much guesswork.

Retina, DPI, PPI

To complicate matters even more, we decided to include Retina images (those formatted for high definition screens like Apple’s Retina display).  After a fair amount of research a friend of ours directed us to retina.js, a javascript tool that automatically converts images to the appropriate format.  Using this tool, we simply needed to create one image for all resolutions.  These images are the same resolution as standard definition screens, but are twice as wide and twice as high.  Retina.js then shrinks the images to the size we want them, and they therefore show up as much denser higher quality images.  If a non-retina screen is detected, a standard resolution image is substituted automatically.  Side note: if you are looking in the same places as us, you may find long and confusing discussions about the difference between DPI and PPI.  We spent a long time trying to understand the deep dark mysteries of web resolution, only to find out that it didn’t really matter.

Breakpoints, Viewports

One of the most fun parts of designing a responsive site is wasting tons of time grabbing the lower right corner of your browser and resizing it to see how the site responds.  This is especially great at breakpoints, the dimensions of the site where the appearance of the site jumps from one device type to the next.  Figuring out exactly where these breakpoints should be can also be pretty confusing.  Not only are there multiple mobile and tablet sizes, but the physical dimensions of the screens aren’t what matter.  Viewports tell the device how to treat the site, and those are what you have to watch out for.  For example take a look at a responsive site on an iPad and an iPad mini.  You will see that even though the devices are very different in size, the page will display the same.  Thats because Apple has made the viewports the same, essentially telling browsers to act as if the devices were the same size.  If you and your friends own every Apple and Android device known to man, you can play around with these different viewports and see how they react.  If you don’t have access to all these toys, or if you just want to save time, you should be fine designing for common breakpoints – 320px (mobile), 768px (tablet), and 1024px (desktop).  This is another place where iteration is key.  If you have in house developers and/or can afford to test things as you go along, play with the breakpoints and make sure they work for your content.

Our Advice

Designing a responsive site can be pretty overwhelming.  Like most things on the web, this process is bound to get easier as more and more people design this way, and more and more tools are created to aid designers and developers. Until that day, here are a few suggestions:

• Don’t let the perfect be the enemy of the realistic.  Just start designing even if you don’t understand all the dynamics, and you will figure it out as you go.  Responsive design is complicated, especially when you introduce things like Retina images.  There are many ideal practices that may not be in-line with your budget and/or timeline, such as designing for many device types or building breakpoints around content, so do what you can.
• Bring as many members of the team together as early as possible.  If everyone from the strategist to the developers can weigh in early, the process will go much smoother.
• This can take a long time, especially the first time around.  Proceed in bite-sized but consistent chunks, and you will get there eventually.  Busy with client work, we took about six months to finish our site.

Resources

Here are some resources that we found really useful in our redesign:

• http://ami.responsivedesign.is/ (didn’t actually use this one, but I think it’s cool. You can plug in any url and see how your site will look on different devices. I put in our old site when it was still up and then our new site when it was done, and the difference was awesome. Should have taken a screenshot!
• http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/ I found this article really helpful when we were redesigning. One of the few articles out there that talked about the design side and not just coding.
• http://bradfrostweb.com/blog/web/responsive-nav-patterns/ This guy’s list of responsive navigation patterns was supremely helpful when tackling that particular part of our site.
• http://mobilewebbestpractices.com/ A collection of best practices that I often referred to. Also, a beautiful example of a responsive site!

Carreras’ Philographics illustrate how design can be used to communicate complex information in a way that is easy for people to grasp. And, for that reason, they are nothing short of brilliant.

Check out the full set of Philographics on Carreras’ website

Take the logo for WWF (the World Wildlife Fund) for example. By refraining from including the planet in their logo–even when a large part of their mission is to conserve the earth–WWF was able to came up with one of the most recognizable non-profit brands in existence: their trademark panda. Follow their example, and think about how you can innovate to help your logo stand out from the crowd.

Here is Today is an interactive timeline that allows you to see today in relation to this year, this century, this millenium, the ages of the earth and the universe, and other temporal milestones. Like any good design, it takes a potentially difficult task––looking at today from a historical perspective––and uses visuals to make it easier. Through its ingenious visualization, Here is Today gives us a fresh way of thinking about our days––and about time in general.

Most of us would answer these questions with a “no.”

Mobile devices aren’t just smaller––they’re different. That’s why, when designing for a mobile device, it’s important to think carefully about what people will and won’t be doing on it.

Take GoodGuide for example, a website with a corresponding mobile app that connects people with ratings of consumer products based on their health, environmental, and social impact. The GoodGuide mobile app isn’t just a miniature version of their website; it provides an entirely kind of different user experience. Designed for on-the-go shopper, the app allows users to scan barcodes and instantly receive product ratings and information as they shop. It takes into consideration both the unique potential of the mobile platform and the environment in which people are likely to use the app. In this way, the GoodGuide mobile app shows us that, in mobile design, context matters.

We loved this design not only because of its ingenuity (using responsive design for sound!) but also because of the way it engages users. Rather than providing instructions, the app makes viewers think outside of the box (or the browser, in this case) to figure out how it works. In this way, Garmoshka isn’t just playful and creative, it actually inspires playfulness and creativity in anyone who encounters it. And we think that’s the mark of truly great interactive design.

But why exactly does this motiongraphic captivate audiences? What makes it so appealing?

A great motiongraphic designer understands that the medium is only as good as the content, and behind the most engaging motiongraphics are compelling stories. The Girl Effect video is no exception. It has a well-written script that guides viewers through the campaign’s message using a simple, yet powerful narrative––a girl living in poverty can change the world if only given the chance.

To create a motiongraphic that stands out like the Girl Effect video, you need to tell a good story. Write a script far before the design process begins, so that you fully understand what you’re trying to say before you say it. Start with the story, and your work will attract the attention it deserves.