Bring Back the Dodo
Brief: Bring an article to life, while considering the flow of content, visual design, expressive web typography, animated and interactive enhancements, and overall responsive nature.
Role: Design, illustration, animation, typography, layout, HTML, CSS
Student Project
Head to Scientific American to read the original article. Check out my web version here.
Problem & Strategy
The original design is clean and easy to understand, but it lacks excitement and novelty. The addition of more imagery, a little motion, and some quotation call-outs could go a long way to boost engagement and aid in storytelling. Additionally, I think it would be valuable to use design elements to appeal to a broader audience.
Audience
According to Scientific American, they have, “A worldwide audience of over 9 million comprised of forward thinking, solution-seeking readers who cement trends and set agendas that others follow - they are the Minds That Matter.”
The audience is educated, mostly adults, probably somewhat affluent, and relatively tech-savvy (there are many digital subscribers).
Despite having a technologically adept audience full of progressive thinkers, the design of the publication and website has remained fairly classic and understated. I think there is room to engage with the current audience further by adding interactive elements, and to potentially grab new readers who are younger and seeking materials that are closer to “edu-tainment.”
Competition
I looked at a variety of interactive websites from other educational institutions. The text is always legible, and it’s split up into bite-sized sections so as not to overwhelm the viewer. While many of these sites rely of photography for graphics, that approach wouldn’t work for me since there are no photographs of dodos, and I really wanted to showcase the bird. I did come across a few sites that used historical imagery (maps, etchings, etc.) or contemporary illustrations, and I often found them to be more compelling. In particular, I loved the animated elements on this site, and the use of background graphics to add texture, interest, and variety on this website.
I also found that the sites with illustrations felt more accessible than the sites that were relying on photography. The photographed images tended to feel more cold and serious, and they lacked the element of storytelling that I was looking for.
For all these reasons, I opted to stick with editorial-inspired type (keep the content legible and bite-sized), but broken up with some colorful animations that will aid in rhythm and storytelling.
Concept Evolution
My first set of sketches used mobile proportions, and stuck with a basic image, text, image, text layout. While it seemed perfectly fine, it also felt entirely too boring. So, I made a second set of sketches where I included more text over images and a variety of different interactive elements.
After having some class discussions, I decided my design needed to fall somewhere between the two: something with rhythm, hierarchy, and novelty, but also executable with my skill set.
When I transitioned to wire framing, I had a clearer idea of how to create some rhythm and variety in the design without going beyond my abilities. I decided I would utilize a grid with rows and columns, but alternate the text, image, and background colors.
I received positive feedback from users at this point, so I decided to move forward with this layout.
Outcome
When I finally got to the point where I needed to start coding, I was glad that I’d opted to maximize the utility of Skeleton. The animations could use a bit of refinement, but overall I’m pleased with the results.
Stock images: Unsplash.com, Pexels.com
Mockups: Adobe Stock