Interactive Design [Final Project : Creating a Single-Page Website]
02.07.2024 - 23.07.2024 / week 11 - week 14
Sheryne Axellia Putri / 0367267 / Bachelor of Design (Honours) in Creative Media
Interactive Design
TABLE OF CONTENTS
Interactive Design
Final Project
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Reflection
INSTRUCTIONS
Figure 1.1 Week 11 (02/07/2024) Module Information Booklet.
1. Proposal
Figure 1.2 Week 11 (02/07/2024) Proposal presentation.
2.1 Progress
1a) Prototype
Figure 1.3 Week 11 (02/07/2024) Sketches.
After completing a few sketches to compare and determine the most suitable layout, I started converting them into Figma.
Figure 1.4 Week 12 (09/07/2024) Figma progress #1.
As I continued working on my prototype, I made several adjustments and changes to improve its design. To liven up the section and prevent it from appearing dull, I decided to introduce a subtle hint of color. During this process, I spent a long time finding the perfect images to describe Godard and his works.
Figure 1.5 Week 12 (09/07/2024) Figma progress #2.
The header navigation bar is located at the top of the page and includes links to the following sections of the website: Legacy, Films, Biography, Awards, and Home. I want the page's header to feature a sizable, striking photo of Jean-Luc Godard and an overlaid text quote: Jean-Luc Godard, "You don't make a movie, the movie makes you."
The content of the Biography Section will be written in capital, bold letters. Text that gives an overview of Jean-Luc Godard's life and cinematic contributions.
Figure 1.6 Week 12 (09/07/2024) Figma progress #3.
Figure 1.7 Week 12 (09/07/2024) Figma progress #4.
This is the award section that I'm still not sure whether to add, since I want to focus on Godard's personality and how he sees cinema.
Figure 1.8 Week 12 (09/07/2024) Figma progress #5.
This section delves into his influential legacy and groundbreaking innovations in cinema during the French New Wave era, highlighting his significant contributions to the art form.
Figure 1.9 Week 12 (09/07/2024) Figma progress #6.
1b) Prototype Final
Figure 1.10 Week 12 (09/07/2024) Final figma prototype.
1c) Dreamweaver
HTML Code
- #Header
The <header> element contains the navigation menu and header content. Inside the <header>, the <nav> element holds the navigation menu with links to different sections of the page. Additionally, the <div class="header-content"> contains the header image and overlay.
CSS Code
The 'header; styles define the appearance of the header section, including 'position', 'text-align', and 'color' for positioning. The navigation menu is styled to have a specific 'background', 'padding', and 'height'.
This class styles the content within the header, setting 'position', 'max-height', and overflow properties to manage the layout and 'height' of the header image. The .overlay class adds an overlay effect to the header image, using 'position', 'top', 'left', and 'transform' to center and position the overlay correctly.
Figure 1.11 Week 14 (23/07/2024) Header.
HTML Code
- #Gallery
This section displays a gallery of images related to Jean-Luc Godard. Within this section, the .jgl-container serves as a container for the image boxes, while each individual box, styled with the .box class, contains an image.
CSS Code
The '.jgl-container' styles the gallery container, utilizing 'width', 'padding', 'margin', 'display', 'flex-direction', 'justify-content', and 'flex-wrap' to create a flexible layout. And each image box in the gallery is styled with the '.box class', which sets 'width', 'margin', 'transition', and 'flex' properties for size and animation effects.
Figure 1.12 Week 14 (23/07/2024) Gallery section.
I like how the #3 layout look like, it looked like a curated collection of moments, similar to browsing through a camera roll.
HTML Code
- #Biography
The purpose of this section is to provide a biography of Jean-Luc Godard. It includes a .bio-container that holds the entire biography section, and within it, the .bio-section contains both the biography text and an accompanying image. The .text-right and .text-left classes are used to align text to the right or left, respectively. Additionally, the .quote-section is used to display a quote from one of his films.CSS Code
The '.bio-container' styles the biography section for layout, spacing, and background settings. 'The .bio-section' class styles the biography section. The '.quote-section' styles the quote section to manage the layout.
Figure 1.13 Week 14 (23/07/2024) Biography section.
The background is transformed with by 'background-image' specified by an url. The image is set to cover the entire container (background-size: cover;) without repeating (background-repeat: no-repeat;).
HTML Code
- #Legacy
This section describes the legacy of Jean-Luc Godard. The .legacy-section class contains images and text that elaborate on his legacy, and the .innovative-section discusses his innovative techniques, also using images and text for illustration. CSS Code
The '.legacy-section' styles the legacy section, and the '.left-text' class styles the text within the legacy section, for proper text alignment and positioning. The '.innovative-section' styles the innovative section, employing 'display' and 'flex-wrap' for layout using flexbox properties.
Figure 1.14 Week 14 (23/07/2024) Legacy section.
HTML Code
- #Films for beginner
This section provides an introduction to Godard's films. The .movie-slider class is used for a slider showcasing some of his notable filmsCSS Code
The '.movie-slider' styles the movie slider, setting 'position' and 'background-image' for positioning and background settings.
Figure 1.15 Week 14 (23/07/2024) film guide section.
In the final stage, the layout is refined. The overlay covers a larger portion of the image, ensuring maximum readability of the text. The movie title, details, and description are clearly visible, and the "Watch Trailer" button is prominently placed. The overall design is more balanced, ensuring that all elements are easy to read and interact with.
Figure 1.16 Week 14 (23/07/2024) film guide section #2.
- #More lists of films
the .carousel class features a carousel of additional films, complete with images and descriptions. 
Figure 1.16 Week 14 (23/07/2024) film guide section #2.
2. Final Result
Final Link: https://jean-lucgodard.netlify.app/
FEEDBACK
Week 11
Specific feedback: The theme works well with the limited use of black and white color palette. For the film section, I can use CSS to make it easier than using JavaScript.
Week 12
Specific feedback: Make sure the texts are aligned with each other, and fix some of the layouts because they look out of place.
REFLECTION
Experience
Throughout this module, I've been experiencing a lot of stress due to my limited knowledge in coding. Unfortunately, my project 2 didn't turn out as well as I had hoped. As a result, I am putting my hopes into my final project to make up for it. At this point, my main goal is just to pass this module.
Observation
When creating a webpage, it's important to understand that the process takes more than just a few days to complete. Proper planning is essential to save time and ensure a successful outcome. In my experience, sketching and prototyping play a crucial role as they allow me to carefully consider and visualize the various visual elements that will be incorporated into the webpage. This stage is significant as it helps me to refine my ideas and make informed decisions about the design and layout of the webpage.
Findings
This is the first time I'm using JavaScript and by using the JavaScript features, the webpage becomes more dynamic and interactive, enhancing the user experience with smooth animations and easy navigation through carousel items.
Comments
Post a Comment