• Skip to primary navigation
  • Skip to main content
Hebden Bridge Media

Hebden Bridge Media

We Build Awesome Websites!

  • Case Studies
  • About
  • FAQ
  • Contact

Film Maker Fund Website Build Case Study

Endless variation in content presentation keeps visitors engaged!

If you want your business or project website to stand out and make a professional and lasting impression, custom design by a competent designer who holds a good understanding of HTML, CSS and Javascript is the only answer. It was a pleasure and an honour to implement this wonderful design by Tim Harbour / uc48 design.

The FilmMaker Fund website was programmed to be a little ahead of it's time using some of the newest, most advanced and powerful HTML and CSS features available like Flexbox and SVG. Now in 2023, when these technologies are more commonplace, it is still holding it's own as a unique and engaging design that still performs.


Menu Systems

The home page consists of three menu systems, first the right hand menu signposts the three main calls to action FFM make to Film Makers, Investors and the Public. No scrolling, no clicks, the basic information is presented clearly and without any fuss.


Second is the now traditional 'burger' style menu that expands into a full page list of options to choose from. Big, bold and extremely clear, it is very easy to use and links to all the major areas of the website. The menu is animated using CSS transforms and minimal JS.


Finally, the third menu is the list of films below the fold. CSS transforms push the title up and reveal a short description, a greyscale filter renders the photos in black and white and transparency adds a touch of class - nice.


Navigating the Films

Having chosen a film to view from the home page film menu, each page has a 'previous' and 'next' film link in a continuous loop at the top right of the page. This means anyone browsing the films will eventually see them all, no matter where they start or in which direction they navigate. CSS transforms provide the animation.


Flexible Grid Layouts

To help keep visitors engaged, every page layout on the Film Maker Fund website is a little bit different, but the same styles so there's no doubt you are still on the same website. The layouts are created using a very small amount of CSS that is reused taking full advantage of the multiple class declaration facility in HTML - simple, powerful and elegant.


Read Next Case Study

Post Metadata

Filed Under: Development Blog Tagged With: CSS, Design Implementations, Flexbox, SVG, Websites

Hebden Bridge Media Footer Logo
Copyright © 2025
Hebden Bridge Media
Terms and Conditions
Website Terms and Conditions
Privacy Policy