Interactive Design - Project 2

-

04.06.2024 - 02.07.2024  / week 7 - week 11

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

Interactive Design

JUMPLINK:

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. Prototype Design – Digital Resume/CV

1. Research

During the making of this absolute beast, I asked Mr Shamsul for advice on how to do this layout. I made it too complicated for me to understand the coding knowledge needed for this. Mr said what I have is similar already to the original design, but allowed me to change the layout a bit to make it easier for myself (I'm already on an extended deadline, Thank you Mr)

Fig 1.1 Prototype, Week 7 (04/06/2024)

The main thing I changed about it, is mostly the overlapping elements, as I got no clue how to do that. 

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

2. Progress

Putting in the words is the easy part, the CSS though. sigh..

Fig 1.3 HTML, Week 10 (16/06/2024)

I won't lie, most of this process is a lot of googling and looking back on previous lectures and exercises. Way too many sections and classes. Wanting to make certain elements, making them center, paddings, and margins, takes around 20 min each. Learned a bunch of new properties and their values, and I still do not know entirely how it's gonna affect other elements' properties.

The experts in this propobly have a hierarchy system on how to do this, with clear comments on each property and stuff. What I did is keep adding more classes when something is not right, cause I don't want to mess up other elements that have that class, or I'm too lazy to find the class. There are probably many overlapping property values in different classes. To put it simply, the code is a mess. My brain is fried. 

Fig 1.4 CSS, Week 10 (16/06/2024)

This is what I got so far before asking Mr for advice. Because I used the position: absolute on the circle and boxed "about me" in green, when you see it in live coding in Dreamweaver is offset, compared to when you see it in the web preview. 

The reason is that I used the position: absolute to make the circle and boxed "about me" in green, is to make them on top and behind the corresponding elements. But because of that, It messes up when trying out with "inspect" to test responsiveness.

Fig 1.5 Preview, Week 10 (16/06/2024)

Coming back to this with a fresh mind, I somehow managed the circle and boxed "about me" in green.  I've also added the drop shadow (got a new property) to each of the "cards". Struggled a bit with the image for the header, and had a crisis because I thought I lost the whole CSS, then added the font. It's still not exactly the same as the new layout but for the header, I do think this looks better, this layout needs more images with depth and texture.

Fig 1.6 Preview, Week 11 (02/07/2024)

Then I tested for responsiveness in multiple sizes, the language section is a bit problematic due to me adding way too many margins and messing up on smaller screens. But it's fixed with display: flex, then warp.

Eventually, the responsiveness on different screens worked out, and it was done. Below are a couple screenshots I took on different screen sizes.

Fig 1.7 Preview, Week 11 (02/07/2024)

Fig 1.8 Preview, Week 11 (02/07/2024)

It's not perfect but I think it's already more than I thought I could do. So I'll take it. Making this exactly the same as the original design would be possible, it would take so much of me but possible. A silver lining in all of this. 

2. Final Result

Link: Project 2 (aquamarine-griffin-2fd032.netlify.app)

Somehow the link is not working, it keeps going to an error page, im still trying to fix it.

Fig 1.9 Responsive, Week 11 (02/07/2024)

4. Reflection

1. Experience

Writing this entire process has felt really underwhelming compared to what I go through to make this. I definitely regrated when starting this out, making such a complicated design to code, in my past-self defense I didn't know we needed to code this, I thought we just animated the elements in Figma. But I am still proud of myself for pushing this far, I wouldn't have used so many property values, and selectors even.  

The way you become an expert in this  niche is to practice and familiarize yourself with the code after all, then keep doing it so you don't forget, especially since this language is going to keep changing in the future. Still, it is exhausting, it reminds me of doing chemistry homework where you need to know some stuff already before doing the question, and if you don't know you google it. Compared to the assignments where you need to explore and create, been a while. 

2. Observation

It's hard to find anything in the CSS when I don't organize everything, with no hierarchy or comments that tell what the classes do. (definitely need a system)

Feels as if I already learned a lot during the tutorial, then I try to do it myself and I don't know where to start. Copying someone's example and doing it yourself is different after all. 

Adding something simple is often hard to do with a lack of info and the need for extensive research, discouraging me from adding the little stuff and leaving it as it is. Makes me wonder if I didn't make such a complicated design, I propobly would try this hard.

3. Findings

  • Need to practice more, then keep practicing to keep up the future.
  • How am I going to top this for the final project, AGH. I've set the expectation high for myself now.
  • Make a system for the CSS, just comments would suffice propobly.

Comments

Post a Comment

Popular posts from this blog

Information Design - Exercise 1&2

-
Image
03/02/2025 - 11/03/2025  / Week 1 - Week 5 Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media Information Design  JUMPLINK: Lecture Instruction Exercises Exercise 1: Quantifiable information Exercise 2: L.A.T.C.H infographic poster Feedback Reflection 1. LECTURE Week 1: Types of Infographics Infographics help people understand information faster by using visuals and text together. They make information clearer, more interesting, and easier to remember. There are different types of infographics, each with its own purpose: List Infographics – Organize information in a list format with pictures or icons, making it more visually appealing and easier to scan. Fig 1.1 List Infographics, Week 1 (04/02/2025) Statistical Infographics – Use charts, graphs, and numbers to present data in a way that is easy to understand at a glance. Fig 1.2 Statistical Infographics , Week 1 (04/02/2025) How-to Infographics – Show step-by-step guides using...
Read more

Advanced Interactive Design - Final Project

-
Image
19.11.2024 - 24.12.2024   / week 9 - week 14 Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media Advanced Interactive Design  JUMPLINK: Lecture Instruction Task 3 - Completed Thematic Interactive Website   Progress Final Submission Feedback Reflection 1. LECTURE 2. INSTRUCTION 3. Task 3 - Completed Thematic Interactive Website 1. Progress Loading screen This one is not too hard. I did have to change the middle white circle to the bottom so the anchor is on the bottom, allowing me to change the shape up and down, while the bottom bar stays in place. Then, it just took spacing in different keyframes and adding a shape tween for it. I also added the fade-in and fade-out for them. Fig 1.1  Loading Screen Animation , Week 13 (17/12/2024) Fig 1.2  Loading Screen Fade Out , Week 13 (17/12/2024) Video The beginning process of the web was, of course, putting the video in first and following the tutorial on YouTube, which worked just fi...
Read more

Advanced Interactive Design - Task 2

-
Image
22.9.2024 - 12.11.2024   / week 5 - week 8 Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media Advanced Interactive Design  JUMPLINK: Lecture Week 5  Week 6 Week 7 Week 9 Instruction Task 2 -  Interaction Design Planning and Prototype   Research Progress Finalizing Layout Planning Interactions Animating Final Submission Feedback Reflection 1. LECTURE Week 5-6 - F2F  (22-29 Oct, 2024) 1.  Button Animation Fig 1.1  Button Animation Progress , Week 5 (22/10/2024) Fig 1.2  Button Animation Result , Week 5 (22/10/2024) Week 7 - F2F  (5 Nov, 2024) 1.  Screen and Button Animation Fig 1.3 Screen and  Button Animation Progres , Week 7 (5/11/2024) Fig 1.4 Screen and  Button Animation Result , Week 7 (5/11/2024) Week 9 - F2F  (19 Nov, 2024) 1.  Transition Animation Fig 1.5 Transition  Animation Progress , Week 9 (19/11/2024) Fig 1.6  Transition  Animation Result , Week 9 (1...
Read more