Interactive Design | Final Project
24.6.2024 - 3.8.2024 || Week 10 - Week 15
Yong Zhen Xing || 0359473
Interactive Design || Bachelor of Design (Honours) in Creative Media / Taylor's University Design, Exploration and Application
Contents
1. Lectures
2. Instructions
Yong Zhen Xing || 0359473
Interactive Design || Bachelor of Design (Honours) in Creative Media / Taylor's University Design, Exploration and Application
Contents
1. Lectures
2. Instructions
Design, Exploration and Application
For our final project, we needed to create a 1 page microsite for any theme of our choice with a reasoning. The page have to look appealing and engaging to the users through interactive elements. The page should also be easy to navigate and suitable for all screen sizes.
1. Planning
So first, I begin on choosing a theme. Since we could do about anything, I decided to do on one of my favourite games, Risk Of Rain 2. After the tragedy of my project 2, I needed to ensure that this time, I wasn't too ambitious with how I position certain elements.
So for starters, I begin with planning how I think the website would look like. I complied every important elements such as content structure, wireframes, and colour schemes into a slide. I also ensured I took references on interesting and good website designs too.
fig 1.1, Rough Website Idea Moodboard (1/7/2024)
After a discussion with Mr.Shamsul, I have decided on the selected elements which I would be using in the website (can be seen in page 9 of fig 1.1). The selected wireframe, wireframe 2 was slightly modified based on the feedback I received.
2. Prototype
The next phase would be making a prototype for the website using figma/AdobeXD. I first begin with typing out all the content I would be showing on the website. Checking and corrections were also made to ensure the content is accurate.
fig 2.1, Content (12/7/2024)
I also made a logo for the website through Illustrator. This would be displayed on the navigation bar as well as on top of the web.
fig 2.2, Logo Creation (16/7/2024)
fig 2.3, Old & New Border Radius Adjustments (30/7/2024)
He also said for this one particular image should have 1 question mark instead of the 3.
As for the logos (social media and Steam), I wanted it to follow the colour combination of the site, so I took the logo and painted it using specific hex colours in paint.net.
Here, I also added a feedback form.
During the feedback session, Mr.Shamsul said that I needed to add a call to action button at the intro part to promote the game better. Since I didn't want it too congested, I added another banner to highlight the objective of the game. The call to action button is then only promoted below it.
For the new banner in fig 2.7, I took 3 separate images and ensure that the width and height in pixels are the same. This was also created in paint.net.
fig 2.8, Making the new banner (15/7/2024)
In the gallery section, I added artist that drew fanart for the game and then credited them. Unfortunately the positioning was of the tag was not good nor consistent (due to how some of the art were drawn). After receiving feedback, I made the artist tag on the bottom and added a black gradient so that the tag of the artist would still be visible.
View the Prototype Here : Risk Of Rain 2 Website Prototype
fig 2.9, Final Prototype (30/7/2024)
3. Process
It's time for coding! First I added the content for the website and then from there, I start adding designing it based on the wireframe.
fig 3.1, Adding Content (30/7/2024)
Here, I started adding the images and colours based on the prototype.
Then, I made the navigation bar and position the introduction to be on the image.
This next section involves me using display flex to create 3 separate boxes.
Here I also spent quite some time aligning to get this Environment section right.
For the gallery, I utilized a simple slide animation using CSS. This is the only section I slightly altered from the prototype as this way looked more cleaner in my opinion.
The footer of the page also took quite a considerable amount of time to make. I was having trouble trying to line up the buttons with text box as well as lining thing up center with page.
Lastly optimization for other screen sizes. After learning from my project 2 mistake, this time I optimized the screen size as I was working on specific sections on my website. This is to ensure that I don't forget different classes I used previously and also to save time.
Final Outcome
Link to Final Website : Risk Of Rain 2 Fansite
fig 4.1, Final Project Website [Desktop View] [PDF] (2/8/2024)
fig 4.2, Final Project Website [Mobile View] [PDF] (2/8/2024)
Feedback
Week 11 :
Slight modifications on the selected wireframe (fig 1.1). You should only have 2 typefaces for the entire website. My call to action button should lead to the game's official page or social media.
Week 13 :
Week 13 :
The fonts such as header, navigation and body are way to big, so reduce the size of it. One of the image I modified should only have 1 question mark instead of 3. Footer should also have a feedback form but it doesn't need to work. The corner radius for some of the body should be less. The images in gallery should be cropped to the same size for consistency.
Reflection
Experience
For the final project of interactive design, I must say that I didn't hate this as much as I did for my project 2. Mostly because I know what I should and shouldn't do for layout design, and also because I know a bit more of coding after learning more. I am also glad that for this project it was until week 15 which allows more time for me to code than panic on my other assignments. Throughout this project, it was just learning how to code better and then finishing it. I am very neutral with how I feel for this project. I am however pretty happy with the outcome of my website!
Observation
Through observing different variation of certain elements, it allows me to choose a variation that fits my understanding of coding. I try to ensure that this time, I didn't choose anything complicated that could make me spend multiple hours troubleshooting. Through observing my classmates' prototype for their website, it gives me inspiration on what interesting element I could add or consider when working on my prototype.
Findings
This project taught me on making an interactive website through CSS and HTML. The way I see it, coding or creating a website is really just about experimenting until you find a solution for something. I found out that coding is a test of patience and I shouldn't get mad when something isn't working. I should instead try to find a solution to the problem, and if I can't, I should go with something more easier to my understanding.
Comments
Post a Comment