Advanced Interactive Design: Final Project
.png)
14.6.2026 - 31.7.2026 / Week 8 - Week 15
Aw Wen Chia / 0368828
Aw Wen Chia / 0368828
Advanced Interactive Design / Bachelor of Design (Honours) in Creative
Media / Graphic Design
TABLE OF CONTENTS
INSTRUCTION
LECTURE
Refer to
Exercises
FINAL PROJECT
Based on the
prototype
I did, I started working on the final website in Adobe Animate.
I used the graphic I made in Adobe Illustrator for the prototype
and reused it for the final website, as I made it based on my
plans from the beginning.
Because I did a game promotion, many of the assets I used are from
the game itself, but I tried replicating some of the work, so I
was not only using their assets.
Fig 1, Progress
For the last 2 pages, I made more graphics in Illustrator, however, most of the images used are from the game itself. Honkai: Star Rail, or any HoYoverse game in general, is known for its hyper-detailed characters and designs. Remaking them in Illustrator is not the best approach, so I made simpler designs for the final website.
I drew inspiration from the interior design of the game and took
note of how the elements came together. I then tried to piece
together elements from the game to the website.
For the background, I went with a Milky Way galaxy theme as the
game mainly takes place in space, I did have to dull the colours a
little as it is the background and I did not want it to distract
too much.
Fig 2, Dan Heng's room
Fig 3, Amphoreus
For the characters, I showcased them in a slideshow type of way as
there were many characters to showcase. I compiled them in
Illustrator.
Fig 4, Progress
I transferred the elements to Animate as I prefer working with
Illustrator due to me being more familiar with the user interface.
Fig 5, Progress
For the information found on the website, I took it from the
Honkai:Star Rail wiki page
and from the game itself.
Document of Information:
Based on the character designs of some of the playable characters in the game, I simplified their designs into silhouettes to almost act as a bridge between the highly detailed art style HoYoverse is known for, and my simpler style of the website.
Fig 6, Progress
Fig 7, Progress
After finishing the graphics, arranging them, transferring them to
Animate, and editing there. I uploaded the file to
Netlify to turn it into a
website.
Final Website link: https://honkaistarrailunofficial.netlify.app/
FEEDBACK
My tutor instructed me to source image references
for the website, emphasising that the visuals should
be based on graphics I created instead of using the
game's pre-existing artwork.
I made more graphics in order to help balance out
the amount of in-game graphics I used.
REFLECTION
I honestly do not like working with Adobe Animate, it
felt like they tried to Frankenstein Illustrator,
After Effects, and Dreamweaver into one software and
included the bugs and problems from all three
softwares into one.
I will say that I personally preferred Animate over
Dreamweaver, as I prefer graphics over text. But the
software issues of Animate drove me up the wall.
I know my website has issues, but retyping the code
did not work, the same code that worked for one page
did not work for the other, and I still cannot figure
out why. According to my tutor and peers, sometimes
retyping the same thing you already typed will
magically work. Which means it was not my doing in the
first place. I also found that refreshing the page
makes the code work again.
For this module, I do like the fact that I got to
choose the topic, and my tutor did great in teaching
us how to use the software. But still, the problems I
faced are still pissing me off as I am typing this.
.png)
.png)
Comments
Post a Comment