May 18

Link of the Week: Pixel Press

When you imagine a video game designer, you probably think of a person sitting in front of a computer coding instead of a kid sitting at a desk with a pencil and paper. But Pixel Press––an iOS app currently in development––wants to change that by enabling its users to draw and play their own video games. Inspired by their own experience growing up in the 80s, Pixel Press’ developers want to give anyone with an imagination the chance to create Mario-type games, unhindered by their lack of technical expertise.

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.

May 17

Design Tip: Illustrate Your Point

Illustration alone is rarely what attracts the average person to a motiongraphic. But, what’s a beautiful motiongraphic without beautiful visual design? Even motiongraphics that use great animation techniques need well-executed original illustrations in order to be appealing.

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.

May 13

EG Conference Recap

These days almost everyone has heard of the TED conference – an exciting mix of innovators, educators, designers, scientist, artists, musicians, and other extraordinary people that gather each year to give short talks on the fascinating work they are doing. Before turning into the global online phenomenon it has become, TED was hosted for many years in a small theater in the Monterey Conference Center.

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.

May 13

Case Study: Elefint’s Responsive Website Redesign

Intro

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!

May 10

Link of the Week: Philographics

How can design make philosophy easier to understand? That’s the question that designer Genis Carreras sought to answer with Philographics, a series of minimalistic designs that explain complex philosophical theories. Through the clever use of basic shapes and colors, this project distills concepts that are normally the purview of academics into simple graphics that viewers intuitively understand. (For example, a series of overlapping gray circles represents relativism and a small black circle on a white background represents absolutism.)

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

May 8

Design Tip: Make the Earth a Part of Your Mission, Not Your Logo

Organizations doing good in the world often fall into similar patterns, such as incorporating the planet into their logos. But if every socially minded organization had a similar mark, nothing unique or compelling would be communicated. This happens more than you would think; just look at all 0f the nonprofits out there using the Earth in their logos. This deludes their brands, which get lost in the sea of planet-themed logos out there. To help your brand attract attention, it’s important to create a mark that is striking, rather than clichéd. For an unmistakable logo, you need to replace the Earth with a more distinctive symbol.

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.

May 3

Link of the Week: Here is Today

Chances are you’ve heard someone say, “I’ve had a long day.” But how long is one day, in the grand scheme of things? This week, we found a website that helps answer that very question.

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.

May 1

Design Tip: When Designing for Mobile, Context Matters

Think about the last time you used your mobile device. Were you sitting at home browsing the internet? Were you typing a long email to a friend? Were you doing in-depth research?

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.

Apr 26

Link of the Week: Responsive Sound

For this week’s installment of our ongoing link of the week series, we wanted to share Garmoshka, a delightful web app that allows you to play the accordion by resizing your browser window.

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.

Apr 25

Design Tip: When Creating Motiongraphics, Start with the Story

Chances are you’ve seen this motiongraphic for the The Girl Effect campaign. Since its release in 2008, this video has garnered over a million views on YouTube and has captured the attention of major media outlets and ordinary people alike.

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.

Apr 22

Link of the Week: Design a “Cooler” Nonprofit Website

How can your nonprofit make its website seem “cooler”? This week, we took a look at Curtis Chang’s article from the Stanford Social Innovation Review blog that answers that very question by analyzing two stores: Target and Apple.

According to Chang, many nonprofits want their websites to be “cool” like Apple, but most nonprofit websites are more like Target. Because they seek to meet the needs of a diverse group of people all in one place, they don’t try to guide visitors in any particular direction. Instead, like Target, they simply present their “products” in an organized way so that visitors can find what interests them.

Though this approach has its merits, these Target-like websites just don’t have the “coolness factor” of a store like Apple, even when designers add trendy features to them. So, to go back to the original question: how can your nonprofit make its website seem “cooler”?

By making a fundamental shift in strategy.

The article examines three of Apple’s tactics for creating a “cool” customer experience: (1) encouraging people to try (not buy) their “products”; (2) targeting a specific audience to attract a broader one; and (3) personally engaging their customers. Chang argues that if nonprofits want their website to have a “cooler” image, they should emulate these tactics, rather than follow the Target approach.

