May 2024

ZHANG HANYUAN/0363727/Bachelor of Design (Honors) in Creative Media

Interactive Design/Taylors University

Final Project - Creating a Single-Page Website

INSTRUCTIONS

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.

Final Project - Creating a Single-Page Website

Before the final project started, Teacher Hamimi asked us to fill out a form to determine the theme we wanted to do. The theme I decided on was - game webpage. Then I started looking for inspiration.

1.Inspiration

I found some inspiration on Pinterest, and then I went to several game websites to look for inspiration. I wanted to make a game introduction website for a 3A large-scale game, so I found several popular game official websites for reference based on 3A large-scale games.

fig.1.1 .Pinterest reference

fig.1.2 Game official website reference

2.Sketch

This is my initial wireframe sketch of the website layout. The design includes the following parts:

Header: With the game logo and navigation links.

Hero Section: Featuring a prominent visual and a cinematic trailer.

Introduce Section: Providing detailed information about the game.

Gallery: Displaying screenshots and concept art.

News Section: Listing updates and announcements.

Buy Section: Offering links to purchase the game.

Footer: Including social media links and additional navigation.

fig.2.1 Web page layout draft 1

 

Then, a little more refined...

fig.2.2 Web page layout draft 2

3.Process   

Content

‘Black Myth: Wukong’is an action role-playing game developed by Game Science Studio, a Chinese game development company. The game is inspired by the Chinese classic Journey to the West, and the protagonist is Sun Wukong. The game has attracted the attention of players around the world, especially because of its beautiful graphics, smooth combat system and rich story content.

In the game, players will play as Sun Wukong, explore a world full of fantasy elements, and face various enemies and challenges. The trailer of the game shows rich Chinese mythological elements, including magical spells, mythical beasts and magnificent scenery.

Initial conception in Figma

fig.3.1 figma Initial concept

Because this game is a pre-sale game, there are very few resources available, but I still found high-definition wallpapers on some websites to use as web page backgrounds or content in them.

In the second week of the final project, Mr. Hamimi wanted to see the draft of the framework we made. I sent him the link of the Adobe Dreamweaver framework I made. Hamimi asked me to correct a few issues: 1. The standard color of the logo was too light and was covered by the color of the header. I asked him to change it to a brighter color. 2. I added two videos to the web design, and he asked me to delete one and only keep one video because if I open the website with a mobile phone, it will freeze and affect the customer experience. 3. Remember to add hyperlinks.

  

fig.3.2 Folder

It uses 5 sections and CTA to introduce the topic of interest.

I placed the navigation bar inside the logo and made it droopy.

fig.3.3 Navigation Bar

Google Fonts

fig.3.4 Fonts Code

fig.3.5 Specimen Regular 400

HTML

CSS

JS

Different device response experience

Final Project - Game Website LINK

https://blackmythwukong-gameintroduction.netlify.app/

Experience:

During the final project, I gained more experience in using HTML, CSS, and JavaScript. Although it was challenging, I successfully created code that matched the prototype design. This project deepened my understanding of front-end development practices and improved my ability to implement layouts and interactive elements.

Observations: 

It is beneficial to reassess and make necessary improvements to the prototype design before starting to code. Optimizing the design can reduce the need for adjustments during coding. I also observed that interactive elements like hover effects can significantly enhance user engagement.

Discoveries: 

I found that reviewing fundamental HTML and CSS knowledge is crucial for efficient coding, as it helps in resolving issues more easily. Additionally, further research online allowed me to discover new technologies and expand my knowledge. For instance, CSS animation tags can be used to add dynamic effects to a website, making the user experience more engaging. The process of self-learning JavaScript was challenging, but it was essential for enhancing my ability to solve complex problems.