INTERACTIVE DESIGN - FINAL PROJECT

December 06, 2023

INTERACTIVE DESIGN - FINAL PROJECT

30.10.2023 - 1.12.2023/Week 8-Week 14
Lim Jun Teng/ 0362890
Interactive Design / Bachelor of Design (Hon) in Creative Media
Final Project

INSTRUCTION

Final Project

Project Overview:

In this web design project, you will create a single-page website dedicated to your favorite artist. This project will help you develop your web design and development skills while allowing you to showcase your passion for the artist of your choice.

Project Requirements:

Artist Selection: Choose your favorite artist as the subject of your website. It can be a musician, painter, actor, or any other creative individual or group. Ensure you have a genuine interest in the artist, as this will help you create a more engaging website.

Content:

Your single-page website should include the following sections:

Header with the artist's name and a brief tagline.

Introduction: Provide an overview of the artist's background and why you admire them.

Gallery: Showcase images, videos, or other multimedia related to the artist's work.

Biography: Include a brief biography or description of the artist's life and career.

Contact Information: If applicable, include contact details or links to the artist's social media profiles.

Design Elements:

Choose a color scheme and fonts that reflect the artist's style or your personal 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.

References

CREATING A SINGLE PAGE WEBSITE FOR YOUR FAVOURITE ARTIST : JACKSON YEE

I choose Jackson Yee, also known as Yiyang Qianxi, has garnered immense popularity for his exceptional talent and versatility in the realms of singing, acting, and dancing. With a youthful and charismatic appeal, he resonates particularly well with younger audiences, earning widespread admiration. Achieving significant success in the entertainment industry, both as a member of the popular boy band TFBoys and as a solo artist, Yee's influence extends across music, film, and television. His distinct fashion sense and trendsetting style further contribute to his popularity. Active on social media, Yee engages directly with fans, offering glimpses into his life and career, fostering a strong and loyal following. Maintaining a positive public image through professionalism and dedication, Jackson Yee has not only become a household name in China but has also gained international recognition, solidifying his status as a prominent figure in the global entertainment landscape.

IMAGE :

NETLIFY LINK :

https://rad-twilight-38388a.netlify.app/

HTML Code :

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div><a href="../empty.html">ABOUT</a></div>

<div>

</div>

<div class="name">JACKSON YEE</div>

</div>

</div>

<div class="container_title">JACKSON YEE</div>

The thing I most want to do now is not to disappoint myself, to do what I love, and not follow the path others think I should take. Because in the process of growth, being able to do what brings the most comfort and joy to oneself has already become the best version of oneself.

</div>

</div>

</div>

<div class="left3"><h1>Jackson Yee was born in Hongmen City, Huaihua, Hunan. In his hometown of Huaihua, '烊' (Yáng) means 'welcome.' In celebration of the millennium, his family named him Yee for welcoming the new era</h1><div class="date">2000/1/28  </div></div>

<div class="centre3"><h1>Appearing with 'Fei Xuan Youth,' he participated in the Shandong TV show 'Soaring to 2010' – the Fourth Global Chinese Web Spring Festival Gala, performing the song and dance 'Green Apple Paradise.</h1><div class="date"> 2010/2/12</div></div>

<div class="right3"><h1>Jackson Yee participated in the opening dance of the children's program 'Music Express' on CCTV. In June, he joined the group for the Tianjin TV imitation show 'The Return of the King.' In the same year, he acted in the TV drama 'Super Equipment Kid,'...</h1>

</div>

<image

x="0px"

y="0px"

width="59px"

height="55px"

</svg>

<div class="pageL_text">JACKSON YEE </div>

</div>

<div>

</div>

</div>

Jackson Yee and the Central Radio Children's Channel collaborated on the "New Musical Express" program, performing the opening dance. In June, he participated with the group in the Tianjin TV show "The Return of the King." In the same year, he also acted in the TV drama "K-Boy." However, at the end of the year, Jackson Yee announced his departure from the group "Fei Xuan Youth.

