Scribd
Upload
24 views

Films By... Presentation

This document provides information about the process of creating a film website, including focusing the mindset, choosing a minimalist and cool design with CSS3 over jQuery, and referencing external resources that were helpful. It also discusses some design elements, issues that came up, how to create animated gifs from footage, and basic analytics for the site during its first two weeks online.

Uploaded by

Brett Johnson
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

Films By... Presentation

This document provides information about the process of creating a film website, including focusing the mindset, choosing a minimalist and cool design with CSS3 over jQuery, and referencing external resources that were helpful. It also discusses some design elements, issues that came up, how to create animated gifs from footage, and basic analytics for the site during its first two weeks online.

Uploaded by

Brett Johnson
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

This

That

How I made my fIlms sIte

mIndset

Unfocused

Lazy

Focused

Professional

Can I

make it minimal make it cool create an experience experiment use CSS3 over jQuery do what I want

Can I

Yes we can.

desIgn

Fullscreen

Cinematic

animated .gif

Futura

Georgia

Hover

Power

Pa r t s

I didnt do it.

Thanks Internet!
HTML5 Boilerplate
http://html5boilerplate.com/

FitVids
http://fitvidsjs.com/

Bootstrap, from Twitter


http://twitter.github.com/bootstrap/javascript.html#scrollspy

LocalScroll
http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

Vimeo API
http://vimeo.com/api/docs/player-js

CSS Tricks
http://css-tricks.com/perfect-full-page-background-image/

One size fits all.

n 16:9
// edit FitVids code - http://j.mp/yIVjuJ // adjust panels and video to window size function setPanelSize(){ var windowHeight = $(window).height(); var windowWidth = $(window).width(); var videoWidth; //calculate whether the video is too tall for the space if ( ((windowWidth-120)*.5625) > (windowHeight-160) ) { videoWidth = (windowHeight-160)*1.777; } //resize video and panel $(.videocontent).css({maxwidth:videoWidth+px}); $(.panel).css({height:windowHeight+ px}); //reset scrollspy $(body).scrollSpy(refresh); }

Oooh

Argh
#main-nav li { height: 40px; } #main-nav a { background-color: #ccc; line-height: 40px; display: inline-block; height: 40px; position: relative; border: none; color: #fff; font-size: 0; padding-left: 40px; overflow: hidden; -webkit-transition: all -moz-transition: all -o-transition: all transition: all } #main-nav a:hover { font-size: 18px; padding-right: 20px; }

0.2s 0.2s 0.2s 0.2s

ease; ease; ease; ease;

How

Complicated
- Stabilize footage - 24fps => 12fps - Loop with crossfades - Export frames - Import layers into Photoshop

animated .gif

- Add layers to animation panel - Set frames to 0.1 second and loop - Mask out redundant areas - Save out .gif (few colors)

PusHIng

The Best Designs

Awwwards

Friends
Peak: 169

The Best Designs


Peak: 1,169

Awwwards
Peak: 4,589

*Jan. 23, 2012 - Feb 6, 2012

Total Visitors* 13,068

Video Plays 8,802

Video Finishes 791

At most, 67.35% of visitors hit Play. Only 8.98% of visitors who started watching a video finished it.

*Jan. 23, 2012 - Feb 6, 2012

Viewers

Followers

Contacts

Missing

You might also like