Michelle Catalfamo

Senior Project

For my senior project, I created a prototype to redesign SOFAtube, a site for the School of Film and Animation (SOFA) at RIT.




Original Site: sofatube.rit.edu




The current version of SOFAtube.


My test site is currently located at: http://molly.magic.rit.edu/~mac/test/index.html


The goal of this project is to redesign SOFAtube,  RIT’s School of Film and Animation (SOFA)’s website. The functionality, layout, and design are poor. Improvements will be made to the website in order to make it more useful to students and faculty.

I used HTML, CSS, Javascript, jQuery, and other web tools to redesign the site. The website will have a cleaner, more modern look, as well as added functions such as a comment section, social media buttons, non-film media, an improved player, an easier way for students to manage their files, and information about the SOFA Archive and the SOFA Homepage.

I started out by creating some Photoshop designs on what I thought the new version of SOFAtube should look like. At first I tried to keep some of the original site design, for example, the gray box on the side that shows the categories and the white background. I added a title to the site and wanted to add a carousel to the homepage.

 In my next design in photoshop, I changed the background to be black and created a navigation bar at the top of the page. It is gray with a drop shadow that makes it look modern. The navigation is full of drop down menus where I created categories to sort the films in order to organize them and easier to find. I kept the carousel on the front page.

When I got into implementation, I decided to change the design slightly and try a Bootstrap template. I found the “Bootstrap 3 Carousel Layout” template and began customizing it slightly. This layout had a slider carousel at the top rather than a circular carousel. The template also had three columns under the slider. They were originally round in the template.

 However, even after playing around with the settings and CSS, I couldn’t get it to look how I wanted so I did some more research and found the jQuery “Coverflow” carousel. This was much easier to work with and easy to customize. I also chose the “Bootstrap Modern Business” template for the design navigation bar. I kept the three columns that were under the slider in the first template, but I replaced the slider with “Coverflow.” I changed the three columns to be square instead of circular in order to make the design more uniform.

From there I designed one page at a time, starting out by looking at the original pages on sofatube.rit.edu. I rearranged some of the items and adapted the pages to look more modern and to be more user friendly.

My senior thesis can be found here: