Interactive Design - Creating a Single Page Website (Final Project)

4/7/2024 - 4/8/2024 (Week 11 - Week 15)

Aisya Diva Anwagodsa (0365505)

Interactive Design / Bachelor of Design (Hons) in Creative Media

Final Project - Single Page Website

JUMP LINK

INSTRUCTION

🔝

PROPOSAL & PROTOTYPE

Fig. 1.1 Proposal slide

(Week 12)

Fig. 1.2 Wireframe sketch
(Week 12)

Mr Shamsul also required us to make 5 wireframe sketches, from the selected frame, there are changes based on Mr. Shamsul's feedback. I was planning to make a timeline element for my website, but Mr. Shamsul said I could use cards because it will looks better.

Fig. 1.3 Prototype 1

(Week 13)

This is the first prototype I created, but I feel like it does not pull the art deco style, so I redo it by adding graphic elements that I've designed.

Fig. 1.4 Prototype 2

(Week 14)

This is the final prototype for my design, after revising it, it looked better.

🔝

PROCESS

Adobe Illustrator

Before starting with HTML and CSS, I started to create my graphic elements on Adobe Illustrator since I'll be using an Art Deco theme and a lot of cards on my website.

Fig. 2.1 Making character
(31/7/24)

I started with creating the main character here, which is Hercule Poirot. I am using the figure of David Suchet as a reference for my character design, which can be seen in picture one, I trace the shape of the picture. I only put eyebrows and a mustache as facial features, because there are a lot of actors who played Hercule Poirot, I thought it would be better if I only kept the iconic mustache and eyebrows so the face wouldn't be scary.

Fig. 2.3 Pattern & Card design
(31/7/24)

Next, is designing the background picture. I wanted to create a 20s art Deco wallpaper pattern, so I used a circular shape and 1/4 part of it, and then I arranged it into my desired pattern. To make the pattern applicable in Adobe Illustrator, I am using a pattern feature that could generate elements into a pattern.

Fig. 2.4 Great Gatsby poster
(31/7/24)

For the cards, I was inspired by the look of the 'The Great Gatsby' poster, in creating cards, I mainly used line and square shapes. Since it's art deco, I applied a lot of gradient into my color setting, mainly to make the gold color. Other elements that I created on Adobe Illustrator were the mustache, hat, and puzzle icon that I will use in the facts section, the method that I use is pretty much the same as creating Hercule's figure, using a pen tool.

Adobe Dreamweaver

Since I am using HTML and CSS, I have to create a folder containing images, and font (because I will use a font that I downloaded from the website, click here to see). All files are secure in one folder, the next step is to link the HTML and CSS files.

On the HTML file, I set up the code on the head section using <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0"> to make the website responsive, I also linked the CSS file, font, icons link on the head section.

Fig. 2.5 Head section HTML
(31/7/24)

Header Section

To create the header, I will include all of the elements in the header section, where I put the logo, navigation links, CTA button, title, and description of my website. To create a navigation bar, I used ul tags and then set the display to an inline block. My struggle was to make the navigation bar responsive, I had to use Java script and place it at the bottom of my HTML before the body close tag. I watched a tutorial on YouTube, basically, the function of Java Script is to make the navigation bar close and open when we hit the button. I had to use variations inside the Java Script, so the open and close navigation would work.

Fig. 2.6 Navigation bar section
(31/7/24)

I also added a hover effect using a CSS file, I set up the hover effect to 100% so that when the cursor touched the navigation, it would be underlined. The picture below is the CSS file setting for the navigation bar.

Fig. 2.7 Navigation bar CSS file
(31/7/24)

For the picture, text, and CTA button, I placed it inside one division tag.

Fig. 2.8 Header section HTML
(31/7/24)

To adjust the image and text position, I played with the margin. To make it responsive, I also set up the width of the picture in a media query and set the flex direction into the column.

Fig. 2.9 Header section CSS
(31/7/24)

Fig. 2.10 Media query to make header responsive
(31/7/24)

Facts Section

In this section, I applied for 3 cards with hover effect. First, I grouped all of the elements using a section tag and then wrapped the card with a division tag. Before that, I marked all of my sections, so whenever I want to change them, I won't be confused.

For the HTML structure of the facts section, I have <section> element with 'facts' class and ID 'facts' to (the ID is for the navigation bar, so it will be linked to it). Insite the section there are:

<h1> elements for the title.
<p> element for description.
<div> element with 'row' class that contains columns and card container.

Fig. 2.11 Facts section HTML
(1/7/24)

Inside the card container, I put card elements, including the front and the back of it, because I'll be using a flipping hover effect. On the back of the card, I have a heading and paragraph to put my content.

Fig. 2.12 Card element CSS
(1/7/24)

For the section, I set it up with a width of 80%, margin: auto, align the text to the center, and padding at the top 50px. For the typographic style, I use the font 'AC Mountain' for the header and 'Poppins for the paragraph, this style is also applied to the card element. For the card elements, I use ': hover' pseudo-class style to change the cursor to a pointer and rotate the card 180 degrees on the Y-axis on hover.

Actors Section

