Final Project / Design, Exploration and Application

02 Jul 2024 - 03 Aug 2024

Shim Yi Xun || 0363292
Bachelor of Design (Honours) in Creative Media
  Interactive Design GCD 60904  

Final Project - Design, Exploration and Application

---

  Content Jumplink  

> INSTRUCTION

• Weekly Progress

> FEEDBACK

> REFLECTION 

---

  Instruction  

  Project 3 / Creating a Single-Page Website  

Overview:

In this web design project, you will create a one-page website dedicated to your favorite topic. This project will help you develop your web design and development skills while allowing you to demonstrate your passion for your chosen topic.

Requirements:

Artist Choice: 
Choose your favorite theme as the theme for your website. Make sure you are genuinely interested in the topic as this will help you create a more attractive website. Determine the goals of the website to ensure its content is clear.

Content: 
Your content should have at least 5 sections explaining topics of interest. It should be attractive and meaningful to the subject. You should also add a CTA button that reflects the content.

Design Elements: 
Choose a colour 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:

I decided to create a website for my favorite game, Genshin Impact. However, I hesitated on whether I should write an introduction about the game's lore or just create a wiki for a specific character. After discussing this with Mr. Shamsul, he suggested that I could focus on a particular character from the game.
Sketches of the wireframe:

Prototype:

Move on to Figma prototype design. I started with the hero section, which represents Kamisato's attributes and identity.

In the Section 2, I detailed Kamisato’s background story. Due to the size of the text, I simplified this section to prevent clutter in the interface. I added an image of the Japanese Camellia flower on the left, which is the crest of the Kamisato family.

The next section will showcase Kamisato's talents. I've included combat showcase GIFs for each skill, along with an icon to better represent each skill.

Additional talents.

Section 4 is about Kamisato's weapon and artifacts.

Section 5, which is also the last section, is Kamisato's teaser and demo. I've set the CTA button on the "view more". Finally followed by the footer, including the official website and those social media.

Create Website:

After my prototype design was approved by Mr. Shamsul, I started to set up the website.

HTML process:

CSS process:

Some parts of my design have changed a bit due to the visual aesthetic and consideration. Such as the GIFs design in the Talent section. Based on my prototype, it should have a frame on the GIF, but later I found that it would look better without a frame. 

In addition to that, is the footer. I've redesigned the footer since I think the initial design is monotonous. Thus, I added a background image for it.

Final Outcome:

Link to view for the website:

https://kamisato-ayato-wiki.netlify.app/

---

  Feedback  

WEEK 11:
  General  
-

  Specific  
You may just do a wiki for a specific character since if you do for a whole game's lore, it would be massive information which might overwhelm you. Besides, you can include a logo that represents your character.

WEEK 12:

  General  
-
  Specific  
Overall the prototype looks nice. When you move on to coding, be careful of the position of your character in the Attribute section to ensure that he won't covered by the attribute table as well as the navigation bar. In this case, you can try to use the position: absolute & relative, and also the z-index to adjust it. Furthermore, in the Character Teaser section, you can either embed the YouTube video into it or link to the YouTube website, if you want to choose the second way, make sure that you have to write a code which could open a new tab when you click the link.

WEEK 13:

  General  
-
  Specific  
Need to note that if you want to use Bootstrap, you have to put Bootstrap's CSS file links into your HTML so that you will be able to use it. 

---

 Reflection  

I think the most fun of the Final Project is that we can create a website based on any topic we like. Of course, at the same time, coding is still the most suffering part. The challenge I faced with this project was a design where there were a lot of overlapping elements in my website, such as the Attribute section, Talents section and the Weapon & Artifacts section. But this was a great opportunity to gain a better understanding of CSS.