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 2021, 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.