</div>

<div>Contact Number：012-546 1208</div>

<div>Email Address：jackson yee 1128@gmail.com</div>

</div>

<div>

<images

x="0px"

y="0px"

width="59px"

height="55px"

</svg>

</div>

</body>

</html>

CSS Style :

@charset "utf-8";

/* CSS Document */

* {

font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"Arial, sans-serif;

padding: 0;

margin: 0;

box-sizing: border-box;

}

body {

width: 100%;

}

.homepage {

display: flex;

flex-direction: column;

align-items: right;

justify-content: space-between;

width: 100%;

min-height: 750px;

background: url("image/Jackson yee.jpeg") no-repeat;

background-size: 100% 100%;

}

.nav {

display: flex;

justify-content: right;

}

.nav div {

display: flex;

align-items: center;

margin: 10px 80px;

margin-left:5px;

}

.nav a {

display: flex;

align-items: center;

font-size: 22px;

font-weight: 800;

color: white;

text-decoration: none;

padding: 10px 2px;

}

.text {

display: flex;

flex-direction: column;

align-items: center;

font-size: 48px;

color: #fff;

}

.text div {

margin: 20px;

}

.name {

font-family: Arial, sans-serif;

background-color:black;

padding: 10px 15px;

letter-spacing: 0.1em;

border-radius: 2px;

font-size: 16px;

}

.homepage_ion {

display: flex;

align-items: center;

}

.homepage_ion div {

padding: 10px;

}

.page2 {

width: 100%;

display: flex;

background-color:lightgray;

height: 520px;

padding: 10px;

}

.container {

display: flex;

flex-direction: column;

justify-content: center;

width: 60%;

padding: 0 10% 0 15%;

}

.container_pic {

width: 40%;

}

.container_pic img {

width: 100%;

height: 490px;

}

.container_title {

color:white;

font-weight: 600;

font-size: 48px;

letter-spacing: 0.2em;

}

.container_text {

font-size: 28px;

margin: 40px 0;

}

.container_but {

font-family: Arial, sans-serif;

padding: 10px 15px;

letter-spacing: 0.1em;

border-radius: 2px;

font-size: 16px;

width: 130px;

color:black;

}

.page3 {

height: 580px;

overflow: hidden;

display: flex;

padding: 60px 90px 60px 0px;

}

.left3 {

display: flex;

justify-content: center;

flex-direction: column;

align-items: center;

width: 40%;

padding-left: 10%;

margin:75px 0px 75px 0px;

}

.centre3 {

display: flex;

justify-content: center;

flex-direction: column;

align-items: center;

width: 40%;

padding-left: 10%;

margin:75px 0px 75px 0px;

}

.right3 {

display: flex;

justify-content: center;

flex-direction: column;

align-items: center;

width: 50%;

padding-left: 10%;

margin:75px 0px 75px 0px;

}

.right3_text {

color:black;

font-weight: 600;

font-size: 20px;

letter-spacing: 0.2em;

margin-bottom: 20px;

}

.right3_paging {

width: 60%;

display: flex;

justify-content: space-between;

margin-top: 15px;

}

.right3_paging_img img {

padding: 0 10px;

}

.right3_paging_text {

display: flex;

justify-content: center;

font-size: 14px;

font-weight: 800;

}

.date {

display: flex;

font-family: Arial, sans-serif;

background-color: red;

padding: 10px 15px;

letter-spacing: 0.1em;

border-radius: 2px;

font-size: 16px;

width: 180px;

color: #fff;

margin-top: 10px;

}

.right3_paging_img {

display: flex;

margin-right: 10%;

}

.page4 {

display: flex;

flex-direction: column;

align-items: right;

justify-content: space-between;

width: 100%;

min-height: 750px;

background: url("image/jackson yee 3.jpeg") no-repeat;

background-size: 100% 100%;

padding-left: 80px;

padding-right: 100px;

}

