Task 3: Final Project - Single Page Website

30/10/2023 - 10/12/2023 Week 10 - Week 14
Reema Arif Hamza / 0362792
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 3: Final Project - Single Page Website 

Content

Lectures

Week 10: Final Project Consultation.
Week 11: Final Project Consultation.
Week 12: Public Holiday Class Cancelled.
Week 13: Final Project Consultation.
Week 14: Final Project Consultation.

Instructions

Task 3: Final Project - Single Page Website 

In this web design project, you will create a single-page website dedicated to your favorite artist. This project will help you develop your web design and development skills while allowing you to showcase your passion for the artist of your choice.

Process

I chose Olivia Rodrigo as my favorite artist to create a website for. I plan to make a clean website with a purple color scheme. For the typography, I want a minimal and clean typeface. 

Fig. 1.1 Website Design Moodboard, Week 11 (06/11/2023)

Fig. 1.2 Artist Aesthetic Moodboard, Week 11 (06/11/2023)

I made 5 sketches for the prototype websites, after showing them to Mr.Shamsul he recommended using the third one for the final website. So I made a final sketch referencing the 3rd design but adjusting the gallery section to be a carousel. 

Fig. 1.3 Sketches, Week 11 (06/11/2023)

Fig. 1.4 Final Sketch, Week 11 (06/11/2023)

I made a simple prototype on Figma, but later on, I referred to my sketch (fig.1.4) more to create my website. Mr. Shamsul provided us with a template we could build on for our website, it was a simple layout that would be good as a foundation for the design I had in mind. Therefore, I used the template to begin building my website. 

Fig. 1.5 Figma Prototype and Template Provided, Week 11 (06/11/2023)

I began by removing the logo and adding three new sections (quote, biography, and Spotify). Then I adjusted my navigation menu to follow and adjusted the colors according to my color scheme of black, white, and purple. 

Fig. 1.6 Navigation Bar HTML & CSS, Week 12 (13/11/2023)

In the home section, I added the name of my artist and a tagline. In the About section, I made two columns and put them in one row. I added a description about Olivia Rodrigo and why she's my favorite artist in the About section. Then I adjust the background color, font size, and padding for each column to match my envisioned design. 

Fig. 1.7 Home and About section HTML & CSS, Week 12 (13/11/2023)

In the Quote section, I added a quote from Olivia Rodrigo that resonated with me. In the CSS I adjusted the background colors for each section, for the Quote section I adjusted the font size and weight to make it stand out more. In the Home section, I added a background image and put a border around it. 


Fig. 1.8 Quote and Sections HTML & CSS, Week 12 (13/11/2023)

For my Gallery section, I wanted to include an Image Slider. I found a tutorial online and followed in, while not exactly like my drawing it still matched my design. I added all my images into the HTML code and the Java script into the body as instructed. 

Fig. 1.9 Galley Image Slider HTML and Java Script, Week 13 (20/11/2023)

I then added the CSS code and adjusted it for my theme. Changing the color of the wrapper to black to match the background. And making the buttons purple to stand out. 

Fig. 1.10 Galley Image Slider CSS, Week 13 (20/11/2023)

In my Biography section, I briefly described Olivia Rodrigo's career and I made a simple horizontal timeline about her career key points. I inserted the image of the timeline in a div after the description. In the Spotify section, I create 2 columns in 1 row. The left column follows the same CSS as the one in my About section. The right column has an embedded Spotify widget so users can preview her songs. I adjust the CSS for padding all around. 

Fig. 1.11 Biography and Spotify Section HTML & CSS, Week 13 (20/11/2023)

For the Contact section, I create 2 columns in 1 row. The left column contains the heading and social media icons which are hyperlinked to the following sites. In the right column, I created a simple form to submit their name and email, where they could then receive a newsletter. In the CSS I adjust the padding for the Heading and social media icons. I then changed the color and font of the form to match the rest of my website.  To create the form I followed a tutorial online. 

Fig. 1.12  Contact and Footer HTML, Week 14 (27/11/2023)

Fig. 1.13 Contact and Footer CSS, Week 14 (27/11/2023)

To make my website responsive on different screens I added a breakpoint and made everything display as a block. All my content is also centre-aligned for easier reading on phone screens. I also reduced the size of my h1 heading as it was too large for phone screens. Lastly, I adjusted the gap in the navigation bar to fit all 5 options on a phone screen. After this, I adjusted my HTML and CSS in small ways to make my website smoother and more interactive. 

Fig. 1.14 Responsive CSS, Week 14 (27/11/2023)

Final


Fig. 2.1 Final Webpage Full Screenshot, Week 14 (27/11/2023)

Fig. 2.2 Final Webpage on iPhone XR Screenshot, Week 14 (27/11/2023)

Fig. 2.3 Final HTML&JS PDF, Week 14 (27/11/2023)

Fig. 2.4 Final CSS PDF, Week 14 (27/11/2023)

Reflection

During this project, I was able to learn a lot of new skills through online tutorials. Things like an image slider or form were easily accessible and simple to implement on my website. I had fun experimenting with different elements to create a visually impactful and interactive website. I feel that my website was able to translate Olivia Rodrigo's Aesthetic and clearly display her work. I'm proud of the website I created, it was very much a long process. I worked on each section bit by bit and found myself going back through my code to adjust it multiple times. But the end result proved to be satisfying. 

Comments

Post a Comment