Interactive Design | Task 1: Prototype Design (Digital Resume/CV)

16/5/24 - 30/5/24 | Week 4 - 6

Iman Mikudim | 0338004 | Section 1

Interactive Design | Bachelor of Design (Hons) in Creative Media 

Task 1: Prototype Design (Digital Resume/CV)

---

SECTIONS

|  Instructions

|  Feedback

|  Reflections

---

INSTRUCTIONS

Brief

In this first part of the assignment, we will focus on creating a UI design prototype for our digital resume or curriculum vitae (CV) using prototyping software such as Adobe XD or Figma. The UI design prototype will showcase the layout, visual elements, and user interface interactions of our digital resume.

Process

Fig 1.1 Wireframe Sketches | Week 5 (23/5/24)

I started out with a few sketches to get a rough idea of my layout and I ended up choosing the 5th layout because I thought it was the most simple and clean of the options, with related categories grouped together to reduce the overall length of the website.

Fig 1.2 Progress section by section | Week 5 (23/5/24)

For my fonts, I decided on 2 sans-serif fonts; Raleway and Jost due to their complementary geometric styles, balancing elegant headings and readable body text, giving a modern and professional appeal.

Fig 1.3 Progress bar | Week 5 (23/5/24)

I learned how to create the progress bar from a YouTube tutorial that demonstrated how to use 'sweeps' to adjust the various angles. I wrote down the steps I took to create it.

Fig 1.4 Initial Wireframe Prototype | Week 5 (23/5/24)

Fig 1.5 Final Wireframe Prototype | Week 6 (30/5/24)

After receiving feedback from Mr. Shamsul, he noted that the overall layout and structure were good; however, there was no need for a navigation bar. I removed it and proceeded with adding my colour scheme to the layout.

Fig 1.6 Visual References & Colour Scheme | Week 6 (30/5/24)

The visual references above depict my intended colour scheme, which is a mix of neutrals with a dark green and pink accent colour.

Fig 1.7 Initial Colour Application | Week 6 (30/5/24)

After applying the colours as I saw fit, I wanted some sections to have the accent colour stand out more, so I refined it and added some shadows to achieve the effect in my profile image and the containers in the skill section.

Fig 1.8 Final Colour Application | Week 4 (30/5/24)

Fig 1.9 Full Prototype Process | Week 4 (30/5/24)

Final Prototype Design

Fig 1.10 Final Prototype Design (JPEG) | Week 6 (30/5/24)

Fig 1.11 Final Prototype Design (PDF) | Week 6 (30/5/24)

Fig 1.12 Full Prototype Process & Design (Figma) | Week 6 (30/5/24)

---

FEEDBACK

Week 6 (30/5/24)

• Overall layout and structure were good.
• No need for a navigation bar.
• The colour scheme is okay.
  
  

---

REFLECTIONS

I really enjoyed this task as it allowed me to not only build my own resume but also understand how to properly structure content effectively and for readability. Due to my familiarity with Figma, I had a positive experience working on this project and had fun experimenting with the wireframe layout to give users a convenient but engaging experience. I had to ensure it was straightforward to avoid complications during coding. I noticed there are numerous approaches to creating a CV or resume; small details like typography, colour, font, and graphic design elements can completely alter the overall impression.

---

QUICK LINKS

|  Exercises

|  Task 2: Working Web Page

|  Task 3: Creating a Single-Page Website