Interactive Design / Final Design, Exploration and Application

April 24, 2024 - June 25, 2024

24.04.2024 – / Week1 – Week14

Ryoma Kato / 0365874

Interactive Design / Bachelor of design (Honours) in Creative Media

MIB

WORK

Create a single-page website dedicated to your favorite topic.

The site URL that I made:https://wondrous-sopapillas-717162.netlify.app

I decide to make fan page and I chose "IA". She is my favorite Vocaloid character.

(The image of first web site idea)

The image above is the initial idea for the website. To make it instantly clear what the site is about, a photo of IA is set as the background. The website is structured to allow visitors to learn about IA, featuring sections on IA's singing works, detailed information about IA, official CDs released by IA, IA's Twitter feed, links to other official sites, and a contact section, in that order.

The html code I wrote:

<!doctype html>

<html>

<head>

<title>Task3 Ryoma Kato</title>

</head>

<body>

<li><a href="#videos">VIDEOS</a></li>

<li><a href="#about ia">ABOUT IA</a></li>

<li><a href="#music">MUSIC</a></li>

<li><a href="#twitter">TWITTER</a></li>

<li><a href="#contact">CONTACT</a></li>

</ul>

</header>

<h1>

<br>

</section>

<h2>VIDEOS</h2>

<br>

</center>

<br>

</div>

</section>

<h2>ABOUT IA</h2>

<h3>PROFILE</h3>

<center><h4>(Illustrated by Aka Akasaka)</h4></center>

<br>

<h5>IA is a popular Vocaloid character known for her beautiful and versatile voice. She was

<br>developed by 1st Place Co., Ltd. and first released in January 2012 for the Vocaloid 3

<br>engine. IA’s voicebank is based on the voice of Japanese singer Lia, who is well-known

<br>for her work in anime and video game music. IA has been widely used in various musical

<br>genres and is particularly loved for her clear and expressive vocal capabilities. Over the

<br>years, she has gained a significant fanbase and has appeared in numerous songs, concerts,

<br>and multimedia projects. IA is often depicted as a futuristic, ethereal character with long,

<br>flowing white hair and a stylish outfit, embodying both elegance and modernity.</h5>

</center>

<br>

<br>

<h5>2012.04.25 - IA/01 BIRTH</h5>

<h5>2012.06.27 - IA THE WORLD 〜光〜</h5>

<h5>2012.09.26 - IA THE WORLD 〜風〜</h5>

<h5>2012.12.26 - IA THE WORLD 〜影〜</h5>

<h5>2013.01.30 - IA/02 COLOR</h5>

<h5>2013.04.03 - IA THE WORLD 〜星〜</h5>

<h5>2013.07.03 - IA THE WORLD 〜翼〜</h5>

<h5>2013.10.02 - IA THE WORLD 〜鍵〜</h5>

<h5>2014.02.05 - IA THE WORLD 〜夢〜</h5>

<h5>2014.07.02 - IA THE WORLD 〜紅〜</h5>

<h5>2014.07.02 - IA THE WORLD 〜蒼〜</h5>

<h5>2014.10.08 - IA THE WORLD 〜心〜</h5>

<h5>2014.11.05 - IA/03 VISION</h5>

<h5>2015.02.11 - IA THE WORLD 〜華〜</h5>

<h5>2015.05.13 - IA THE WORLD 〜雨〜</h5>

<h5>2015.07.29 - IA/VT COLORFUL</h5>

<h5>2015.08.05 - IA THE WORLD 〜刻〜</h5>

<h5>2020.03.18 - MUSICAL LIVE SHOW “ARIA” ORIGINAL SOUNDTRACK</h5>

<h5>2022.01.09 - IA/10th Anniversary GLOW</h5>

<h5>2024.02.02 - IA/05 SHINE</h5>

<br>

<h3>HISTORY</h3>

<br>

<h5>2012.01.27 - IA VOCALOID3 Library Release</h5>

<h5>2014.04.22 - Additional Library IA ROCKS Released for VOCALOID3</h5>

<h5>2015.03.20 - IA’s First Solo Concert “IA First Live Concert in Japan: was held PARTY A GO-GO</h5>

<h5>2015.06.27 - 「IA/VT Colorful」Released for Play Station Vita</h5>

<h5>2016.07.01 - IA Voice Bank Released for CeVIO Creative Studio</h5>

<h5>2017.09.30 - IA’s concert “IA MUSICAL LIVE SHOW ‘ARIA’ in Japan” was held.</h5>

<h5>2018.03.09 - Performed a Live Show at South by Southwest (SXSW) in Austin, Texas</h5>

<h5>2018.05.11 - Performed at “Anime Central” held in Rosemont, Illinois.</h5>

<h5>2019.03.08 - Performed at “Katsucon” held in National Harbor, Maryland.</h5>

<h5>2020.01.24 - Performed at the “NAMM Show” held in Anaheim, California.</h5>

<h5>2021.04.17 - Performed at the virtual event “Vocaloid Collection 2021 Spring.”</h5>