We love this article, and not because it claims that nonprofit websites have to be “cool” to be successful (it doesn’t). Instead, we love it because it highlights a message that we value: design is only as good as the strategy behind it. Whether you want your website to be like Apple or to be like Target, we share this Chang’s belief that identifying your goals before starting your design is essential to success.

Click here to check out the full article on the SSIR blog.

Apr 18

Design Tip: Use Direct Labels on Infographics

As a viewer trying to interpret data on an infographic, having to switch back and forth between a legend and a chart can be a cumbersome task. And since the purpose of an infographic is to make information as easy as possible for people to understand, it doesn’t make sense to expect audiences to search and scroll for the information they need to decipher your data. To create the most user-friendly infographic possible, we recommend including labels directly where they apply, rather than having viewers fish around for a legend or a key.

Check out this Good.is infographic on America’s recycling habits as an example of direct labeling. Though the designers could have easily opted to organize their information using a key, they chose to make it easy on their audience, and placed their labels near the relevant data instead. Follow their model with your design and your team will get the most out of your infographic.

Apr 16

Design Tip: Be Concise on the Web

On the web, people don’t stick around very long if they don’t understand you. All too often, socially-minded organizations lose web viewers because they fail to explain their work in a clear and concise manner. To keep visitors attracted to your website, it’s helpful to explain the nature of your organization in a single sentence that is highly visible.

Follow the example of an organization like War Child, whose front page (shown above) puts a succinct and accessible explanation of their work front-and-center. Do this, and you’ll have no trouble keeping your viewers engaged.

Apr 4

Link of the Week: Instead App

At Elefint, we’re passionate about sharing knowledge related to how design can make the world a better place. Therefore each week we are going to post a link and a short write up about something interesting that crosses our path.

This week we took a look at instead, a mobile app that encourages people to make a difference by making simple changes to their daily routine.

Insisting that everyone can be a philanthropist, instead asks its users to substitute everyday indulgences (like buying lunch or going to the movies) with low-cost alternatives, and invites them to donate their savings to a worthy cause.

One of the most intriguing things about this app–and about the micro-philanthropy trend it represents–is that it reminds us of the enormous power our consumption choices can have. Giving up something as simple as your morning coffee, can provide others with resources they desperately need, like clean water or HIV medication. With well-designed apps like instead helping users tweak their spending habits, we believe the potential to both do good and feel good is limitless.

Learn more here or try it out for yourself. Download the iPhone app.

Apr 3

Design Tip: Keep Your Logo Simple

Since logos play an important role in shaping your brand, it’s tempting to try and cram every brand trait into your mark. But that tends to result in a logo that is a muddled mess. To create the most effective and striking mark, we’ve found it’s better to focus on one strong emotion or idea. Take the logo for the New York City non-profit Transportation Alternatives (shown above) as an example. Rather than trying to express everything that the organization does, this mark communicates one key idea — taking an alternative path — as a representation of their work. By limiting the focus of your message, your organization can create a logo that is just as compelling and creative as this one.

Mar 26

Books Matt is reading in early 2013

I’ve been reading a number of really interesting books so far this year. Well, reading isn’t exactly true, more like listening. Audiobooks are a huge time saver for me.

Here’s a snapshot of the three I have been working on in 2013.

- Matt

The Power of Habit – This is an amazing look at how we form and reform habits. This book weaves together anecdotal stories with the latest in psychological and sociological research, to produce a practical guide for how we can create, break, and modify our habits. Since so much of our life is determined by the routine actions we don’t even think about, and since will power tends to be temporary at best, this book has to power to dramatically effect your life, as it has mine.

The Signal and the Noise – Now that we have an unimaginable amount of data, we can accurately predict just about everything, right? Wrong. Nate Silver of fivethirtyeight fame examines the human essential component of predictions, finding ways to find more signal in a world of way more noise. With all the hype about big data going around, this book presents a fascinating look into what is required to find value in information overload.

To Sell is Human – To sell is human takes the position that these days we are all selling something, and that selling is an important part of being human. Teachers sell their students on the value of an education, and co-workers sell one another on the importance of an idea. Selling and non-sales selling are a vital part of our economy and daily lives, and what makes these acts of persuasion successful may surprise you.

Mar 20

Eyeo 2013

People are getting more and more excited about the beautiful ways of turning overwhelming amounts of data into digestible knowledge. The Eyeo Festival takes place this June in Minnesota, and will bring together incredibly talented designers, coders, and thinkers who are doing just this.