This section will display the actors who played Hercule Poirot. I used cards with an overlay hover effect. The HTML included, <h1> tag, paragraph, and division tag that contains four card ('.card-area'). Fo the cards, each of them have image, <div> element with a class of "overlay" that contains:

An <h1> element with a title
A <p> element with a short description
An <a> element with a link to learn more about the actor's portrayal

Fig. 2.13 Actor section HTML
(1/8/24)

The CSS code targets the HTML elements using selectors and applies styles to the cards.

Fig. 2.14 Card style CSS
(1/8/24)

Fig. 2.15 Card style CSS
(1/8/24)

Card style:

For the card styles, I used the '.box' selector to target the <div> element with a class of "box".
border-radius: 10px; sets the border radius to 10 pixels.
position: relative; sets the position property to relative.
overflow: hidden; sets the overflow property to hidden.
box-shadow: 5px 5px 15px rgba(194, 143, 66, 0.25); sets a box shadow effect.

Image Styles

.box img selector targets the <img> element inside the box.
width: 100%; sets the image width to 100% of the parent element.
border-radius: 10px; sets the border radius to 10 pixels.
display: block; sets the display property to block.
transition: transform 0.5s; sets a transition effect for the image.

Overlay Style

.overlay selector targets the <div> element with a class of "overlay".
height: 0; sets the initial height to 0.
width: 100%; sets the width to 100% of the parent element.
background: linear-gradient(transparent, #022334 58%); sets a linear gradient background color. for the overlay.
border-radius: 10px; sets the border radius to 10 pixels.
position: absolute; sets the position property to absolute.
left: 0; sets the left position to 0.
bottom: 0; sets the bottom position to 0.
overflow: hidden; sets the overflow property to hidden.

Cases Section

HTML Structure

Fig. 2.16 Cases HTML structure
(1/8/24)

The HTML code defines a section with a class of "row-cases" and an ID of "row-cases". This section contains:

An <h1> element with a title as "ICONIC CASES".
A <p> element introduces to Hercule Poirot's iconic cases.
A <div> element with a class of "container" that contains three cards (.card2).

Each card has:

An <img> element with a source image and an alt text.
An <h2> element with a title.
A <p> element with a short description.
A <button> element with a link to a trailer.

The focus of this website was to apply the transition to the cards and embedding trailer video link into the button:

Fig. 2.17 Card & container CSS
(1/8/24)

Fig. 2.18 Button CSS
(1/8/24)

Container Styles

'.container selector' targets the <div> element with a class of "container".
display: flex; sets the display property to flex.
flex-wrap: wrap; allows the flex items to wrap to a new line.
justify-content: center; centers the flex items horizontally.
align-items: center; centers the flex items vertically.
width: 100%; sets the width to 100% of the parent element.
max-width: 1200px; sets the maximum width to 1200 pixels.
margin: 0 auto; centers the container horizontally.
border-radius: 0px 0px 10px 10px; sets the border radius to 10 pixels on the bottom left and right corners (mostly I set the border radius to get rounder looks).

Card Styles

'.card2' selector targets the <div> element with a class of "card2".
background-color: #fff; sets the background color to white.
border: 1px solid #ddd; sets a 1-pixel solid border with a color of #ddd.
border-radius: 10px; sets the border radius to 10 pixels.
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); sets a box shadow effect.
width: 30%; sets the width to 30% of the parent element.
margin: 10px; adds a margin to the card.
text-align: center; centers the text horizontally.
overflow: hidden; sets the overflow property to hidden.

Quiz Section

Fig. 2.19 Quiz Section HTML & CSS
(1/8/24)

The HTML code sets up a section named "quiz" with a matching ID. Inside this section, there's a <div> with a class of "horizontal-card" and another <div> with a class of "content."

The "horizontal card" <div> is styled with a background color of #C28F42 and a height of 400px. The "content" <div> includes:

a <h2> heading that says "TAKE A QUIZ,"
a <p> paragraph with a short intro to the quiz, and
a <button> that says "GET STARTED." This button links to a Google Forms quiz.

