INTERACTIVE DESIGN TASK 2: WORKING WEB PAGE

29.05.2024 -  29.06.2024 / Week 6 - Week 10

Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media 

Interactive Design / GCD60904 / Section 04

Task 2: Working Web Page

TABLE OF CONTENTS

1. LECTURES

2. INSTRUCTIONS

3. TASKS

4. FEEDBACK 

5. REFLECTION

LECTURES


Week 7- LECTURE 


Week 9- LECTURE


week 1 notes-proj 2: 

-coding

- convert prototype

-responsive

-when designing, consider platform 


INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1ShuHv1wfTw-F7hvr-nWHTBjzXIqC6PUD/preview" width="640" height="480" allow="autoplay"></iframe>

TASKS

PART 2: FINAL DESIGN- CREATING A DIGITAL RESUME/CVPAGE


In this task, we have to transform our static prototype from Project 1 into a fully functional and interactive web page. By applying our knowledge of web layout class to create a working website that closely aligns with our 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


PROCESS

For this task, I have made minor adjustments based on the feedbacks given during the first task. I made a copy of the resume in Figma, by making the title(EMILY GOH) bigger and using a sharper/vibrant colour, adjusting the font size, arrange certain words to make the overall look more balanced. In this task, I also removed the lines below the year at education section since it would be challenging to code, and the barcode as it was just something extra and unnecessary.

Fig T2.1 Updated UI design prototype for CV/digital resume in Figma

Fig T2.2 Updated UI design prototype for CV/digital resume


Fig T2.3 Comparison of before & after

HTML & CSS PROCESS 

At the top section, I created a heading 1 text for the largest word and added the colour of #BEFF7E to create a striking colour as the main focus. Then, I used heading 2 for the 'UI/UX DESIGNER', paragraph text for the short introduction under the profile image. Everything here were aligned to the right.

Fig T2.4 Top section Screengrab

Fig T2.5 Top section HTML

Fig T2.6 Top section CSS

At the navigation bar, I included the contact information, email and location. At the same time, I placed the icons beside each information.

Fig T2.7 Contact Info screengrab

Fig T2.8 Contact Info HTML

Fig T2.9 Contact Info CSS

Main body: 

Fig T2.10 Body screengrab

Fig T2.10 Body HTML

Fig T2.11 Body CSS

During the process, I also added an extra background colour to check the sizing of the box:
Fig T2.13 Process


UPLOADING TO NETLIFY

When I first uploaded the folder into Netlify, some issues occurred, the outcome of the webpage was completely different than what I've coded (i didn't take a picture). 

This was one of the problem that can be seen on phone. Therefore, I have adjusted the height at the #main in CSS.
Fig T2.14 Issue in Phone view

After changing the height at #main in CSS, I reuploaded many times in Netlify to check the outcome after uploading the webpage. 

Fig T2.15 Many attempts of reupload and checking


FINAL OUTCOME

Link to webpage.
Fig T2.16 Final Desktop View

Fig T2.17 Final Desktop View in PDF

 Fig T2.18 Responsive design screen recording



 
Fig T2.19 Final Phone View


Fig T2.20 HTML

Fig T2.21 CSS


FEEDBACK

refer to Task 1's feedback.


REFLECTION

Experience

This task was very challenging for me, still. I'm still not very great at understanding the coding part. At the top section, I took many tries to get the introduction to be placed under the image but it kept going to the side of the image. Through many attempts of adjustments on the padding and adding divs, I could finally make the position of introduction go below the image. For the main body part, I faced issue at the start, there was a huge space/gap in between the start of the content(SKILLS). I asked for assistance from my friend regarding this issue, and after many tryouts, I finally managed to reduce the space. The overall process was time consuming. However, comparing to the start, I slowly gained more understanding on the use of the codes and learnt that we need to practice a lot to gain knowledge and experiences. I believe I can improve myself better in my upcoming project.

Observation

This task taught me on observing the codes and details. To find out the problems from the groups and solve them. It requires really much observation and attention to details on the changes and errors.

Findings

Pay attention to details and solve the problems by observing, keep trying out till the outcome and result is correct and satisfying! Practice makes perfect.



QUICK LINKS


EXERCISES: WEB ANALYSIS & REPLICATE A DESIGN

TASK 1: PROTOTYPE DESIGN

TASK 2: WORKING WEB PAGE

FINAL PROJECT: DESIGN, EXPLORATION & APPLICATION

FINAL COMPILATION & REFLECTION







Comments

Post a Comment

Popular posts from this blog

APPLICATION DESIGN II TASK 1: APP DESIGN 1 SELF-EVALUATION & REFLECTION

Image
24.04.2025 - 15.05.2025  / Week 1 -Week 4 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Application Design I/ DST60504 / Section 01 Task 1:  App Design 1 Self-Evaluation and  Reflection TABLE OF CONTENTS 1.  INSTRUCTIONS 2.  EXERCISES 3.  TASKS 4.  FEEDBACK 5.  REFLECTION INSTRUCTIONS CLASS EXERCISES WEEK 3 EXERCISE To redesign a boarding pass based on prioritizing the main information. We were given an information page and we worked in groups to design a boarding pass. process Outcome WEEK 4 EXERCISE To create a task flow chart/wireflow chart for a booking app. Our group have chosen a cinema app (booking movie). Task flow chart for cinema app TASKS TASK 1: APP DESIGN 1 SELF-EVALUATION & REFLECTION  For this task, we need to reflect on the final project we created in Mobile App Design 1. The main goal is to evaluate the app we designed, identify what didn’t work so well, and think of ways to improve th...
Read more

INFORMATION DESIGN EXERCISES

Image
03.02.2025 - 17.02.2025  / Week 1 -Week 2 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Information Design / GCD60504 / Section 01 Exercises TABLE OF CONTENTS 1.  LECTURES 2.  INSTRUCTIONS 3.  EXERCISES ↪ EXERCISE 1 ↪ EXERCISE 2 4.  FEEDBACK 5.  REFLECTION LECTURES INSTRUCTIONS CLASS EXERCISES EXERCISE 1: QUANTIFIABLE INFORMATION Objective: Quantify raw data and visualize information through a photograph. Create a visual representation of numerical data that allows for easy interpretation and analysis. Instructions: Gather a set of objects and categorize them based on quantifiable factors such as color, shape, or pattern. Arrange the objects in a presentable layout or chart. Clearly label the quantities and data using written indicators (e.g., pens or markers). Example Objects: Box of LEGO pieces Jar of buttons Jar of marbles Set of colorful rubber bands M&Ms, coins, or other small items The goal of this exercise is ...
Read more

APPLICATION DESIGN FINAL PROJECT & E-PORTFOLIO

Image
11.11.2024 - 12.01.2025 / Week 8 -Week 16 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Application Design I/ DST60504 / Section 01 Final Project: Hi-Fidelity App Design Prototype & E-portfolio TABLE OF CONTENTS 1.  LECTURES 2.  INSTRUCTIONS 3.  TASKS 4.  FEEDBACK 5.  REFLECTION INSTRUCTIONS TASKS FINAL PROJECT: HIFIDELITY & E-PORTFOLIO After completing the low-fidelity app design prototype, I transitioned to the high-fidelity version. To start, I used the Color Shades Finder tool to refine the color palette. One of the issues with the Watsons app is its lack of a consistent color theme. While the current colors somewhat represent the brand and make the app recognizable, they can also feel overly distracting. For the high-fidelity prototype, I focused on creating a more cohesive and simple color theme. In the existing app, green, blue, pink, and various gradients are frequently used. For this redesign, I chose colors...
Read more