filmlabproductions

FILMLAB PRODUTIONS

Home

Static Badge Static Badge Static Badge Static Badge

In Order to make it run on Heroku, I’ve to make the following changes

View My Github Project online - This version of my site that is being assessed.

Real Company’s Webpage - This link is live, however does not have the capacity to use flask due to the hosting party not allowing it. This will run on the build made with just HTML, CSS & JavaScript

Login Details for testing admin priveliges (IE. Being able to add or edit films) Heroku:

    User: secretadmin
    Password: secretpassword

How to run project locally:

  1. Install application on this github page

  2. Once installed, open the application on your Integrated Development Environment (IDE)

  3. Create a file named ‘.env’ in the root of the application (on the same level as the ‘app.py’ file)

  4. Next you will need to create a ‘.env’ file in the root of this application.

     APP_SECRET_KEY=...  
 USERNAMES=...
 PASSWORD=...
 USERS=${USERNAMES}:${PASSWORD}

-> Please change the ‘…’ with your own secret key, username and password.

  1. Once this stage is completed, you can move onto installing requirments to run this application:

     pip install -r requirements.txt

  2. This is where we run the application. To do this, please run the app.py file in the local terminal:

     python app.py

  3. Finally you can open this application by entering the following address into your prefered browser:

     View site on this link http://127.0.0.1:5000

  4. To stop this application, enter ctrl+c in your integrated terminal

Introduction

Filmlab Productions (Filmlab) is a film production website where users stay up to date with current projects. The site is multifunctional, as a video streaming platform, enabling audiences to stay up to date on what Filmlab is doing. Users may stay up to date via the homepage, which houses an up to date film list, and a behind the scenes page.

Filmlab is a new company so it is vital that they are able to quickly show what they are about, and their films must come to the focus to build an audience. Therefore, a thoughtful design would take into consideration, the companies' appetites  for releasing films, along with the viewer's attention to watching them. --- ## CONTENTS: --- * [User Experience - UX](#user-experience) 
* [First Time Visitor GOAL](#first-time-visitor-goal)
* [Return Visitor GOAL](#returning-visitor-goal)

User Experience:

First Time Visitor GOAL

 1 - To quickly find out what projects Filmlab is working on

 2 - To find out if filmlab is a legitimate business along with their track record with film making

 3 - To be able to navigate to the films section and watch the projects, possibly after seeing potential advertisements or anticipation on social media for a new film

 4 - To find out information on the team behind filmlab, follow the careers of actors involved, where the company is based, and to contact the company directly

 5 - What the company is about and how they work together to produce films

Returning Visitor GOAL

 1 - To navigate around and see the newest projects & films, or upcoming projects on the very front of the homepage

 2 - To be able to see up to new images on the behind the scenes page, with new content about upcoming or completed projects, that they care about

 3 - Actors or producers who want to share their work

 4 - Creator's goals are different than the regular user. This user would be more interested in publishing their work, rather than watching. These users would demand an admin account where they can upload, edit and delete videos from the database. Login details are listed in the *[Introduction](#Introduction)

Design:

Wireframing

### Colour Scheme and Styling Originally, I had planned to use a primary color scheme of black; purple, and an accent of orange to outline important content. However, Filmlabs’ final colour scheme is heavily inspired by Netflix and their simple, red, black and grey website design.

Contact form Screenshot from - https://www.color-hex.com/color-palette/22942

Based on my previous statement and using the colour selector tools on Figma.com, the colours I decided to settle on were the following 3:

color Screenshot from - https://www.color-hex.com/color-palette/22942

My design was started with pencil and paper -> then moved to Figma as a free tool that I would be able to see my design before committing to it in code.

While committing to the colour scheme, I wanted to remove elements that created visual noise, or affected readability for the user. I also wanted to cut down on colours outside of the primary colours (Grey & White). This was so I can maintain continuity with the rest of my site, along with having a more professional looking site.

Consolidating Design

After completing the wireframing stages I had assistance from a designer. These are examples of the PC mockup, used to envision how Filmlab would look.
Pc version (designed by Natsuko - my friend) ![Figma exp](/filmlabproductions/assets/readme_img/pcfimga.png) ![Figma exp](/filmlabproductions/assets/readme_img/pcfigma2.png)

Home Page (Final Look)

Home

Film Page (Final Look)

Films

Films Page (Final Look)

films

When working on the final design, I used an online editing tool called Figma. I also used it to edit and resize SVG images, due to its inbuilt features and high precision over such properties. This is how I redesigned my Icons.
    
Initially, I had designed the navigation as it would be used in all of my pages. I went for a more modern approach, opting for a sidebar, similar to Netflix.

Typography

I used google fonts' "Quicksand" for better readability, as its roundness makes it easier to read. It also adds a more delicate and comfortable feel, which is ideal for relaxing users, who are ready to watch a film.

Features:

Future Implementations

In the future I would like to implement a proper "contact us" form, instead of the slapdash method of opening the email app, which is in place now. I would also like to add animations to the project, for example, when the navbar opens or closes, as it would add more fluidity to the page. I would also like to implement a feature called 'Randomiser' in the navigation bar, which would select a random film from the current list.

Due to time constaints, I was not able to condense the code in and utilise the Flask framework to the fullest. This would include the nav bar, which currently takes up a large portion of the site storage. In the future, this would only need to be written once, and the template reused for new implementations and films

Accessibility

While I have not added aria-labels to enable screen readers to understand my webpage, I have ensured that my code is semantic enough and I have ensured there is adequate contrast for ideal readability. However, I understand the need to make my site more accesible to visually impared users, through screen readers.

Testing:

Testing here

Bugs:

Known bugs:

Once I use navigation & swap from tablet mode to peace mode. There, the contents do not change their states back to its default.

Fixed Bugs:

In my About page, I had no issues here until I ran into problems with the ".bubble" class. I tried to fix this by having the background wrap more closely with the text, and aligning content with flex to the center of the box. This had fixed one issue but also left all of the bubbles as the same size. It is mostly fixed however.

Along my journey I had experienced a great number of bugs and unintended consequences in the user experience. This ranged from elements which did not display at all, to elements covering the entirety of the screen. --- ##  Acknowledgments: --- * Credits to Natsuko, the designer who helped me with the logo, and who was a big help in designing the site.