2024.06.27-2024.08.03
Rachel Yeo Rong Qing / 0368901
Interactive Design / Bachelor of Design (HONS) in Creative Media
Final Project
CONTENT
INSTRUCTIONS
Final Project : Creating A Single Page-Website
In this web design project, we need to create a single-page website
dedicated to our favorite topic. This project will help us develop our web
design and development skills while allowing us to showcase our passion
for the topic of our 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.
Wireframe
Before we start to code our website, Mr. Shamsul asked us to choose a topic and create the wireframe first. I like to watch anime very much therefore I decide to choose my favorite character, Kanda Yu from D.Gray-Man by Katsura Hoshino as my website topic.
The picture below has shown my wireframe.
Prototype
Based on the wireframe #5, I have use Figma to create my prototype. I decide to use blue color as the main color and red color as the ascent color for my website because that is the color scheme of Kanda.
First, I start with my hero section. I don't want my hero section looks too complicated so I only put the picture of Kanda, name of anime, name of character and some picture at here only. Follow to the instruction of Mr. Shamsul, I also add a Call To Action (CTA) button below the picture.
Due to this is a action anime, Kanda has his weapon as his partner also, so the third session is the description of his weapon. Based on the feedback given by Mr. Shamsul, I decide to put the picture of Kanda using the weapon indeed of only a weapon picture to let audience can know that is his weapon.
By following to it is his skills. I decide to arrange the skills as a card to showcase the picture of skills and the description together.
The fifth session is the storyline of Kanda. At the first I was thinking the storyline that I put at there should be the storyline of anime or the storyline of Kanda only, but due to this is a Kanda Yu fan page so I decide to choose Kanda's storylne.
Last session is the CTA session.
Below are the overview of my prototype.
Html / CSS
Next, I start to code the html in Dreamweaver by following the layout in the prototype.
After the html is done, I style it by using CSS.
Due to the hero section looks too empty in html, I have add the picture of Kanda's Golem and also add a short overview of the anime. The overview part I have add a read more button so it won't got a lot of word at the hero section.
For the picture in the hero section, I have use the animation code to let the picture will rotate automaticaolly.
For the biography session, I have add the session title compare to my prototype.
The rest part I just code it by following to the prototype. After I double check and make sure there is no anything that I need to adjust anymore, I upload it into netlify.
Final Outcome
Below are the link to my website.
https://rachel0368901-final.netlify.app/
FEEDBACK
Week 11 :
General Feedback : Fill in the topic in the google sheet.
Week 12 :
General Feedback : Should got 5 wireframe.
Specific Feedback : This wireframe looks not good enough, try to come through a new wireframe.
General Feedback : Prototype looks ok, proceed to coding.
Week 14 :
General Feedback : Use bootstrap in coding.
Week 15 :
General Feedback : -
REFLECTIONS
This final project has been a truly transformative experience to me. it has offering profound insights into web design and development. At the first, I was stuck in the prototype session because i dont know how should my website looks like. By following the invaluable guidance from Mr. Shamsul, I has managed to overcome these obstacles and successfully create a cohesive and engaging single-page website dedicated to Kanda Yu from "D.Gray-Man."
This project has required me to immersive deeply into responsive and interactive elements, which not only honed my technical skills but also fostered my creativity. Through this process, I have learned that the importance of perseverance, collaboration and attention to detail. The satisfaction of seeing my design come to life was immensely rewarding and significantly boosted my confidence in using Figma and Dreamweaver. This experience has underscored the value of stepping out of my comfort zone and embracing new challenges, leading to substantial personal and professional growth.
Comments
Post a Comment