Custom Responsive Fan Website

Animation Front-end Development

Client Profile

The Office is a mockumentary on a group of typical office workers, where the workday consists of ego clashes, inappropriate behavior, and tedium.

Project Summary

As fans of The Office television show are everywhere, we decided to create an "unofficial" fan website.

Project Goal

To create an end-to-end, multi-page responsive website about a television show

Team & Timeline

March 2018 • In our three-person team, we each assigned the following roles: leader, designer, and coder. I was the coder for this project.

Responsibilities

  • Custom Coding
  • Mobile-first Design
  • CSS Animations

Tech & Tools

  • HTML & CSS
  • Trello
  • Photoshop

Description of Work

This project was a collaborative experience completed during my Master's program. We were assigned a three-person group to create an end-to-end, multi-page responsive website about a television show. When we decided to create an Office fan page, we knew this website should capture the user's attention and provide information in a quick way. We also set a stretch goal to create an element of surprise or delight.

First, we inventoried the content that should appear on each page; we agreed on a character image, a popular quote, and facts about the character. Then, we considered UI patterns and decided to include a logo, navigation, and footer. Now, it was time to lay everything out! We first worked on mobile screens before moving up to tablet and desktop sizes.

One of the most strategic moments was when it came to navigation design; we hit a roadblock: the character names were too long on mobile...and the navigation stacked! This increased the height of the nav and reduced the amount of information we could display on the screen. After some brainstorming, we shortened the names by only using the first name on smaller screens. This allowed us to keep a full navbar without stacking links.

As the team's coder, I took pride in transforming the designer's two-dimensional visual design into a dynamic, engaging website. Regardless of the user's device, they are treated to some sort of animated entrance. To create animations, I used Animate.css as the base, then I altered their code to meet our needs. For example, The Office logo hinges and falls off screen, which is standard in Animate.css; however, we believed it would be a better user experience if the sign returned to the top of the screen to the traditional logo spot. So, I tweaked the code to make the sign reappear back at the top of the page.

This project was a work of true collaboration - and I think that is part of what makes it so good! Multiple minds came together to create a functional, beautiful site!

mockup of the office fan site

The Office "Unofficial" Fan Site

View Live Site

Feedback

"This site looks fantastic! It's incredibly well-designed, responds great and I think the minimalist, no-frills approach is perfectly "The Office." The images you chose of Michael, Dwight, Jim and Pam were really nice (good imagery really does go a long way). Your animations were all cohesive and un-obtrusive. They functioned as a design element rather than an "in-your-face" sort of addition, and I think there's something to be said for that. It adds interactivity without being really overt about it. I also loved the falling Office sign! YOUR NAV WAS BEAUTIFUL. I am all-caps-yelling this on purpose, because I really liked it. You made a great choice to use only the characters' first names at smaller browser widths - that helped it to look great at every size. Your code on every page looked perfect, and your mockups looked fantastic also. Really awesome work!" - Evaluating Professor