UPROAR! at DDB featured an old website made from Flash. While a new website is being designed, the agency asked for an Under Construction page. Taking the agency's most recent sizzle reel, I created a simple landing page with HTML5, CSS3, and the 'slick' jQuery plugin.
The landing page features all the necessary information and social links to inform users about the basics of UPROAR! at DDB. Furthermore, media queries are used to make the landing page responsive (allowing you to access that information across a variety of devices).
For the desktop and tablet version, the video background plays in the back on mute. Users can pause and play the video by simply clicking on it. The mobile version of the site features the 'slick' carousel and showcases key images in a slideshow. In each state, CSS animations are used to transition the info block in and out of the page. Check out the live version here!
For my final web design project I decided to create a website based off of my Assassins Creed: Under the Creed campaign. Our requirements for the site were to use HTML5/CSS3, have multiple pages or sections, have a navigation menu, be responsive, and to feature a jQuery plugin.
I wanted to have an image focused site as the scenery for the Assassin's Creed games and concept art are central to the franchise. In order to focus on the game's imagery, I utilized the full width and height of the browser in all states (desktop, tablet, and mobile). Above are sections of the home page. The first screen features a carousel that pans through the overview of Under the Creed, the second and third screen (as you scroll down this is the second section) reflect the navigation options (and the images show hover states).
As the screen size shrinks, different aspects of the page are reformatted for mobile including the navigation menu. All information blocks (divs) and the mobile menu utilize CSS animations. Lastly, the entire site features parallax scrolling which animates the page slightly when you scroll and allows you to use the keyboard arrows to navigate up and down the page.