LINDY WONG
Cover - Pigeon.png

Pigeon Books Responsive Website

 

Pigeon Books Responsive Website

Pigeon Cover-02.png
 
 

The Project

Pigeon Books are a series of children’s books written and illustrated by Mo Willems. The challenge was to take printed material and translate it to web in an interactive way with a call to action.

My Role

Researching, storyboarding, wireframing, UI/UX design.

 
 

 
 

Storyboarding

This website features a page that runs through a teaser for the storybook, The Pigeon Needs a Bath. One of the first things I needed to do was storyboard this book, to see how I might use interactions and animations to lay out the story in a website format.

 
 

 
 
ezgif.com-video-to-gif (9).gif
 
 

Homepage

The homepage is designed to be simple and playful, leading viewers to the story teaser and call-to-action.

 
 
 
 
 
 

The Story

I wanted the website to feature a teaser for the Pigeon Book, to drive people to the call-to-action to purchase. This section takes advantage of the capabilities of web to create interactions to animate the story. This was done through scanning the pages of the book, Photoshopping images, and animating those images.

 
 
 
 
 

Buy the Books

Uses a grid system to lay out all the Pigeon books available. Buttons and background sections were inspired by the “roughness” of the illustrations’ treatment in the books.

 
 
 
Pigeon Images-06.png
 
 

 

Tablet view

 
 
 

 
 
ezgif.com-video-to-gif (4).gif
 

Mobile View

The main feature of the website was this interactive teaser. I made sure it would still be accessible and legible through mobile view.

 
 
Mobile-03.png