Interactive Design Project 1 / Prototype Design

19.9.2023 - 3.10.2023 / Week 4 - Week 6
Tan Jian Xin / 0350784
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 1 / Prototype Design - Digital Resume / CV

---

INSTRUCTIONS
Objective: In this first part of the assignment, you will focus on creating a UI design prototype for your 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 your digital resume.

Requirements:

1. Content and Structure:

• Prepare the content for your resume, including personal details, education, work experience, skills, projects, and other relevant sections.
• Decide on the order and hierarchy of sections based on their importance and relevance.

2. Layout and Visual Design:

• Design the layout of your digital resume using the chosen prototyping software. Define the placement of different sections and how they will flow together.
• Apply a consistent visual design using typography, color palette, and appropriate spacing.

3. Sections and Organization:

• Organize your resume into logical sections, such as "Profile," "Education," "Experience," "Skills," "Projects," and "Contact."
• Prioritize sections based on their relevance and significance to the position you're targeting

4. Visual Elements:

• Incorporate relevant images, icons, or placeholders that align with the content and enhance the visual appeal of your digital resume.

5. Prototype Presentation:

• Update your e-portfolio explaining and showcasing the processes of the task
  
  

1. Sketches
We were instructed to sketch at least 5 wireframes for our prototype design.

Figure 1.1: Sketches of wireframes

2. Digitalization
Attempt #1
Firstly, I created a Desktop sized frame (1330 x 2249) in Figma as I have trouble installing Adobe XD. After that, I changed the grids to columns and increased the number of columns from 5 to 12.

Figure 2.1: Desktop sized frame

Then, I placed my profile pic in the rectangle tool and wrote my name and contacts using the text box tool. I chose Times New Roman as the typeface.

Figure 2.2: Adding profile pic, name and contacts

I then added the sections of 'Education', 'Experience', 'Skills', and 'Projects' with a sticky note like text background created with rectangles with shades of blue as its fill. 

Figure 2.3: Adding sections to my prototype design

Then, I added in the details for the sections stated above using the text box, Times New Roman typeface.

Figure 2.4: Details for sections

After that, I added 2 rectangles (pink filled) for the header and the footer.

Figure 2.5: Rectangles for header and footer

Below shows the exported prototype design for my prototype design.

Figure 2.6: Exported prototype design

Attempt #2
I altered the details of my profile and the placement of contact.

Figure 3.1: Attempt #2 prototype design

Attempt #3
I added the contacts for my blog and location. Besides, I also changed the font and the size of my profile picture. Other than that, I also changed the details for education and experience.

Figure 4.1: Attempt #3 prototype design

Figma: Digital Resume