Interactive Design - Final Project

02.07.2024 - 23.07.2024  / week 11 - week 14

Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media

Interactive Design

JUMPLINK:

1. Lecture
• In Exercise Post
2. Instruction
3. Project 3 Final Project
• Research
• Progress
• Final Result
4. Reflection

1. LECTURE

Week 1 - F2F (Apr 23, 2024)

1. TASK BRIEFING

• Prepare Figma
• Prepare Netlify for projects 2 and 3
• Prepare visual studio code

5 POST

Exercises

• task 1 Web Analysis (2 websites)                                          (week 2)
• task 2 replicates the given websites (4 websites) exactly      (week 3)

Project 1

• Prototype Design – Digital Resume/CV

Project 2

• Final Design - Creating a Digital Resume/CV;

Final Project

• Single Page Lifestyle Microsite (music entertainment, music, fanpage of an artist (painter, musician), game)
• needs to be RESPONSIVE (on laptop and mobile)

Final Complication

2. INSTRUCTION

Description

• The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype.
• Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
• Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
• Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
• Upload the file in Netlify, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission.

3. Final Project

1. Research

The first prototype that I made during class was just to test out what I would like to make, when I presented it to me, Mr said that my topic was too broad and need to narrow it down to a niche instead of a whole franchise. 

Fig 1.1 Prototype, Week 11 (02/07/2024)

Mr also told me to decide on a visual reference, font choices for the header and the body, color scheme of  3 colors. So I made it, and even though at the end it got completely scrapped, I really should have this sooner. I thought with the movies being in the Viking era it would make sense to use black and brown color schemes, along with a flourish and handwritten fonts. I knew from the start that my content would be heavy on text and pictures, so I intentionally searched for one that sufficed both requirements.

For the prototype, I made a simple one following the format of the visual references with skewed and randomly placed pictures.

Fig 1.2 Prototype, Week 11 (02/07/2024)

The first prototype was quite rough, I didn't put any heading or pictures and just made the layout, in hindsight, I am so glad Mr didn't approve of this one because I don't even want to think about how to code this, skewed overlapping pictures? many disorganized colors of the background? No, thank you. It would propobly take so many margins and padding to get it right and even then that could mess up the whole responsive bit.

Mr said that the flow of your content is not smooth, the boxes(images) rotated, no heading indicating a section, poor alignment, also don't apply too many colors on the page. So I completely changed up the composition, made the pictures completely straight and along this time I immediately made the content so I would the what and how many sections it needed. I still wanted to remain faithful to the visual references using many pictures so did, but changed up the text layout so it still has some structure.

Fig 1.3 Revised Prototype, Week 12 (09/07/2024)

But as it turns out it didn't look quite good, as mr said dark brown color is not really happening. The arrangement of the image is kind of weird, the hero section is empty, also the border on the picture is not a good idea, and the flow of the pictures is also wired causing poor alignment. Mr suggested rearranging the to color see if it would work out, if not then find another color palate and add the hero image but with the hero image being blue I have the idea to just change the color completely to fit with the hero image.

Fig 1.4 Prototypes, Week 13 (16/07/2024)

Mr also suggested that I should look at an existing website that is heavy in both pictures and text as references to see how they would format it, I have looked through a lot of the websites and I found some that look good but they usually just images with barely any text until this one.

Fig 1.5 Referenced Web, Week 14 (23/07/2024)

Referencing this web format I made the prototype and added gradients along each section to differentiate them after a while repeating patterns started to to look boring. My friend actually suggested that i use different fonts for this and they're right simpler fonts do suit it better, even though I have to adjust the kerning nad line spacing for each one.

Fig 1.6 Prototypes, Week 14 (23/07/2024)

This is the whole prototype attempt that I made. Mr said that I could use the gradient property for the fade in and fade out from the hero image and each section.

Fig 1.7 Prototypes, Week 14 (23/07/2024)

2. Progress

The first thing that I want to nail down is the layout of the web, categorizing it into 4 sections there's the header, the 1st and 2nd layout variations of the content, and the footer. I chose to make the 1st format for the content first as it makes up most of the web, I used the same text and image for all of the layouts of the web, totally not going to regret that down the line.

Fig 1.8 Preview, Week 15 (29/07/2024)

Fig 1.9 Preview, Week 15 (30/07/2024)

There is not much to say here besides that it took a ridiculous amount of time to get the layout working just right, along the time that got the header, and 1st and 2nd layout variations of the content mostly down, attempted to see it in responsive, and oh boy, does it changes so much, I needed completely change the layout on the 1st one to follow with the 2nd one because the 2nd actually work with the responsive. In the end, it does change a bit from the original prototype, but it was the best I could do without messing up the aesthetic of the responsive too.

Fig 1.10 Preview, Week 15 (31/07/2024)

The longest problem that I have with this is how to put texts on top and on bottom simultaneously, I didn't think it was that hard but after scouring the internet, man it was the hardest thing to do, I didn't want to just give it margins or cheat it with enter space as it completely destroys the responsive part.

Remember when I said that I made all of the text and pictures the same during the layout-making process yeah, when I added the actual pictures, the height and width of the pictures were way off and I had to go back and fix that up.

Fig 1.11 Preview, Week 15 (01/08/2024)

it's so distracting that the preview on Dreamweaver is different compared to the browser, threw me off a couple of times, and have to remind myself to look at the preview on an actual browser.

Even then the responsive layout is still finicky, probably my fault for making such a complicated layout that looks kind of repetitive, just because I want to follow through with my topic that requires a lot of pictures and text because I want to rant about it. I definitely say other friends who make more visually pleasing layouts without much coding.

Also, the responsive bit is coded to under 760px and 480px.

3. Final Project

Link: Introduction (66b0d3edfe7aadf8b4218336--dreamy-pithivier-88c36c.netlify.app)

Fig 1.12 Preview, Week 15 (30/07/2024)

 

4. Reflection

1. Experience

Oh man, the coding was exhausting, it took so much time and energy. I took 4 days to do this, and it's hard to make anything just right, mostly it does not change anything or it would just be way off. working on a certain element to get it right took 2 hours to do, even with Google. 

During the prototype creation, I didn't even think about how to code it later, a double-edged sword really. it helped me not to be restricted by my poor coding skills but it made me go overboard with the design not knowing whether I have the knowledge or skill to code it later.

2. Observation

I know this is what needs to be done when I'm choosing to specialize in UI/UX, and that the resources now are just going to get more advanced, thus I would need to keep learning and applying because what I know would be never enough.

it's still hard to find the right properties and values to use, looking for them in Google is so time-consuming, and even then it might not work. Clearly, I'm still lacking in knowledge and skills and that just going to take time and practice to do research and other projects to apply them.

3. Findings

• Need to practice more, then keep practicing to keep up the future.
• Learn and memorize what properties do what.
• Make sections for each content so it's easier.
• Do not underestimate how long am i going to code this (it took a lot)