bigger picture
Web Campaign
See the Bigger Picture
Objective
The goal of this project was to design, illustrate, and develop a website that informs users about the assistance zoos provide to global conservation work. In doing so, the website also needed to address the misconception that animals in zoos are unhappy or mistreated. It was also intended that the project take the user through a longer, storybook-like narrative. This project was collaborative, with much of the art direction, writing, research, and code being a shared effort.
Website
Repository
Work
-
Web Design
Code
Illustration
Awards
Student ADDY Judge's Choice (District), 2020
Student Silver ADDY (District), 2020
Student ADDY Best in Show (Local), 2020
Student Gold ADDY (Local), 2020
AIGA Flux Show UI/UX, 2020
AIGA Louisville Show, 2019
In Collaboration With
Daniel Terrington
Concept
The concept for the project began with a tagline, "see the bigger picture," encouraging the audience to think about the well-being of all animals, not just the few held in zoos. Playing off of the visual element of seeing more than what's immediately visible, the project began to take on to a sort of "hide and seek" interactive concept where more animals are revealed as the user scrolls. An illustrative style and rhyming verbal content further heightened the sense of reading a storybook, and made the message more approachable.
Process
As this project spanned not only design, but also illustration and web development, the overall website was created in three major legs, each with their own phases of research, planning, and execution. Illustration was the first phase following the concept. The full-width illustrations had to blend into a scrolling page, and have layers able to move independently to simulate parallax depth. Additionally, they would hold the most visual power, so research into composition and contrast made up the bulk of the process. Once a style and illustration guidelines were nailed down, the drawings came easier.
Illustrator, Designer, & Developer
The biggest difficulty with the design was determining how to make an interactive effect that would hide and reveal additional animals in each illustration. Although it already made sense to have the interaction be scroll-linked, how the images would change as the user scrolled was a major decision still. To further difficult matters, information needed to change as the user scrolled to progress through the rhymes, so layouts needed to be simple enough to allow text to float over the images. A decision was reached by trying several different possibilities to see what was most viable with all the requirements being balanced.
Since the project was being fully created from scratch, the development (code) side of things had to be considered as well. This meant, for example, that having trees move out to the sides of frames would be difficult when combined with a parallax scrolling effect as the elements would be receiving conflicting instructions. Ultimately a lighting change to reveal animals that were previously hidden in the shadows made the most sense. It even doubled as a metaphor, shedding some light on a commonly misunderstood subject. Pictured below is the storyboard for some of the interactive "segments" to the story.
All phases of this project began on paper. Layouts, interactions, and illustrations all began as sketches. Even the javaScript began as flow charts and diagrams before the project could be taken to the computer. The extensive planning and research that preceded implementation is what really made the one month deadline possible. Having a clear idea of what needed to be accomplished (and how) allowed for an effective campaign, built from scratch.
Final Design
See the Bigger Picture launched successfully at supportzoos.com. Although primary traffic is largely through the United States, analytics show that the site gets international visitors as well due to social media sharing by zoo enthusiasts. Each rhyme and accompanying illustration tells the story of a zoo's recovery efforts in a different species' conservation, and the supporting pages bring the user to ways they can help (besides visiting the zoo).