SSI: Design and Good Causes
Check out our two latest posts in the Stanford Social Innovation Review about why design matters:
Check out our two latest posts in the Stanford Social Innovation Review about why design matters:
By John Hanawalt, Senior Visual Designer
A new year is upon us, and with it expectations that we’ll put some effort into becoming better versions of our—already pretty decent—selves. I’m not one for resolutions— I stopped promising to exercise and read more years ago—but if I could suggest one New Year’s resolution for designers it would be this:
Design something good.
I don’t mean design something well. You’re doing a bang up job of that already. I mean design something that makes the world slightly better than it was before you designed it.
Design has the ability to inform, inspire, and affect change; and if you don’t believe that, pack up your things and call it a day. At Webstock ‘13, Mike Monteiro made a pretty compelling argument that designers destroyed the world. Make your 2014 resolution to help put it back together.
The world is a big place with big problems, but you can start small. Instead of spending your time on another Dribbble redesign of the iOS7 icons, design something in support of a cause that matters to you. Consider offering discounted rates to nonprofit clients. Or if you have the resources, maybe even do a little pro-bono work.
You may even find that collaborating with people tackling issues like homelessness, health care inequity, and civil rights changes the way you approach other design problems.
What other design-related resolutions are you making this year?
By Matthew Scharpnick, Cofounder & Chief Strategy Officer
Every year brilliant innovators and leaders from a variety of disciplines descend on the beautiful town of Camden, Maine, just in time for the leaves to change. They arrive from around the world for PopTech, an event that brings together fascinating artists, musicians, doctors, entrepreneurs, academics, athletes, and so on, to spend an intimate few days together sharing ideas and inspiration. I was fortunate enough to attend for the last two years, and enjoyed nearly every part of it, both on and off stage.
PopTech does a great job of curating a cadre of presenters that build on one another’s work in fascinating ways. While none of the presenters were anything less than interesting, some stand out as needing special mention. I encourage everyone to check out the videos that PopTech posts – the first two on Rodney Mullen and Jim Olson were 2013 highlights – as well as the content they put out throughout the year. With that said, here are just a few of the fascinating people you may want to learn more about.
One of the all-time greatest professional skateboarders, with a lot of life wisdom to share.
Hearing about his work using scorpion venom to make tumors glow was a PopTech highlight.
Her work with Artichoke in the UK brings wonder to cities in a big way.
As a Harvard professor, she is doing fascinating work approaching mindfulness in innovative ways.
His work capturing movement and stillness in a subway platform is mesmerizing.
Switching instruments and languages effortlessly, she was an amazing complement to the intellectual inspiration.
With a couple of friends, they opened a school teaching ways to access the beauty and potential of technology.
Sometimes simple design solutions have the potential to affect millions of lives. Last month we finished a project to redesign vaccination records. These simple documents carry vital information for hundreds of millions of children around the world, so the Gates Foundation held a contest to improve the design in order to make them more effective. Key objectives included making the forms durable, easy to use, and ready for the digital transition that will inevitably determine how the data in these records is collected and stored.
Our team started by considering one of the biggest challenges to these records – which is a classic User Experience (UX) challenge, getting the right information in the hands of the right people and clearing out everything else. The two main groups that use these records are parents and health workers, and each has slightly different objectives. While health workers need to see a detailed history of vaccinations and other key health indicators, parents simply need to record development milestones and know when their next appointment is.Taking this all into consideration we developed the card below.
Our main organizing principle led us to create a two sided document that has parental information on one side, and health worker content on the other. We kept the card the same familiar yellow of traditional vaccination cards, a characteristic that has distinguished this document and emphasized its importance. We used an illustration style that can translate easily into a number of languages and will work for illiterate parents, and suggested printing on Tyvek to ensure a low cost way of achieving durability.
Now we wait and see if our ideas impressed the team at Gates, and if so, hopefully we will have contributed to something that has the potential to improve preventative care and treatment for hundreds of millions of children around the world.
Our Desgn.it series – pairing good causes and great designers – heads to Tahoe!
Applications are now open for Desgn.it Tahoe
Event dates: February 28 – March 2, 2014
We have changed our format from previous years and are looking for two good causes in need of significant level of professional design. Elefint will match the selected organizations with a team of six senior level designers/developers who will work with them for a day and a half, while getting educated on a variety of strategic design and communication challenges (and having fun in Lake Tahoe). In contrast to previous years where we did half-day events for 10 organizations, Desgn.it Tahoe will focus on moving the needle in a significant way for two select organizations.
The ideal partners for this event will be good causes who understand the value of design, but who are lacking the resources to execute on its potential in a meaningful way.
Interested organizations should read the full description below and submit a response to email@example.com with the subject “Desgn.it Organizations” no later than 5pm PST on Monday December 16th.
In your application, please include the following:
1) Short description on the purpose and work of your organization
2) How Desgn.it Tahoe could help you achieve specific organizational goals
3) What specific design deliverables (i.e. Print report, branding + identity, mobile app) you need to help reach these goals
4) Names and designations of the 2 team members who will be representing your organization in Tahoe
Requirements: Please only apply if your organization has the funds to participate, is available for pre-event work, and can send two senior level representatives as outlined in more detail below.
Desgn.it History and Desgn.it Tahoe!
We founded Elefint Designs on the principal that good causes deserve great design. While we work to achieve that goal each day with our clients, we have always made efforts to reach out to a larger audience through articles, conferences, and events. The first Desgn.it event happened in 2011 when we paired 25 talented designers with 10 good causes. The event exceeded our expectations, and was successful a second time when we held Desgn.it 2013 earlier this year.
View our video from the original Desgn.it
While the previous two events felt wonderful and let us meet an incredible group of people, Elefint decided that we wanted to try a new format that would focus on a much deeper engagement with just a couple of organizations. To make this work we decided we would need some more rigorous prep work, teams of 6 (as opposed to 2-3), and a lot more time. A weekend in Tahoe seemed like the perfect fit.
While Desgn.it was always free in the past, we decided that a small investment from the participating organizations could allow us to deliver more than ten times the value. While past Desgn.it events could deliver a simple project, such as a logo, basic infographic, or homepage, we can only imagine the suite of materials that could be produced by a team twice the size with a weekend of design time. Additionally, the smaller total number of designers makes it easier for us to deliver a team that is composed of more senior members.
Who Should Apply
Elefint is seeking two good causes that could benefit from maximum leverage of their design dollars. Each organization will need to invest $4000 to cover the cost of food, housing, a ski lift ticket, and other small expenses. We estimate that this should produce close to $20,000-$25,000 worth of design for each organization. We are looking for organizations who can send senior staff to the entire event, ideally two members, typically the CEO/ED and Director of Marketing or equivalent role. Attendees will need to make themselves available to Elefint for approximately 2-3 hours in advance of the event for pro-bono strategy preparation. Ideal candidates are nonprofits who understand the value of design but have limited financial resources to dedicate to it.
In addition to carving out design-time, we will host a series of workshops to deepen your understanding of a variety of design related topics. The relationships formed during this event are deeply important, and with this longer format, the opportunity to connect in meaningful ways increases dramatically. More info on workshops will be posted soon!
The goal of the event is to produce a series of integrated materials that are likely to increase the brand value and effectiveness of the participating organizations. While no guarantees can be made about the value delivered, the successes in our previous shorter events suggest that Desgn.it Tahoe will be a major step forward for the selected organizations.
Elefint has some ideas brewing, and we’re looking forward to sharing them at SXSW14 BUT we need your support. Our topics are interesting and thought provoking, and one is even experiential. We promise our speakers are only the best and brightest elefints around. Read on to vote for the one(s) you like!
Topic 1: Inspired Design – Meditation and Creativity
Creativity allows us to break through monotony and express the inexpressible. As creators and builders, we push ourselves to the limits in all respects, driving change through our ideas. Carrying this responsibility requires a big vision, lots of energy, and the ability to face uncertainty with courage and equanimity. We all have different ways of clearing our minds – maybe it’s heading to the beach, hiking, cycling – but sadly these activities are too often pushed aside by a lack of time and energy. Even when we do make time, the effects of these activities tend not to last more than a few hours. Enter meditation. Meditation is not only an amazing tool to re-center and clear the mind, it also rewires the way we operate to keep us in a space of creativity, energy and clarity in the long run. The quality of our work and life is deeply tied to the state of our mind. During this session, we’ll explore the mind’s powerful capabilities and teach practical techniques to help you unplug. CAST YOUR VOTE
Topic 2: Cross-Pollination—The Best Ideas are Still to Come
How many times have you sat in front of your computer, knowing you should be whipping up a beautiful design, stunning new interaction, your best idea yet—but drawn a blank? How often do you find yourself combing the same 3 websites for inspiration or relying on past projects as building blocks for new ones rather than truly innovating? We know all the good ideas aren’t gone, but how do we innovate when our creative reserves—and usual tools for refueling them—run dry? The answer lies far from your computer, the folder of inspiration tucked inside your desk, or even your colleagues. The answer lies in cross-pollination, or the notion of combining 2 radically different disciplines, people, ideas, or places to form something that is truly original. During this session, I will present case studies demonstrating successes born from cross-pollination, open minds to its vast possibilities, and provide the tools and resources necessary for attendees to make this method of discovery their own. CAST YOUR VOTE
Topic 3: Walking the Line Between Good and Money
Social entrepreneurship (non- or for-profit enterprises whose primary mission is to create positive change in the world, or “social value”) is gaining speed in the business and nonprofit worlds. Social entrepreneurs walk a fine line between the opposing motives of social and financial value. Attracting investors/clients is difficult if the organization is perceived as inefficient or unlikely to make a good return for investors, but donors may be put off by suspicion that a “social” enterprise that is run as a for-profit business will place too much emphasis on profit and not enough on the values they wish to support. Also, for-profits are often ineligible for foundation- or government-funded grants. Additionally, there is an ethical dilemma inherent in a mission of creating social and financial value simultaneously. We will discuss these issues and explore solutions to the logistical and ethical dilemma of staying financially afloat while maintaining the integrity of a social mission. CAST YOUR VOTE
Topic 4: Big Data: Rise above the Buzz for Social Impact
Big data has the power to change the world. But for every new piece of valuable data, a larger pile of useless data obscures it. It’s tough work to sift through it all to find the pieces that lead us to greater insights. Organizations and individuals need to understand what stories they want to tell with their data. They need to learn how to gather the right kinds of data and to do so with a strategic understanding of how they can become insightful information tied to a larger narrative. When the right data are gathered in the right way and presented intelligently, that is where the magic of data begins to fulfill its promise. Learn how to understand, process, visualize and communicate your big data – and how to avoid the pitfalls that doom many data for good efforts. We will feature case studies from organizations that are using data to transform their work and share insights from journalists, designers, and social-change leaders who are confronting these issues every day. CAST YOUR VOTE
You can also click here and search for ‘elefint’ to find all of our submissions.
Tweet us for a chance to win a ticket to SOCAP13.
This year Elefint is the design partner for SOCAP13 – a conference bringing together some of the world’s most innovative social entrepreneurs, impact investors, and other leaders in the social sector.
We want you to join us at the conference, and are offering two free tickets, one for a nonprofit organization looking to increase its impact, and one for a talented designer looking to use his or her abilities to help good causes.
Read the information below and submit your ideas for a chance to attend. All submissions must be received by August 20th, and entrants must be first time attendees to SOCAP.
Send us a tweet answering the following question:
How will attending SOCAP13 increase your organization’s impact?
Make sure to include #impact and @elefint in your tweet. Images may also be attached but are not necessary.
Tweet us a link to a portfolio piece, where you have used design for good.
Make sure to include #d4good and @elefint in your tweet.
The world may not have yet settled on the exact term for data artists, creative coders, and interaction designers, but whatever you call the talented people who congregate at Eyeo, you don’t want to miss their inspiring work.
Eyeo collects some of the world’s most talented creators, many of whom work at the increasingly important intersection of the digital and the physical worlds, and who seem to possess a hacker/artist ethic in their professional lives. One of the most refreshing aspects of Eyeo was how the quality of the work and love of the craft almost always superseded the commercial viability of what was on display. Many of Eyeo’s presenters expressed great joy in freely sharing the building blocks of their work, watching the amazing ways people built on their creations – taking new steps which the creators never anticipated.
Eyeo’s presenters shared an inspiring collection of work, from large scale public interaction design projects to the latest in data visualization, while others blurred the boundaries of the digital and physical with 3-d printing and cutting edge research into augmented and virtual reality. Eyeo is a lot of things, and whatever your background you’re sure to leave it with a lot of new knowledge and a strong desire to create in new ways. We attend a lot of great conferences each year, and for those interested in design, programming, or the future of technology, this intimate gathering in Minnesota is one you won’t want to miss.
Elefint recently had the opportunity to partner with inspiring local organization CITRIS, or the Center for Information Technology Research in the Interest of Society. CITRIS draws upon the brilliant minds and resources at the University of California Berkeley, Davis, Santa Cruz and Merced to create information technology solutions for the most pressing social, environmental, and health care problems. When CITRIS asked Elefint for help creating an impact report to illustrate their amazing work and were completely open to alternative formats for doing so, we got excited about the possibilities. Keeping in mind that this report describes the work and achievements of individuals spread across the state, we decided a simple PDF just wasn’t going to cut it, so we proposed a single-page scrolling site.
The site we came up with uses bright, colorful backgrounds to visually separate the sections of the report, giving the user a sense of place while scrolling without navigation. We also take full advantage of the scrolling format to separate the content into digestible chunks of information and animate certain elements for added impact.
Interestingly, not long after finishing the site we received a piece of direct mail which proclaims that 77% of website visitors don’t scroll down during their initial visit to a website. If this is true, what does this mean for single page scrolling websites and why would anyone ever make such a thing? Well, we took a look at the source of this statistic: a 2006 study of website visitors, or around the same time that infinite scrolling was first introduced but well before we all became so accustomed to its use on sites like Google Images, Facebook, and Twitter and so prevalent on mobile devices.
While outdated, the statistic is not to be totally disregarded. Not everyone will be tempted to scroll, so the key is to make scrolling as enticing as possible. We provided cues within our design to encourage scrolling (a downward pointing arrow on the first few pages) and guide people through the site (color shifts between sections and visible scrollbars to hint at proximity to the bottom of the site). We also provided stopping points where the content was available through hovers or clicks to prevent scrolling fatigue.
All in all, we’re really happy with the way the CITRIS impact report turned out and enjoyed partnering with such an inspiring client. We look forward to taking advantage of the scrolling site format when other opportunities present themselves.
We had an amazing time bringing together B-Corporations and those aspiring to B. For those of you who don’t know, certified B-Corps meet a strict set of standards set by B-lab, the certifying nonprofit. B-Corps are measured in terms of social and environmental performance, accountability and transparency.
We became a B-Corp because we believe in the triple bottom line model. Of course we need to make a profit, but we also want to consciously build our company so that it has both positive social and environmental impact. Becoming a B-Corp is completely voluntary, and more than 750 companies around the world have raised their hands and said “I want to B the change”. We’re proud to be among them.
A special thanks to our fellow B-Corps Alter Eco Foods, Guayaki Yerba Mate, Runa, and New Belgium Brewing Company for providing awesome beverages and chocolate for our guests. We’d love to meet more of you interested in joining this revolutionary movement to improve how we do business in the world. Maybe we’ll have to throw another party…
Most people don’t think about accessibility in web design. Those that do think about it, think it’s either too big of a problem to solve, or something they can just include as a ‘quick fix’ at the end of a job.
So argued Derek Featherstone as part of his talk on Accessibility in Web Design, at Webvisions Portland in May. Instead of thinking about accessibility in this way, he explained, we should see accessibility simply as part of what good design means: making your site more accessible is good for people of differing abilities, but it also makes your site easier to use, for everyone.
How do we make site more accessible, then? It’s good to integrate accessibility into our workflows from the beginning, as at that point we can identify and solve issues that come up quickly and relatively cheaply. We can ask questions like, “how would someone with visual impairments interact with this site,” and ask those questions at a point where we can still make changes to the site we are creating.
There are also small things that can be done to increase a site’s accessibility, even in sites that have already been built. Adding image descriptions that accurately capture image content into ‘alt text’ fields on the backends of sites ensures that screenreaders can describe the content correctly and informatively for people with visual difficulties. Testing your site with only a keyboard so you can find and eliminate ‘keyboard traps’ for those who have physical impairments, and adding in downloadable transcripts for videos for those with hearing impairments are both simple and important things everyone can do to make their sites more accessible.
Accessibility is a big problem, then, but it is tackle-able. Starting to pay attention to accessibility, and to think about how it affects users that interact with our sites, is a great first step.
We like to think that having a lot options will make us happier. But, in truth, it’s easy to get overwhelmed when we’re faced with too many choices.
Nowhere is this more true than on the web. In this age of information overload––where we’re constantly being bombarded by emails, social media feeds, and instant messages––few things are more soothing than clear choices. The most successful websites nowadays provide a simple user experience, where options are limited and only the most crucial content is featured.
To get a feel for what we mean, take a look at the website for One, the grassroots campaign to end poverty. By including just a few menu buttons at the top and by guiding viewers through well-curated content, the site eliminates any non-essential choices for users and leaves them with the information that they really want to see. And for this reason, One’s website stands out as a user-friendly web design.
So, while designing your user’s online experience, remember: when it comes to choice, less is more.
Imagine you’re touring the grounds of a historic manor on the English countryside, and you pass a warning sign. It says, “Keep on the grass.”
Yes, you did read that right.
The National Trust (a conservation agency that protects England’s historic country houses) commissioned UK firm The Click Design to create a series of signs that look like warnings at first glance, but are actually invitations for visitors to explore and enjoy the grounds. Intended to make the experience of touring these Downton Abbey-like estates feel a little less stuffy, these mock-warning signs delight with playful messages like “Please do sit here. It’s such a lovely spot” and “Please do touch the trees – or even hug them!” The campaign, aptly called Nature’s Playground, also has a clever social media strategy: each sign features a hashtag (#NaturesPlayground), encouraging visitors to tweet their experiences and change perceptions that way.
These ingenious designs trick the mind, subvert expectations, and ultimately, surprise and delight. In our minds, they are sure to spice up a visitor’s experience.
As an infographic designer, your job is to translate raw information into something that viewers can easily understand. But this isn’t always an easy feat to accomplish––especially when you’re working with a lot of data.
So how can you create an infographic that is both packed with data and prevents information overload for your viewers?
To answer that question, let’s take a look at an example.
This infographic, which depicts the economic potential of high school dropouts, is the winner of a data visualization challenge sponsored by the Alliance for Excellent Education, visualizing.org, and NBC’s Education Nation. The designers, Jonathan Schwabish and Courtney Griffith, had a lot of raw data to work with. But, by giving each category its own signature color and icon––that is, by organizing the information into themes––they were able to create a clear and comprehensible narrative.
So, to answer to our original question: to create an infographic that is both digestible and data-filled, work in themes. By grouping ideas together––using colors, icons, and symbols––you too can turn a jumble of numbers into a meaningful story that audiences can easily understand.
Cooking isn’t always easy. And while there is an app for that (many apps actually), certain things––like needing to read recipes from far away or needing to touch the screen––can make using one seem like more trouble than its worth.
But, this week, we found an app that may be a true aid in the kitchen.
Look & Cook is an iPad cookbook that caught our eye not only because of its stunning high definition photographs, but also because of its attentively-designed user experience. Taking into consideration the inconveniences app users face when they’re in the kitchen, Look & Cook includes such useful features as timers embedded in recipes, a mode for easy reading from the kitchen counter, and-–perhaps most importantly for cooks that tend to get their hands dirty––voice-activated navigation.
Like any great app, Look & Cook helps makes life (the cooking part of it anyway) a little easier.
Nowadays, it not easy to design an app that will catch someone’s eye. The content on our screens is increasingly occupying our visual attention, and viewers won’t respond to just anything. That’s why, when designing an application––especially one that requires users to spend their time in one place ––it’s important to create a digital environment beautiful enough to attract their attention.
Ness, a mobile app that provides personalized restaurant recommendations, exemplifies this principle perfectly. By prominently featuring stunning photos of food throughout its menus and on its search page, Ness captures the viewer’s eye and leaves them hungry for more. Design your mobile app to be visually arresting, and it will draw an audience.
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.
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.
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.
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.
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.
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
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.
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:
Here are some resources that we found really useful in our redesign:
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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…
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.
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.
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
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
Design Activism is an emerging movement that puts design as a central focus in solving basic civic and societal problems. People are starting to realize that good design is more than just making something look pretty, but is a key element in making products and services better, useful, and ultimately helpful to solving small as well as big problems in the world.
This idea was brought to my attention this past March when Elefint went to South By Southwest, a huge music, film, and interactive festival and conference in Austin, Texas. We listened to Jennifer Pahlka, founder of Code for America give a keynote address about her organization and what they do. Knowing very little about CFA, I thought it was going to be a dry and technical talk about coding. It turned out to be an inspiring speech on local activism and about using your talents to be a better local and global citizen. CFA is a grassroots social change organization that tackles problems in local neighborhoods using the talents of local hackers, coders, and programmers who want to use their talents to do something meaningful for their community. Other organizations like Design for America and IDEO work to provide real solutions to pressing social, public, and consumer problems by taking the design out of the hands of the often bureaucratic and cumbersome government and into the more innovative and nimble hands of designers.
It’s easy to get entrenched in day to day projects for clients, but it’s also important to stay connected to the more immediate world around us. While we do work for companies that are doing great things in the world, being directly involved in that impact is something special. The city that Elefint calls home, San Francisco, is implementing a program now called ImproveSF. Currently they have a contest to redo the current plaintext SFMTA logo. The idea is to crowdsource the work to local designers and choose the best one. The winner will have its logo displayed as the new face of the SFMTA as well as have an article written about them in The Bold Italic. While it isn’t a campaign for social good, it is a great way to connect talented designers to their community and its a step in the right direction of having people more involved in the more immediate world around them.
There was recently an article in the SSIR that talked about a global design service corp much like the peace corps that aims to send the best and brightest designers, engineers, architects, etc out into the world to solve all kinds of social problems. The article goes on the mention that there is a huge demand for these opportunities but very few programs available. Design Corps, an organization that works in housing and development, and Design for America, are leading the way.
Even Elefint’s newest designer, Rachel Silverberg is getting involved as well. Rachel recently participated in a Hackathon aimed at solving some of San Francisco’s most pervasive social problems. More on that later…