29/06/2024 - 03/08/2024 ( Week 10 - Week 15 )Chong Wee Han / 0368863
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Final Project - Creating a Single-Page Website
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1_LR3FnphEcPH66w9nxaUtexUfHB5F2h-/preview" width="640" height="480" allow="autoplay"></iframe>
Project 3 - Creating a Single-Page Website
Requirements for project 3
Project Overview:
In this web design project, you will create a single-page website dedicated to your favorite topic. This project will help you develop your web design and development skills while allowing you to showcase your passion for the topic of your choice.
Project Requirements:
Artist Selection: Choose your favorite topic as the subject of your website. Ensure you are genuinely interested in the topic, as this will help you create a more engaging website. Decide the site's goal to ensure that the site has clear content.
Content:
Your content should have at least 5 sections that explain the topic of interest. It should engaging and significant to the topic. You should also include one CTA button that reflects the content.
Design Elements:
Choose a color scheme and fonts that reflect the artist's style or your taste.
Ensure a visually appealing layout with a balanced use of text and multimedia.
Create a responsive design that adapts to different screen sizes (mobile-friendly).
Navigation: Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.
Interactivity: Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.
I had done a proposal to determine my font choice, colour scheme and also included my visual inspiration to be more convenient doing the rest of the jobs. I first did 5 wireframes but after I got the feedback from Mr. Shamsul, he asked me to do 2 more because the previous are not consistent in shapes. Mr. Shamsul approved the seventh one then I started doing my prototype in Figma. He also suggested me look at 2 well-designed websites which are https://mariahcarey.com/ and https://boyziimen.com/.
Proposal
I had my first attempt on the prototype but I'm not very satisfied with this version so I made another attempt on it.
Final Prototype
I had a second attempt at it and changed the hero section, some layout and the background. I added the images at the awards part, it was Ariana Grande's first album cover to the latest album cover.
Process
As usual, I put all of my used files and images folder into one folder.
 |
| Figure 1.1 Folder |
I edited some images in Illustrator before putting them in Dreamweaver. |
| Figure 1.2 Adobe Illustrator |
Part 1: Header
I had 6 sections on my website's header which are Home, Fashion, About, Career, Awards and Subscription.
 |
Figure 1.3 Outcome
|
 |
Figure 1.4 HTML
|
 |
| Figure 1.5 CSS |
Part 2 : Button and Fashion sectionI also added a button "Let's Get Started" and linked to our Fashion section. In the "Best Iconic Fashion Looks" images are also interactively, I included hover effects on every image in that section.
Part 5 : Awards section
This would be the main part of my website so I decided to add the image slider in this section, I found a tutorial on YouTube and I tried it on my website.
 |
Figure 5.1 YouTube tutorial
|
 |
| Figure 5.2 Outcome |
 |
| Figure 5.3 HTML |
 |
| Figure 5.4 CSS |
 |
| Figure 5.5 CSS |
 |
| Figure 5.6 CSS |
Part 6: Footer
In the footer, there is a form that can be joined in our newsletter and the "Click Here" button is also linked to Ariana Grande's Instagram.
 |
| Figure 6.1 Outcome |
 |
Figure 6.2 HTML
|
 |
Figure 6.3 CSS
 | Figure 6.4 CSS
|
|
 |
| Figure 6.5 CSS |
Responsive Website
 |
| Figure 7.1 Responsive Website |
Demo video
Final Submission - Final Project
REFLECTION The final project I had included a lot of coding skills that I learned in these past 14 weeks and I really enhanced a lot of knowledge from this module. As a coding newbie from the start, I'm surprised that I can do a website now. Although I faced a lot of difficulties when doing this project, kept revising from the wireframe to the coding part to achieve the final results, but I really gained a lot of opportunities to memorise my mistakes through this journey. I'm satisfied with the outcome and I also think the whole process is very interesting and also increases my interest in website design. This is a memorable experience for me to create a fan page for my favourite singer and also helpfully develop my coding skills.
Comments
Post a Comment