LINDY WONG
Cover - Blackout.png

Blackout Poster + Website

 

Blackout: Lights On, Lights Off

 
 

Part 1: The Collaborative Poster

The Project

Visually present the blackout of 2003 through data visualization. The task was to condense a 300 page final report supplemented by articles about the Blackout event, and convey that information through a 20” x 32” poster in a visually coherent way.

My Role

Research, layout, design and illustrations. Designed and created from beginning to end in collaboration with Avvalprit Kaur.

 
 
 
 
 

Research and Extrapolation

Reading through official reports and news articles, and aligning information, we sorted out the most significant copy and flow of information needed for the poster. It was clear we needed to include two things: how electricity and transmission lines work and how the blackout event unfolded.

 
 
 

Initial Drafts

Through our initial data collection and organization, we quickly realized that there was too much layering and clutter going on within the visualization. A viewer’s eye did not have a clear path for a story that is so complex and data-heavy.

 
 
 

Final Revisions

Through further revisions and critiques, we decided on a layout that would allow our poster to be divided into two parts for the viewer to read. It had more clarity in its reader pathway, and less overlapping of information to declutter the information.

 
 
 
image-asset.png
 
 
 
 
 
 

 
 

Part 2: Website Adaptation

The Project

Translate this 20” x 32” print poster into a responsive website. Adapted from the blackout poster, I took on a web development project to translate the collaborative poster into a website.

My Role

Wireframing, UI/UX design, web development (HTML/CSS/Javascript). Using Adobe Dreamweaver and CSS/HTML/Javascript, I developed this site to be responsive in laptop and mobile view.

 
 
 
Wireframing.jpeg
 
 

Wireframing

I first explored different methods of laying out how the information would flow on a web platform. I wanted to explore how I could translate a print product into a different context and what a website platform might make possible for the reading flow of information.

 
 
 
 
 
 

The Blackout Website

The final website features a fixed pull out menu that acts as a “power FAQ” section, explaining how electricity works. This allows viewers to reference this information while reading about the blackout event itself on the homepage.

 
 
 
Mobile-05.png
 

Mobile View

When accessed through a mobile device, the browser redirects you to the mobile code of the site, reformatted to a single column. The lightbulb pull-out expands across the screen as opposed to partial coverage of the screen.