<h5>2022.12.31 - IA held her 10th-anniversary New Year’s countdown live event, “PARTY A GO-GO COUNTDOWN: KISEKI -Trail and Miracles-.”</h5>

</div>

<br>

</div>

</section>

<h2>MUSIC</h2>

<br>

</div>

</center>

<br>

</div>

<h2>TWITTER</h2>

<a class="twitter-timeline" data-width="500" data-height="600" href="https://twitter.com/IA_Official_?ref_src=twsrc%5Etfw">Tweets by IA_Official_</a>

</center>

</section>

<br>

<br>

<h3>CONNECT TO IA</h3>

</div>

</center>

<br>

<h3>CONTACT TO US</h3>

<center><h5>Mail : ryomataylorsuniversity@gmail.com</h5></center>

<center><h5>Phone : +60 17 4017 139</h5></center>

<br>

</div>

</section>

</footer>

</div>

</body>

</html>

The css code I wrote:

@charset "UTF-8";

html {

scroll-padding-top: 100px;

scroll-behavior: smooth;

}

* {

box-sizing: border-box;

padding: 0;

margin: 0;

}

body {

font-family: "Poppins", sans-serif;

font-weight: 400;

}

.container {

width: 100%;

position: relative;

}

header {

min-height: 40px;

position: sticky;

background-color: whitesmoke;

top: 0;

left: 0;

z-index: 100;

}

.navi {

display: flex;

list-style: none;

justify-content: flex-end;

align-content: center;

align-items: center;

padding: 3% 3% 0;

gap: 3%;

}

.navi a:link, .navi a:active {

color: black;

text-decoration: none;

font-size: 15px;

font-family: "Inter", sans-serif;

}

.navi a:hover, .navi a:visited {

color: silver;

border-bottom: 1px solid rgba(208, 128, 21, 1.00);

padding-bottom: 2%;

transition: 0.2s ease;

}

h1 {

font-family: "Inter", sans-serif;

font-optical-sizing: auto;

font-size: 150px;

font-weight: 1000;

padding: 2%;

text-align: center;

margin: 0;

background-image: url("images/Background1.png");

background-size: cover; /* 追加 */

background-position: center; /* 追加 */

}

h2 {

font-family: "Inter", sans-serif;

font-optical-sizing: auto;

font-weight: 700;

font-size: 75px;

padding: 2%;

text-align: left;

}

h3 {

font-family: "Inter", sans-serif;

text-align: center;

font-size: 35px;

}

h4 {

font-family: "Inter", sans-serif;

font-size: 15px;

}

h5 {

font-family: "Inter", sans-serif;

font-size: 20px;

}

.videos {

background-color: dimgray;

color: white;

}

.detail {

text-align: center;

}

.music {

background-color: gray;

color: white;

}

.contact {

background-color: black;

color: white;

}

footer {

text-align: center;

color: rgba(23, 109, 192, 1.00);

font-family: "Inter", sans-serif;

background-color: whitesmoke;

}

@media only screen and (max-width: 1290px) {

html {

scroll-behavior: smooth;

scroll-padding-top: 120px;

}

h1 {

background-size: cover; /* 追加 */

background-position: center; /* 追加 */

}

.btn_home {

margin-top: block;

}

.videos {

width: 100%;

height: auto;

}

(The image of website1)

In the final product, the top page features an IA image as the background, and the top left has a navigation menu that links to each section. This navigation menu is set to remain visible even when scrolling through the page.

(The image of website2)

On the VIDEO page, URLs to IA's music works posted on YouTube are provided. Visitors can watch the videos on YouTube or directly within the site. The goal is to make it easy for people to learn about IA, so they can watch IA's videos without leaving the site.

(The image of website3)

On the PROFILE page, the initial plan was to place the CD and HISTORY information side by side. However, due to my limited coding knowledge and difficulty understanding the solutions I found, I ended up arranging them vertically.

(The image of website4)

On the MUSIC page, we feature IA's official CD releases and music works. By clicking on an interesting work, visitors can access the actual sales site.

(The image of website5)

On the TWITTER page, we display information directly from IA's official Twitter account. We focused on embedding the timeline instead of just the profile information. This timeline automatically updates whenever new information is posted by IA's official account. Achieving this was challenging with just the class content, so I spent about two hours researching and implementing it using online resources.

(The image of website6)

On the final CONTACT page, icons are provided to access IA's official website, YouTube, and Twitter, allowing visitors to easily find more information about IA. Additionally, I included my email address so that people interested in IA can ask questions or reach out to me, as I am a fan of IA myself.

Creating this fan-made IA website allowed me to review the knowledge gained in class and improve and apply my programming skills, leaving me very satisfied. While I couldn't realize 100% of the initial concept due to some difficulties, I am committed to continuing my programming studies. My goal is to be able to create a website that fully matches my ideas next time.

Search This Blog

Ryoma Kato 0365874

Interactive Design / Final Design, Exploration and Application

Comments

Post a Comment

Popular posts from this blog

Design Principles / Final Compilation blog

Information Design / Project 1

Information Design / Exercise 1 & 2