Interactive Design - Project 2

-

Interactive Design
28.8.2023 - 1.12.2023
Johnny Lam Wee Zhe (0363436)
Bachelor of Design in Creative Media  

 INSTRUCTIONS

 

 

 Project 2 - Working Web Page

The second project of our assignment is the extension of the the first project. In essence, we have create a working web page of our resume based on the prototype from our first project. To start off with my project, I first create HTML and add in content in the work page; with an exception of icons and small skill bars to indicate my level of expertise.

 
Fig 1.1 HTML Code Screenshot (22/10/2023 Week 7)
 
Fig 1.2 HTML Live View Screenshot (22/10/2023 Week 7)

Here is what the completed HTML looks like:

 

Fig 2. Completed HTML (22/10/2023 Week 7)

When doing the CSS part of the website, that is when I begin to encounter some troubles on what to do for my resume website. For example, in my initial part of the project; there is supposed to be a card slider below the resume where users can click arrows to move whichever way the card slider slides to. This however , requires a more in depth study of java script and due to the deadline, I have to drop it off and simply create the card instead.

I went up on Youtube and look for ways to create a still card with only HTML and CSS. Here is the tutorial I found.

Fig 3.1 HTML Card Tutorial

In addition to the card, I also have to look up on videos where I have to overlap different elements on each other as html in my first initial plan. Here is the video I follow:

Fig 3.2 Overlapping Element Tutorial

From the video above, I have learnt that the div can be use for inserting photo in to specially shaped box by using the background image attribute and that the hover effect can be applied to any elements in the webpage (however I didn't apply the later as I do not want user to think the card itself is a clickable link) and also, in order to overlap elements, the display can be used in a form of a grid and grids can be created. Then, I can use grid area to determined which part of grid can a specific element be place. If both elements are in the same grid/close by but one or either of them are big, the two elements will overlap.

 

 
Fig 4 Split Mode of Webpage and CSS code (23/10/2023 Week 8)

 From what I have gathered, this when I finish my first draft of the website:

Fig 5 Draft One (23/10/2023 Week 8)

During class, all the students have to show Mr. Shamsul the the webpage and he gave me some feedback to improved the site further. 

- Increase the contrast of the website.
-  Ensure that inline is applied to the layout when shrunk to a certain size
- Ensure that the border radius remains the same throughout the boxes
- Decrease the size of the shadow

In addition, my classmates also share some feedback on my website:

- Add some contrast (the exact feedback that Mr. Shamsul gave)
- Make the picture more light blue
- Consider applying color from my profile picture and apply it to the webpage

 

DRAFT

Following the advise, I make some changes onto the resume website and this is the resulting draft:

Fig 6.1 Final Draft (Computer View) (24/10/2023 Week 8)

 

 
Fig 6.2 Final Draft (Mobile View) 1 (24/10/2023 Week 8)

Fig 6.2 Final Draft (Mobile View) 2 (24/10/2023 Week 8)

 

Here is the link to the website for additional viewing: https://johnnylam-project2.netlify.app/

 

FINAL RESULT

After the supposedly final submission, Mr. Shamsul add an code for adding a progressive bar for the skill section of the website. I decide to add it to the website. Here is the final result:

Fig 7.1 Final Result (Computer View) (25/10/2023 Week 8)

Fig 6.2 Final Result (Mobile View) 1 (25/10/2023 Week 8)
 
Fig 6.2 Final Result (Mobile View) 2 (25/10/2023 Week 8)
 
Fig 6.2 Final Result (Mobile View) 3 (25/10/2023 Week 8)
 
Here is the additional link for more proper view of the final webpage:


REFLECTION

In my first initial design, the resume does not look so bad to me. I find it alright but on the second glance, it seems like it is missing something and I have yet to find out. Nonetheless, I have managed to create a resume of my own using what I have learn which brings a certain sort of satisfaction to me. Still, I believe that it still can be improved. My design skills does not reach to web page design especially when I have a tendency to design website as if it is a poster rather than actual website, especially with how big the words when viewed on screen.

Comments

Post a Comment

Popular posts from this blog

Minor Project Compilation

-
Minor Project 23.9.2024 - 5.11.2024 Johnny Lam Wee Zhe (0363436) Bachelor of Design in Creative Media  INSTRUCTIONS   TASK 1      TASK 2      TASK 3 INDIVIDUAL TASK PROCESS     REFLECTIONS Week 1 D – Describe objectively what happened On the very first week, I wasn’t really there with the rest of the group as my class takes place in the morning. I was initially joining another group from the morning class. Since Mr. Mike has mentioned that he has no problem with students joining the group of another class. I decided to join this group since there are people I am familiar with here. On the group chat, that is when we get to select our first role which is the first research. I choose technology for my part and to get research about the AR glasses this company uses. I – Interpret the events The reason why I decided to move is because my first group does not ...
Read more

Creative Writing Compilation

-
Image
Creative Writing 23/7/2024 - 3/1/2025 Johnny Lam Wee Zhe (0363436) Minor in Performing Arts INSTRUCTIONS ASSIGNMENT ONE - SHORT STORY ASSIGNMENT TWO - MONOLOGUE   ASSIGNMENT THREE - POEM WRITING ASSIGNMENT FOUR - PEER REVIEW MISCELLANEOUS  Book Cover for Short Story Fig 1. Wilted Yellow Flower Cover Monologue Character Background REFLECTION I have numerous thoughts about this module. I must admit that this module is actually a lot more fun than I have anticipated. All of the projects are something I found pretty interesting and I personally find the short story to be the most interesting of the four. This module not only taught me about creative writing but I also learn also learn more about myself in the process. One of the most challenging project I find in this module is Assignment Four. I have a difficult time giving critique about other people's work especia...
Read more

Portfolio

-
Image
JOHNNY LAM'S PORTFOLIO Navigational Link: 3D Animation Motion Graphics Animation Stop Motion Animation Animatic Video Editing Audio Editing Environmental Design Illustration    3D Animation   Fig 1. 3D Animation Motion Graphics Animation Fig 2.1 Motion Graphics   Fig 2.2 Motion Graphics 2   Fig 2.3 Motion Graphics 3   Fig 2.4 Motion Graphics 4 Stop Motion Animation Fig 3. Stop Motion Animation Animatic   Fig 4. Animatic   Video Editing Fig 5.1 Video Editing      Fig 5.2 Video Editing 2     Audio Editing Fig 6.1 Audio Editing 1   Fig 6.2 Audio Editing 2    Environmental Design   Fig 7.1 Environmental Design 1     Fig 7.2 Environmental Design 2     Fig 7.3 Environmental Design 3   Illustration   Fig 8.1 Illustrati...
Read more