This assignment is only for students taking WMDD 4835 without taking WMDD 4840.
Online Film Festival
For this exercise, you will make a website mockup for an imaginary College Film Festival that will take place over five days June 13 – 17 of next year.
Think of the project as a prototype of parts of a WordPress theme.
In the WP theme, the content would be generated dynamically. In this exercise, you’re creating it manually.
The project will have three pages:
- A large Home Page
- A Single Film Details Page
- An Archive Page
To get a sense of the project, visit the websites of a number of famous film festivals. These could include the following:
- Toronto Film Festival
- BFI London Film Festival
- Cannes Film Festival
- Vancouver Queer Film Festival
- Vancouver International Mountain Film Festival
- Vienna Film Festival
- Vancouver Asian Film Festival
- International Film Festival of India
- Berlin Film Festival
- Tribeca Film Festival
- Film at Lincoln Center Festival
- Whistler Film Festival
- True/False Film Festival
- Seattle International Film Festival
Technical & Content Requirements
- The site must be fully responsive
- Your CSS and HTML must validate
- The site must use CSS variables
- You can use TailwindCSS if you wish, but you do not have to.
- You may not use Bootstrap.
- At least one form and one menu must be minimized / hidden accessibly at small sizes (or possibly all sizes) and be brought into view with JavaScript and transitions.
- Images used must come from open sources such as Unsplash. However, stills from films (screenshots from YouTube trailers, for example) are acceptable, too.
- Online movie trailers will be used in the Today’s Films section, and possibly in the Featured Films section.
- Image formats must be appropriately chosen, and image file size must be kept reasonable while maintaining high visual quality.
- The site must have a College Film Festival logo, created by you.
- The text must be real. It can come from wikipedia, or the marketing material for the film itself. Or you can write it yourself. None of the text can be lorem ipsum.
PAGE One: The Home Page
Required sections on the home page:
- Header
- Hero Area
Presenting the most important detail or details about the festival - Latest News Section
Three or more “story teasers” and “testing” (#) links to full story, and “testing” (#) links to older stories. - Today’s Film’s Section.
Eight or more films, each with movie screenshot from YouTube and details such as screening time(s), theatre, country of origin, director, stars, plot summary, or any other detail you think is relevant. - Parts of this information should be a “testing” (#) link. For example, one film might be from Canada, or India, or Brazil. A user would expect the country to be a link, so that in a full version of the site, they would be able to see a collection of films from that country, etc.
This section must have a menu for other days. - Featured Films Section.
At least four films must be featured. - Join / Renew Membership Call To Action
- Donate Call to Action
- Volunteer Call to Action
- Newsletter Signup Call to Action
- Search
- Sponsor Logos Section. At least four companies. You can use real company logos here.
- “Submit Your Film” Section
- Complex Footer
PAGE TWO: Single Film Details Page
This page will definitely have the site header and footer, and possibly other areas from the home page.
This page will present the full details of one film.
In a fully-developed site, this is the page that would load when the user clicks on a read more link in a featured film story teaser on the home page, or any link that leads to a single film.
Look at other film festival websites to determine what other kinds of content would appear on this page:
- Related Films?
- Ads?
- Reviews?
- Images from the film?
- A Trailer for the film?
- A Table listing where and when the film is playing, etc?
PAGE THREE: An Archive Page
This page will definitely have the site header and footer, and possibly other areas from the home page.
This is the type of page that would load if a user on the fully developed site clicked on a country link: ie the page that would load would present a collection of films from that country, for example.
As with the single page, you must determine what kinds of content goes here. Presumably each film “card” will have
- An image from the movie
- The title
- The genre
- A short description
- Dates the film will be shown
- The trailer
- etc.
Footer Information
In the footer of all pages, you must have the following sections of links
- EXPLORE
Shop / Merchandise
News and Stories
Photo Gallery
Archives - SUPPORT
Support Overview
Membership
CFF Foundation
Individual Giving
Corporate Giving
Government Support
Donate Now
Volunteer - ABOUT CFF
Our Story
Our Mission
Our Vision
Annual Reports
Board of Trustees
Leadership
Departmental Contacts - CONTACT US
Customer Support
Press Center
Jobs / Careers
Entities
SubmitYour Film
All links on the site can just be testing links (#).
Other elements can also appear in the footer. This could include search or some of the Calls To Action listed above.
How You Will Be Marked
The mark will be based on:
Technical Qualities: does the code validate? Are image sizes kept reasonable? Are image dimensions consistent. Is the code well organized? Is the CSS economical and well structured? Is the HTML semantic?
Design Qualities: are the design principles of alignment, balance, contrast, proximity, and repetition leveraged to create effective communication? Is a typographic hierarchy obvious and consistent? Does the typography enhance the site’s communication, or take away from it? Is the text easy to read — at all screen sizes and orientations?
Is the design, in other words, appropriate for the content and purpose of the website?
User Experience: is the content accessible? Is the organization easy to grasp? Are there any barriers to use of the site? Is the site fun? Does the site’s user experience convey important details about the site itself?