Labels

Interactive Design / Project 2

29.5.2024 - 29.6.2024 / Week 6 - Week 10
Bong Sue Zhiun / 0366866
Interactive Design / Bachelor of Design ( Hons ) in Creative Media
Project 2 / Working Web Page



TABLE OF CONTENTS








INSTRUCTIONS





PROJECT 2


Part 2: Final Design - Creating a Digital Resume/CV 


In this second part of the assignment, we will build upon the UI design prototype from Part 1 to create the final visual design of our digital resume or CV. Our focus will be on refining the visual aesthetics, enhancing user interface interactions, and ensuring a polished user experience.

Requirements:

1. UI Design Prototype Review:

  • Review feedback from Part 1 and make necessary improvements.

2. Visual Design Refinement:

  • Finalise typography, colour palette, and imagery to match our personal brand and resume tone.
  • Fine-tune design details for a polished, cohesive look.

3. User Interface Interactions Enhancement:

  • Add advanced interactions like animations and smooth transitions.
  • Ensure interactions improve user engagement and experience.

4. Technical Implementation:

  • Build the final visual design using HTML and CSS.

5. Presentation and Documentation:

  • Update our e-portfolio to explain and showcase our work process.

6. Evaluation Criteria:
  • Ensure the digital resume is visually cohesive, professional, and refined.
  • Add advanced interactions for an engaging user experience.
  • Make sure it works smoothly on different devices.
  • Follow accessibility guidelines.
  • Provide a clear presentation and documentation of the design process.


Here is the prototype for the resume that I created in Part 1 of the project.


Fig.1.1. Prototype created in Project 1 , Week 6, 30.5.2024



I started by cropping all the images I plan to use in this resume using Photoshop.

Fig.1.2. Progress in Photoshop , Week 10, 27.6.2024


I also traced the icons needed for the contact info section using Illustrator.

Fig.1.3. Icons created in Illustrator , Week 10, 27.6.2024


With everything prepared, I began coding all the information in HTML.

Here is the result before applying CSS:

Fig.1.4. Result before applying CSS , Week 10, 27.6.2024


After that, I opened the CSS file to style the layout according to the prototype. When I encountered something I didn't know how to do, I went to W3Schools to find solutions. Luckily, I was able to solve almost all of the problems using this website. The fonts I used in this resume are Playfair Display SC and Lora. 

Fig.1.5. Fonts selected in Google Font , Week 10, 27.6.2024



Final Outcome

Fig.1.6. Final Outcome , Week 10, 27.6.2024


Since the resume needs to be functional on various devices, I also incorporated media queries into the CSS. To enable the device mode in Chrome DevTools, click the Toggle Device Toolbar button or press Cmd+Shift+M . ( Right click > Inspect > CMD+SHIFT+M )


Fig.1.7. Adjust the layout for responsiveness on various devices., Week 10, 27.6.2024


To ensure it works, I also tested it by opening it on my phone. 

Fig.1.8. Screenshot of the website on my phone, Week 10, 27.6.2024


After receiving feedback from Mr. Shamsul during the week 11 class, I made a minor adjustment to the CSS coding of my resume.

1. Change the colour of the "view more projects" link.

Fig.1.9. Changes after refinement, Week 11, 4.7.2024


2. Change the css code from height: 90% to min-height: 100% for the experience section.

Fig.1.10. Changes after refinement, Week 11, 4.7.2024



Final Submission / Project 2: Working Web page




FEEDBACK

Week 11

Specific Feedback:Mr. Shamsul provided feedback on my resume design and coding, indicating that overall, everything looks fine. However, he noted two areas for improvement: First, the "view more projects" link should have its colour changed to match my colour theme, as the default colour may appear different and unmatched. Second, while the resume appears great on a phone, the experience section has an overflow of text when viewed on an iPad. He suggested adjusting the code from `height: 90%` to `min-height: 90%` to ensure the content remains within the box across different devices.


REFLECTION


Working on this digital resume project has been a challenging yet rewarding experience. One of the hardest parts was adjusting the layout to closely follow the prototype. It required careful planning and constant tweaking to ensure everything aligned perfectly. Once the layout was set, the next hurdle was making sure it worked seamlessly across different devices. Ensuring responsiveness without compromising the design was tough, but the process was also incredibly interesting and educational. This project has pushed my skills to new heights and deepened my appreciation for the intricacies of web design.


QUICK LINKS



Labels:

Comments

Post a Comment

Popular Posts