Interactive Design - Project 2

19.6.2024 - 29.6.2024

Ruthlene Chua Zhen Si 0365222 

Bachelor of Design (Honours) in Creative Media - Interactive Design

Project 2 - Working Web Page

  • Instruction
  • Task 
  • Reflections

INSTRUCTION

 

Task_Working Web Page

  • For this particular task, we need to review and analyze our static prototype from Project 1, focusing on its layout, typography, color scheme, and imagery. 
  • Next, use HTML and CSS to translate these design elements into code, ensuring the implementation closely matches the original prototype. 
  • Strive for pixel-perfect accuracy while also ensuring the design is responsive and compatible with various devices and screen sizes.
  •  Finally, upload the completed file to Netlify, update your e-portfolio with a detailed blog documenting the entire process, and submit the link as your final submission.

The webpage for self-resume has been completed during project 1, therefore for this assignment, we can start to move forward to convert them into coding in Dreamweaver. 

I first started with creating the elements on the top, the square, and the diamonds but I realized that the elements are not available to present. Therefore, I try to use images instead. 


Then, I moved on to the contact part, I was struggling with the alignments and also the position of the information (phone number, Instagram, email), therefore I tried to create a box and then make adjustments on the font size and placement. 


CSS box: 


Moreover, I started to do the self-information bars, due to the column that I have designed, it was separated to two different categories. To make it appeal, I inserted a coding (container) to let one content stay in its column to make it tidier. 


CSS, coding for container and alignment: 


This is the code to create the dots. I experimented with using an image, specifying dotted sizes, and various coding elements. After researching online, I opted for the simplest method that proved to be the most effective.


Aligning the three hobby images together was a bit challenging, but I managed to achieve it. However, I still faced difficulties in making the spacing more flexible.



This is quite similar to the part just now, so I tried a similar method but changed the coding a little due to its size and the placing. For this particular part, the images are inside a boxes, therfore it was needed to create box around them. I tried to just putting the outline for the pictures but it doesnt work well and it looks solid. 


Codings for the boxes: 


Last but not least, the wording arrangement. For the entire resume, I focus on 2 wordings. One was the Merriweather and another was the Roboto Mono to ensure it's cleanest and great looking appearances. 


Apply all the family font link to css and link into html and done!


Coding for the entire resume in pdf format (html & css): 


Website resume pdf format :


LINK TO WEBSITE: https://resume-ruthlene.netlify.app/

REFLECTION

Experience:

For this task, I took my static prototype from Project 1 and turned it into a real web page using HTML and CSS. I started by recreating the design elements from the prototype, like the squares and diamonds, but had to use images instead since the original elements weren’t available. Next, I worked on the contact section, which involved a lot of tweaking to get the phone number, Instagram, and email aligned just right. I created a box around the contact info to help with positioning and adjusted the font size for better placement. I then moved on to the self-information bars, using a container to keep the content neatly arranged in columns.

Observation:

I noticed that aligning and positioning elements was tougher than expected. The hobby images and contact info required several adjustments to get them looking right. For creating the dots, I tried a few different methods before finding the simplest one that worked best. Making sure everything was responsive on different devices and fixing the spacing issues took some extra effort. Dreamweaver helped with the coding, but getting everything to match the prototype and look good on all screens was a bit challenging.

Findings:

I learned that converting a static design to a working web page takes a lot of attention to detail and flexibility. Finding practical solutions for design elements, like using CSS containers for alignment and experimenting with different methods for dots, was crucial. Ensuring the page was responsive and adjusting the spacing for a clean look were key to getting it right. Lasttly, coding was really tiring but fun to learn. 

Comments

Post a Comment

Popular posts from this blog

Information Design_Exercise

Image
5/2/2025-19/3/2025 Ruthlene Chua Zhen Si 0365222  Bachelor of Design (Honours) in Creative Media  Instruction Lectures Class Summaries Task Exercise 1 (Quantifiable Information) Exercise 2 (L.A.T.C.H information poster) JUMPLINK TO: PROJECT 1 &1.2 PROJECT 2 (GROUP PROJECT) Feedbacks  Reflections INSTRUCTION Class Summaries  Week 1_5/2/2025 : Introduction to Infographics Infographics are a great way to present information in a visually engaging and easy-to-understand format. They combine text, images, and design elements to make data and ideas more digestible. Compared to traditional text-based content, infographics capture attention more effectively and improve retention. Types of Infographics There are eight main types of infographics, each serving a different purpose: List Infographics – Organize information into a structured list while using visuals to enhance readability. Statistical Infographics – Present data using charts, graphs, and percentage indica...
Read more

Sonic Design_Final Project

Image
 21/4/2025-21/7/2025 Ruthlene Chua Zhen Si 0365222  Bachelor of Design (Honours) in Creative Media  Instruction Lectures Task  Game audio_Final Project   JUMPLINK TO: Sonic Design Exercises Sonic Design Project 1 Sonic Design Project 2  Reflections INSTRUCTION Task For this assignment, we were tasked with selecting one gameplay clip out of five options and producing a complete, original soundscape to accompany the visuals. All audio had to be created independently, without using pre-existing or third-party sound sources.  I decided to work with Hollow Knight because its visual style and overall tone appealed to me creatively. Since I’ve played the game before, I already had a rough idea of how its world should sound, which helped guide my approach.  However, since I played the game a long time ago and couldn’t clearly remember how it sounded, I referred to a few gameplay videos to refresh my memory and get a better sense of the game's audio ...
Read more

Sonic Design_Exercises

Image
21/4/2025-21/7/2025 Ruthlene Chua Zhen Si 0365222   Bachelor of Design (Honours) in Creative Media   Instruction Lectures Class Summary  Task  Adjustment of the sound equalizer using Adobe Audition Adjust different sound effects depending on its environment sound equalizer using Adobe Audition 2 Environment  Audio Fundamentals JUMPLINK TO: Sonic Design Project 1   Sonic Design Project 2 Sonic Design: Final Project  Feedbacks   Reflections INSTRUCTION Lectures Week 1_21/4/2025 The required task for this week is to write a reflection blog about what we have learnt through the lecture videos below: Link 1 Link 2 Link 1: Sound Fundamentals Figure 1.0: Sound fundamental video on YouTube  Nature of Sound: Understanding how sound behaves and what contributes to its creation. Capturing Sound: How sound is recorded using various techniques and equipment. Processing Sound: Analyzing and manipulating sound for specific purposes and m...
Read more