Final Project: Single Web Page

-

SIMON KO JING LIANG
0364359
Bachelors of Design(Honours) in Creative Media
Final Project: Single Web Page

INSTRUCTION



PROGRESS

Sketches


Fig 1


Fig 2


Fig 3

Prototype in Figma

For the prototype, I chose the the second sketch in figure 1 .


Fig 4
Prototype

Evolution of prototype

I changed the Home Page as XueZhiQian image as background. For the Gallery part, I changed to use expand card to express his some concerts and add his albums.


Fig 5

Work in Dreamwaver

HTML 


Fig 6

In the HTML code, I have included a link to the Font Awesome stylesheet to utilize its icons for a visually appealing design.

HOME SECTION



Fig 7

In  the home section, I used the XUEZHIQIAN picture as the background and add the navigation(home, about, gallery, biography and contact) on the right top. The Logo is on the left top. Then, I used 薛之谦(artist's name) as main and his motto as second.


About section


Fig 8

In the about section, I present information about Joker Xue, a Chinese singer-songwriter, including his image and a brief biography to give visitors insights into his artistic journey.

Gallery Section


Fig 9

In the gallery section, I showcase a series of images capturing moments from Joker Xue's concerts and album covers, offering a visual glimpse into his career.


Fig 10
I use the expand cards to show the mages capturing moments from Joker Xue's concerts.


Fig 11

For the albums ,the cover will zoom when the mouse click it.


Fig 12


Biography Section


Fig 13

In the biography section, I provide a detailed timeline of Joker Xue's career, highlighting key milestones and album releases to offer a comprehensive overview of his musical journey.


Footer Section


Fig 14

In the contact section, I have integrated social media links, allowing visitors to connect with Joker Xue on platforms such as Facebook, Instagram, and Weibo.


CSS


Fig 15

In the global styles of the CSS, I set universal attributes like padding, margin, and font families to maintain consistency across the entire webpage.

|
Fig 16

In the navigation styles, I define the appearance of the navigation bar, including the size of the logo, link styles, and hover effects to enhance the user experience.

In the header styles, I focus on the presentation of the header section, specifying background images and size for a visually striking introduction to the webpage.


Fig 17


Fig 18

In the gallery styles, I focus on the expand card effect because it is a little bit difficult to set it up and also the zoom out effect in album covers. For the text I  adjusted the font size, margin, padding and more to make them in normal view, also in image adjustment too.



Fig 19

For the styles in about section and biography section is the same layout and adjustment but the biography section is more different than about section.


Fig 20

In the media queries, I ensure a responsive design for various screen sizes, adjusting layout and font sizes to optimize the viewing experience on different devices.



In the overall design, I aim to create a webpage that not only provides information about Joker Xue but also offers an aesthetically pleasing and user-friendly environment for visitors to explore.


This is the LINK to the page.


Reflection


Experience

Creating the single web page for Joker Xue was a rewarding and insightful experience. The project allowed me to combine my HTML and CSS skills to craft a visually appealing and informative webpage dedicated to an influential Chinese singer-songwriter.

As I delved into the HTML structure, I carefully organized the content to ensure a logical flow from the header to the footer. The navigation bar, designed for easy access to different sections, contributed to a smooth and intuitive user experience. Integrating external libraries, such as Font Awesome for icons and Google Fonts for typography, added sophistication to the design.

Throughout the project, I paid attention to details in the CSS, from color schemes to font choices, to maintain a cohesive and aesthetically pleasing design. Media queries were employed to ensure a responsive layout, optimizing the user experience on various devices.

Observations

The header section, with its captivating background image and well-positioned logo, served as a striking introduction to the webpage. The use of the "Live in the present, strive forward" quote added a personal touch, reflecting Joker Xue's philosophy and creating a connection with the audience.

In the "About" section, the combination of text and imagery painted a vivid picture of Joker Xue's artistic journey. The responsive design ensured that the content adapted seamlessly to different screen sizes, enhancing accessibility for users across various devices.

The "Gallery" section provided a visual feast, offering glimpses of Joker Xue's concerts and album covers. The hover effects added an interactive element, inviting users to explore each image and creating a dynamic user engagement.

The "Biography" section unfolded Joker Xue's career timeline, highlighting key milestones and album releases. This chronological presentation allowed users to understand the evolution of his musical style and the impact he has made on the Chinese music scene.

The "Contact" section integrated social media links, facilitating connections between fans and the artist. The footer provided a concise yet impactful closure to the webpage, reinforcing the branding and acknowledging the creator.

Findings

Crafting this single web page not only honed my technical skills but also deepened my appreciation for the intersection of art and technology. The project provided insights into the importance of organization in HTML structure, the significance of responsive design for accessibility, and the impact of visual elements on user engagement.

The integration of external libraries, such as Font Awesome and Google Fonts, demonstrated how third-party tools can elevate the overall design and user experience. The use of hover effects in the "Gallery" section illustrated how interactivity can enhance user engagement and exploration.

Chronologically presenting Joker Xue's career in the "Biography" section underscored the importance of storytelling in web design. Integrating social media links in the "Contact" section highlighted the role of digital platforms in fostering connections between artists and their fan base.

In conclusion, the project provided practical experience in web development, along with valuable observations about design choices and user interactions. These findings will undoubtedly inform and enhance my approach to future web development projects.

Popular posts from this blog

Final Project

-
Image
SIMON KO JING LIANG 0364359 Bachelor of Design in Creative Media FINAL PROJECT: INFOGRAPHIC VIDEO ANIMATION INSTRUCTION Progression In the first week, we formed a team of 10 people according to the requirements. After that we started to brainstorm our ideas. We decided to use water pollution as the subject for our final project.  Then our leader started to plan our work. Fig 1 Work assigned Fig 2 Contextual Research  We assigned the work in our meeting. Some of us doing sketches, some of us doing coloring and some of us doing animation.  Art Direction & Mood board Once we had assigned the work. We started to do the mood board and art direction. Fig 3 Mood board Fig 4 Art direction Also the timeframe and scenes: https://docs.google.com/spreadsheets/d/18JC6GKoaJ5WfJTMVOtlC9jCHI2721pKqhM6HsHPc7TQ/edit?gid=1942087598#gid=1942087598 Sketches & Wireframe Fig 5 Sketches & Wireframe - Part 1 Fig 6 Sketches & Wireframe - Part 2 Fig 7 Sketches & Wireframe - Pa...
Welcome

Minor Project

-
Image
SIMON KO JING LIANG 0364359 Bachelor of Design (HONS) in Creative Media Minor Project Lecture The first week, Mr. Mike introduces the module and briefing the projects. After that Mr. Mike let us to team up with seven people.  Project Brief Fig 1 Project Brief Instruction Fig 2 Module -PDF Process Week  1 After becoming a group, we started to choose our project of  this semester. The project that our group chosen is Warisan TrueXR project. First of all, we followed the steps started from contextual research. We separated to different part, some of the member search about the client, some of the member search about AR glasses, some of the group member researched about museum negara and so on. Fig 1 Contextual Research We noticed that the venue was at the National Museum, and this project was about immersive experiences, that is, mixed reality, so we went to the museum to learn more about the size of the muse...
Welcome

GAME DEVELOPMENT: Final Project

-
Image
26 December 2024 Simon Ko Jing Liang 0364359 Bachelor of Design (HONS) in Creative Media INSTRUCTION Fig 1 INSTRUCTION-PDF Process DONE Level 1 environment Player Control Coin item script Coin Collect UI YET TO DONE Level 2 environment Level 3 environment Level 1, 2, 3 UI Level 2 & 3 items  Enemies Obstacles (spikes and so on) Character animation
Welcome

Project 1: ANIMATED INFOGRAPHIC POSTER

-
Image
SIMON KO JING LIANG 0364359 Bachelor of Design in Creative Media Instruction Fig 1 Instruction -PDF Part 1: Infographic Poster  Infographic poster  reference  Fig 1 Infographic poster  reference  I choose this infographic poster as my reference to redesign because of its lots of text even though it has enough information about social media and mental health. Since the main target group for my redesign of this poster is young people, it is necessary to simplify the entire information poster and highlight the important information. Below is the important information that appeared in the poster. Fig 2 Infographic : Social Media & Mental Health - PDF Ideas & References Fig 3 Reference 1 Fig 4 Reference 2 Sketches Fig 5 Sketch 1 This is the first sketch that I made but from the feedback of Mr. Shamsul, the layout is not organized and didn't see the design principal such as contrast in the sketch. Mr. Shamsul suggested me to find some good references an...
Welcome

Final Project

-
Image
26 December 2024 Simon Ko Jing Liang 0364359 Bachelor of Design (HONS) in Creative Media INSTRUCTION Process When the prototype was working which is the AR map experiential, I added multiple 3D attractions in Unity to make the experiential more interesting but cannot import too much 3D model. I had imported more 3D model before but when reopen the project, all of the 3D model will disappear or some materials had missing. AR SCENE Fig 1 For AR scene, I created a Canvas and  added a panel then added a back button and text in the panel. For the back button can be click and back to Discover scene.  Fig 2 After that I created an image target that I had downloaded the image target from database(Vuforia).  Fig 3 Then I imported the 3D Model which is The Great Wall. Then I adjust its scale and its position so that when the camera scan the image target, the 3D model can be appear at the right position and the user can interact with it.  Fig 4 This is the Liberty...
Welcome