VCU Cinema Program

Overview Process

I designed and co-developed the new website for the Cinema Program at VCUarts.

insta

cinema-mark

New wordmark

 

c1

Homepage

 

cinema-ba

Cinema BA Overview

 

news-events

News + Events page


Check out the live site or read the story behind the scenes.

We first examined the existing site. It was outdated, too dark, and confusing to navigate.

cinema-old

Inital sketches & wireframes.

cp2

search

cp1

timeline

First digital round.

home

First mockup — trying to capture the quirky vibe of the department

 
screen_shot_2015-11-12_at_12.50.45_pm

Second mockup

 
home3

Prototyping the homepage layout

 
cmob

Thinking about the mobile UI

drop

Thinking about utilizing dropdowns

cinema-animation

Making the signature hover gif

Keeping the sans-serif for the logo to make sure it has resemblance to the old mark.

cp4

 

cinema-menu-animation

Mobile menu

 
cinema-logo-hover

Logo animation

cp5

 

cinema-media-hover

Media link

 
cinema-hover

See more link

Simplifying everything and starting the coding process. Our goal was to start mobile-first and utilize progressive enhancement for larger screens.

home-mockup

Final homepage design

Check out the live site or see the overview of the final product.

Credits

Built with

WordPress/ACF
jQuery
SASS/Susy

Design

Dan Strogiy

Timeline Design

Peyton Sorah

Development

Dan Strogiy
Peyton Sorah
Cody Whitby

Next Project:   Nice Arms