The CSS code contains the "quiz" class to style the background, padding, etc. The "horizontal card" <div> is 400px tall, centers its content, and aligns text to the center. "Content" <div> has white text (#fff), 20px padding, and is positioned relatively.

The "content::before" pseudo-element adds a semi-transparent background to make the text easier to read, because the background has motives so I decided to dim the image by applying a semi-transparent background. The "content h2" styles the heading with a font size of 2em, a font family of "mountain," and a font-weight of 100. The "content p" styles the paragraph with a font size of 1.8em and the "Poppins" font family, sans-serif.

The "content a" selector ensures the link stays on top with a z-index of 1. The "content button" styles the button with padding of 10px 20px, rounded corners (5px border-radius), background color of #C28F42, white text, and a smooth background-color transition over 0.3 seconds.

Media queries adjust the height, font size, and padding for smaller screens to keep everything looking good.

Join Us Section

For the join section, I use card with heading title "Unite With Poirot Admirers." The heading was styled with a font size of 50 pixels, font weight of 100, and using 'AC Mountain' font family. The text is centered horizontally and has a margin top of 200 pixels and a margin bottom of -180 pixels.

Fig. 2.20 Join us HTML
(1/8/24)

The HTML code defines a section with a class of "join" and an ID of "join". This section contains:

An <h1> element with the title "Unite with Poirot Admirers"
A <div> element with a class of "card-container3" that contains a <div> element with a class of "card3"

The "card3" <div> element contains:

An <h2> element with the title "JOIN US"
A <form> element with an ID of "joinForm" that contains:

Two <input> elements for name and email
A <button> element with the text "SUBMIT"

A <p> element with an ID of "thankYouMessage" that displays a thank you message after submission

A <footer> element that contains:

A <div> element with a class of "social-icons" that contains links to social media platforms
A <div> element with a class of "copyright" that displays the copyright information

CSS Style:

Fig. 2.21 Card CSS style
(1/8/24)

Join Section Styles:

.join h1 selector targets the <h1> element inside the join section
font-size: 50px; sets the font size to 50 pixels
font-weight: 100; sets the font weight to 100
font-family: mountain; sets the font family to "mountain"
text-align: center; centers the text horizontally
margin-top: 200px; adds margin top to the heading
margin-bottom: -180px; adds margin bottom to the heading
color: #FFFFFF; sets the text color to white

Card Container Styles:

.card-container3 selector targets the <div> element with a class of "card-container3"
display: flex; sets the display property to flex
justify-content: center; centers the flex items horizontally
align-items: center; centers the flex items vertically
height: 100vh; sets the height to 100% of the viewport height

Card Styles:

.card3 selector targets the <div> element with a class of "card3"
background-color: white; sets the background color to white
padding: 20px; adds padding to the card
border-radius: 10px; sets the border radius to 10 pixels
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); sets a box shadow effect
width: 90%; sets the width to 90% of the parent element
max-width: 500px; sets the maximum width to 500 pixels
text-align: center; centers the text horizontally
box-sizing: border-box; ensures padding is included in the width

I also added Java Script to make the form work:

Fig. 2.22 Java Script for the form
(2/8/24)

Footer

Fig. 2.23 Footer HTML setting
(3/8/24)

The last part was footer, this part is the closing for my website. It contains social media that will direct user into the Hercule Poirot's fanpage. For the icons, I used a linked file of 'FontAwesome' with that file, we could get any icons that we want to put on our website.

CSS setting:

Fig. 2.24 Footer CSS Setting

Footer section

padding: 20 px
Margin-bottom: -20px
Margin-top: -5-px

Social icons

The social media links are organized within a container classed as "social-icons", which is given a margin of 10 pixels to provide some much-needed space.

The Copyright Notice

Margin and Font Size: The copyright notice is styled with a margin top of 10 pixels to give it some space, and a font size of 0.9em to make it slightly smaller than the rest of the text.
Centered Text: The text is centered horizontally to create a sense of balance and professionalism.

🔝

FINAL RESULT

WEBSITE LINK

Fig. 3.1 The Enigmatic Poirot pdf

(3/8/24)

Fig. 3.2 The Enigmatic Poirot HTML

(3/8/24)

Fig. 3.4 The Enigmatic Poirot CSS

(3/8/24)

🔝

FEEDBACK

Week 12:

- Change the title, it can focus on the detective and highlight 3 cases.

- Add copyright at the bottom.

- Don't put too much text on the header.

- The website is better built based on the 20s or Hercule Poirot era, and can use Art Deco style.

Week 13:

- Match the gradient color with the header.

- Can continue to work with the website.

🔝

REFLECTION

Experience:

One word, exhausting. But hats off to people who worked in this area, I spent days coding (mainly finding out how to code) and watching A LOT of tutorial videos. Fail? Yeah, it happened, but then I tried again, just so I could finish this website on time. Not just finish, I want my website to look good.

I've seen people's work and they did a great job. My friends in BDCM are one of my motivation, seeing their work makes me want to work harder. This project is worth it because I learned a lot of things. But I also realized that my understanding of coding (theoretically) is not good enough. But I'd love to learn more and hoping in the next module I can do better.

Observation:

I realized that building a website can be tricky because we should pay attention and be careful. Specifically, try to avoid typographical errors because they could change your website or element drastically and it could lead to confusion because there's a lot of code. My friend called it a silly mistake because it took a lot of time to figure out where is the mistake. And then the mistake is just because you did not type '/' inside the closing tag.

Findings:

In my process, naming the section or giving marks before starting another section is very useful. For a beginner, coding is not something that you can do in one day, it will exhaust you, don't underestimate it. Because, even though there are a million tutorial videos, it will drain your energy because you have to watch the video and follow the steps and it requires a lot of screen time that could make your eyes tired. I am glad that I could finish my website on time, another good point about this project is I gained new knowledge when I'm doing the work and it helped me to deepen my understanding about CSS and HTML file.

🔝

Search This Blog

Aisya Diva Anwagodsa (0365505)

Interactive Design - Creating a Single Page Website (Final Project)

Comments

Post a Comment

Popular posts from this blog

Advanced Typography - Task 1: Typographic System - Type & Play

Interactive Design - Exercises

Advanced Typography - Task 2: Key Artwork & Collateral