We’re excited to be a part this year, and to explore wonderful Minnesota! Let us know if you’ll be there.

Learn more about the festival here: http://eyeofestival.com/

Stay tuned for our event recap post event…

Mar 19

Design Tip: Creating an Element of Surprise

Learning is about discovering what’s new. When telling a story through data, find and showcase information that teaches viewers something they did not know before—insights that are often counter intuitive. The piece above for example, illustrates how even drastic cuts to important programs only scratch the surface of the U.S. debt. With all the talk in Washington on cutting these programs, many people would be surprised how little they contribute to the U.S. debt. Click here to view the full infographic.

This is part of a series of Design Tips we produced to help organizations and their in-house design teams, tell their story in a more compelling and intuitive way. We’ll be posting a new tip from time to time.

Contact us to request the printed version.

Jan 22

The Challenge of Designing for Nonprofits

Non-profit organizations are increasingly turning to the web to get their message to the world and attract donations. Those in the industry reveal the secrets for success in the sector.

Any organisation lacking a web presence in 2012 cannot succeed, and this couldn’t be truer for non-profits. So claims hjc’s design and creative manager Daniel Abercrombie: “Think about when you were last exposed to a new brand – what did you do? You searched online and found the website. For non-profits, this is essential, because brand recognition isn’t always easy.”

Websites for non-profits bring further major benefits; as Annertech’s website developer Anthony Lindsay says, “there are no opening hours, and it’s available worldwide, delivering a message, raising awareness, and offering the opportunity for fund-raising”. A successful, well-executed website brings potential for connecting with people in an efficient and affordable manner, and it can rapidly become the heart of a non-profit or charity’s communications. Technology can offer further support, from integration with social networks through to campaign management, recruitment and activism.

But while a great website can help move a cause forward, even seasoned designers may find applying existing techniques and methodologies difficult in the non-profit space.

Read the Full Article

Jan 17

Sum Up Your Charity’s Work in One Simple Tag Line

Some nonprofits are able to articulate what they are and what they do quickly and clearly.

Amnesty International, for example, has a simple and concise tag line that is front and center on all of its communications: exposing and preventing human-rights abuses.

It’s easy to understand what Amnesty International is and what it does. But all too often, nonprofits—and even big businesses—make the mistake of failing to have an effective tag line.

Attention spans are short, and you have only a few fleeting moments to grab the attention of someone who is visiting your Web site, reading your appeal letter, or meeting you in person.

Often the ability to explain what you do starts with something basic, like a mission statement. But the tag line needs to be much more concise.

Even major corporations sometimes fail to formulate a clear expression of their identity. Read the response given by Hewlett-Packard chief executive Meg Whitman to Kai Ryssdal, host of the American Public Media radio show Marketplace, when asked to describe her company in five words or fewer:

HP is the largest information technology company in the world that provides hardware, software, and services to organizations of all sizes and has a big consumer business as well. What we do is we try to provide enterprise needs better than anyone else and deliver the hardware and software and services that those enterprises need. And put together a series of devices that customers want as well for their printing and personal systems needs.

Read the Full Article
Published on our blog, Redesigning Good

Dec 3

Why the Right Font Matters

Typography is one of the most important elements of design.

The right typeface can add the perfect look and feel to your Web site, appeal letter, or annual report. But until recently designers were constrained by a very limited choice of fonts that could be used online.  As a result, most designers relied on standard Web fonts like Arial and Verdana.

But with some exciting changes in technology, nonprofits now have more options than ever before when they’re choosing fonts for their Web sites and online communications.

New online resources such as Typekit, Google Web Fonts, and @Font-Face have changed Web design by offering hundreds of great fonts that render correctly on any Web browser. That change makes it easier for a nonprofit to find Web-compatible fonts that can help define its image.

Below are three examples of Web sites that are taking advantage of these options to make good use of typography. To show just how important typography is to each design, I have accompanied screen shots of the real size with an image of what the page would look like if the designer had chosen a different font.

Take a look at some of these sites we re-purposed with new typefaces.
Published on our blog, Redesigning Good

Aug 1

SSI: Design and Good Causes

Check out our two latest posts in the Stanford Social Innovation Review about why design matters:

Why Good Causes Need Great Design

How do Good Causes Achieve Great Design?