An interactive and narrative website designed to inform the general public on the good zoos do for global conservation, while addressing the misconception that animals in zoos are unhappy or mistreated. Overall, the hope is that the public will "see the bigger picture" and realize that having just a few animals in zoos does so much to benefit the rest of the animals in the wild. A project for ART 574 Bookforms, University of Louisville 2018.
Site: https://www.supportzoos.com/
Project Information: https://www.susanpallmanndesign.com/bigger-picture.html
This project is primarily a design project, not a development one. Although the website is coded from scratch, this code is fairly old and probably not as optimized as it could be. The emphasis is on using design and user-interaction to convey a message through a narrative experience.
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.
The illustrative style and rhyming verbage serves to make the message more approachable and heighten the sense of "story".
Sources for information found on the site are detailed on the about page.
All illustrations were created in Adobe Photoshop and then exported in several layers to allow for the parallax effect seen on desktop. The lighting effect that shows/hides additional animals in the background is a separate layer that becomes visible as the user scrolls. In addition to considering layer completeness, all illustrations needed to make sense on both mobile and desktop, and so have a central focal point of action that is centered on in mobile screens.
The design is primarily a single-page scrolling format, where each mini-story is of an animal population that has been helped by captive-keeping of animals in some way. The stories deal with progressively more and more endangered animals, ending with the northern white rhinoceros, which is possibly extinct in the wild as of this writing (2020). However, the ending provides a small amount of hope by referencing the fact that San Diego Zoo in California has DNA samples from these rhinoceroses should genetic technology and their wild habitat provide an opportunity for rebuilding the species.
The color scheme is chosen to be recognizable and add drama to the illustrated signs.
Due to the complex nature of the interaction, this project was developed into a functional website from scratch. Most prototyping software available would not have been able to simulate the effects desired. The code is HTML, CSS, and JavaScript (with jQuery). SEO and social media metadata were considered - hopefully making it easier to spread the message.
Some of the code credit belongs to Daniel Terrington.
- 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
This website is intended to be mostly a proof-of-concept, and has a target audience of college students. With this in mind, the website is not optimized for poor internet connections, slower devices, or outdated browsers. Although there is some reduction of effects on mobile devices, the website may still seem slow on older machines. In a real-world setting, these issues would be addressed better, but this was a school project.
This site is one of the first JavaScript projects I ever did. As such, the code behind it is not especially well-done or optimized. I think the project is important to keep as a documentation of my learning experience, but it's also worth noting that I have improved greatly as a developer since this website's creation in 2018.