.pageL {

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

width: 40%;

background-color: black;

}

.pageR {

display: flex;

flex-direction: column;

align-items: end;

width: 60%;

}

.pageR_img {

display: flex;

}

.pageR_img>div {

width: 100%;

height: 260px;

overflow: hidden;

}

.pageR_img>div>img {

width: 100%;

overflow: hidden;

height: 260px;

display: block;

}

.pageR_img_1 {

margin-right: -10px;

}

.pageR_img_2 {

/* margin-left: -10px; */

}

.pageR_LR {

margin-right: 100px;

}

.pageR_LR img {

margin: 0 10px;

}

.pageL_our {

font-size: 14px;

font-family: Arial, sans-serif;

margin: 20px 0;

letter-spacing: 0.1em;

}

.pageL_text {

font-size: 48px;

font-weight: 600;

color:white;

}

.page5 {

display: flex;

flex-direction: column;

align-items: center;

width: 100%;

padding: 10px 10%;

background-color: whitesmoke;

}

.page_title {

display: flex;

justify-content: center;

font-size: 38px;

font-family: Arial, sans-serif;

margin: 20px 0;

letter-spacing: 0.1em;

font-weight: 200;

margin-bottom: 20px;

}

.page_text {

width: 55%;

display: flex;

justify-content: center;

font-size: 20px;

font-family: "宋体", Arial, sans-serif;

margin: 20px 0;

letter-spacing: 0.1em;

font-weight: 200;

margin-bottom: 80px;

}

.page_contact {

width: 120%;

display: flex;

justify-content: space-between;

margin-top: 30px;

background-color:darkgray;

}

.page_contact_tB {

font-size: 18px;

font-family: "微软雅黑", Arial, sans-serif;

margin-top: 10px;

margin-bottom: 10px;

letter-spacing: 0.1em;

font-weight: 200;

margin-left: 50px;

margin-right: 50px;

}

.empty{

padding:10px;

background-color: whitesmoke;

}

REFLECTION

Experience:

Engaging in interactive design has been a dynamic and enlightening journey. Through this process, I've had the opportunity to create user interfaces and experiences that prioritize usability, aesthetics, and functionality. It involves a multidisciplinary approach, integrating design principles, user feedback, and technological considerations.

Observation:

One key observation throughout the interactive design process is the crucial role of empathy. Understanding the needs, preferences, and behaviors of the end-users is paramount. Regular testing and feedback loops have allowed me to step into the users' shoes, helping me identify pain points and areas of improvement. This iterative approach has been instrumental in refining the design and ensuring it aligns seamlessly with the user's expectations.

Findings:

The findings from the interactive design process underscore the significance of user-centered design. It's not just about creating visually appealing interfaces; it's about crafting an experience that resonates with the user on a deeper level. Accessibility has emerged as a critical aspect, emphasizing the need to design for inclusivity and ensure that the product is usable by individuals with diverse abilities and backgrounds.

Another key finding is the iterative nature of the design process. Continuous testing and refinement based on user feedback lead to a more robust and user-friendly end product. The importance of collaboration between designers, developers, and stakeholders cannot be overstated. Effective communication and a shared vision are essential for the seamless integration of design elements into the final interactive product.

Furthermore, the evolving landscape of technology and user expectations necessitates staying updated on the latest design trends and technological advancements. Flexibility and adaptability are crucial in the world of interactive design, where innovation and user satisfaction are inextricably linked.

In conclusion, the interactive design process is a dynamic and collaborative journey that goes beyond aesthetics. It involves understanding users, empathizing with their needs, and continually refining the design based on real-world feedback. This reflective process has deepened my appreciation for the importance of user-centered design and the ever-evolving nature of the field.

Search This Blog

LIM JUN TENG (0362890)

INTERACTIVE DESIGN - FINAL PROJECT

Comments

Post a Comment

Popular Posts

Major Project 1

Information Design - Exercise