Interactive Design / Task 3 / Single-Page-Website
23.8.2023 - 10.12.2023 (Week 9 - Week 16)
Elysa Wee Qi En / 0355060 /
Bachelor of Design (Hons) in Creative Media / Taylor's University
Interactive
Design
Task 3 / Single-Page-Website
LECTURES
All lectures were covered in Exercises.
INSTRUCTIONS
Fig. 1. Module Information Booklet
Task 3: Single-Page-Website
For our final assignment, we had to create a single-page, fully functional website about our favourite artist. It could be any type of artist too, we just had to have a genuine interest in them so we could create a more engaging website. I chose Jin from BTS.
I started off by creating an idea sheet and brainstorming. First, I thought about what kind of person Jin is, what he likes and such.
 |
| Fig. 2.1. Mind-map of Jin (6/11/2023) |
From this, I decided that I wanted to stick to the blue and pink colour scheme, but also add in some purple since it's a relative colour to both and it's BTS' signature colour.
 |
| Fig. 2.2. Moodboard (6/11/2023) |
After that I went online and looked for images that I felt resonated with the theme I was going for.
 |
| Fig. 2.3. Font options (6/11/2023) |
And lastly, I looked for fonts on Google Fonts that would fit with the overall look and feel of the website. Out of these three, I ended up going with Righteous for the main title and headings and Dosis for the body text.
After that, it was time to create sketches.
 |
| Fig. 2.4. Idea sketches (14/12/2023) |
The long sketch on the left is my first draft, where I tried to make every section as different as possible so it wouldn't be boring. However, it seemed very complicated, so I tried to simplify and change the designs a little. I drafted many ideas, as seen on the right. My teacher gave me advice to add a first section with a background image.
Now I had to make a prototype on Figma, like in our project 1.
Fig. 2.5. Final Figma prototype (14/12/2023)
Link to Figma file:
We also had to create a logo for the website. Since Jin has compared himself to the moon, I decided to include that in the logo. I tried to make it cute and bubbly since that is the way Jin likes to be.
 |
| Fig. 2.6. Original logo idea (12/12/2023) |
Originally I wanted to have a purple 'mist' as the background of the logo, but something just seemed off. I think it didn't blend with the other elements as well. So in the end, I removed it, and moved the moon behind to be the background instead. I also added some white highlights (set to a lower opacity) to make it seem less flat.
 |
| Fig. 2.7. Final logo (12/12/2023) |
And now it was time to get to coding.
 |
| Fig. 2.8. Coding process (13/12/2023) |
Our teacher gave us a resource that provided code for an interactive gallery, so I implemented that. Aside from that, I also planned to have an interactive carousel for the 'discography' section, and I managed to find a good tutorial on YouTube with a link to copy the code. I figured out how to create a JavaScript file since the code needed one, and edited it a little to better fit with my design.
 |
| Fig. 2.9. CSS and JavaScript code for the carousel (13-14/12/2023) |
As I was creating the top section, the button was taking me a really long time, so due to time constraints, I removed it. I actually removed the white lines in the 'biography' section as well, but after realising those were important to establish the reading order of the paragraphs, I put them back in.
 |
| Fig. 2.10. Top section, before and after comparison (14/12/2023) |
 |
| Fig. 2.11. Comparison between original and final design (14/12/2023) |
Another change I made is to the footer. I decided to include a warning as well as remove that second navigation since the header is sticky and follows the scroll, so there is no need for it.
FINAL Single-Page-Website Submission
Link to website:
https://elysawee-finalproject-btsjinfanpage.netlify.app/
FEEDBACK
Week 14
- The header looks off
- Don't make the gallery too complicated, you'll suffer during coding
- The first three sections look okay, but the others are lacking
- The logos for the 'contact' section are too big
REFLECTIONS
Experience
Since we got to pick one of, if not our favourite artist, it was fun to come up with the theme and aesthetic of the website. It was nice to pour my love for my chosen artist into my work and express their character using design elements, even in something like creating a logo that represents them. I do wish I had more time for this project though. I think my end result isn't bad, but I do wish I gave myself more time for it. I still have to work on time management.
Observations
Coding gives such a roller coaster of emotions. On one hand, it was fun to work on and it made me happy to see how much faster I can work now compared to earlier in the semester. I was able to get this done in a relatively short amount of time despite the complexity and how much work it was. On the other hand, there were times I got so frustrated with the code since I didn't understand what was making it behave a certain way and how to fix my problems.
Findings
I was advised by a friend to remove that 'Learn More' button in the top because of how long it was taking me and how much time I had left to finish the project. I think sometimes it's okay to step back and understand that I can't always follow through with my original plan. Sometimes less is more, and removing certain elements may prove to be a benefit. Especially since it isn't one of the important elements in the page, removing it doesn't really affect the overall experience in the website that much.
Comments
Post a Comment