"The Adventures of the Social Superfan" Website

Website Design, Wireframing, Project Management, Photography, Graphic Design

March - June 2013

Project: Three-month project for Web Production class utilizing the web production process, from pitching a story to website creation.

Role: Creative Leader

  • set creative direction and oversaw the creative components of the website

  • website design and implementation (HTML/CSS/Javascript)

  • took photos used in the story

Outcomes:

  • cohesive website that integrates interactive elements as crucial components of a journalistic story

  • fresh and innovative investigation of the intersection of technology and fans

ComicTop.jpg

Process:

"The Adventures of the Social Superfan" is the product of a quarter-long project for a class, Web Production. Each 4-person team went through the entire web production process over the course of 3 months, from pitching a story to reporting to website creation.

Based on the class topic, science + culture, my team chose to investigate how technology and social media has impacted fan behavior.

I set the creative direction and oversaw the creative components of this project, including photography, website design and coding, colors and typography, etc. I took the photos used in the story and coded the majority of the website. The quarter-long project cumulated in a final project presentation to the Medill community.

The story can be found at http://www.theculturalquotient.com/stories/fandom/.

Fandom 1.jpg
The team: Gabe Bergado, Laura Rosenfeld, Katie Gronendyke, and me (Priscilla Liu)

The team: Gabe Bergado, Laura Rosenfeld, Katie Gronendyke, and me (Priscilla Liu)

One of my favorite elements in "The Adventure of the Social Superfan" was the utilization of GIFs as part of the presentation of the story. Because GIFs of TV shows, movies, and other media have risen to the center of many fandoms online, my team and I felt that GIFs would help connect the reader to the story subject in a unique way.

Topics covered during the course included: agile development, project management, responsive web development, interactive web elements, journalistic reporting for the web, etc.

 

Fandom 2.jpg
Fandom 3.jpg
Wireframing/storyboarding sketches.

Wireframing/storyboarding sketches.

Wireframing/storyboarding sketches.

Wireframing/storyboarding sketches.