Interactive Design- Project 1

26.09.2023-03.10.2023(week4-week7)

Guan Wee Lun/0364012

Interactive Design/Bachelor of Design in Creative Media

Project 1 CV Prototype

---

Content

1. Lectures
2. Instruction
3. Project 1
4. Feedback
5. Reflection

---

Lectures

    refer to lecture in task 1

---

Instruction 

---

Project 1

Prototype Design- Digital Resume/CV

Duration: 2 weeks

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.

Evaluation Criteria:

Your UI design prototype assignment will be evaluated based on the following criteria:

• Clarity and effectiveness of the UI design, layout, and visual elements.
• Appropriateness of the chosen typography, color palette, and imagery.

Process

Reference - I go to Pinterest to find some of the digital CV as my refence for my prototype.

Figure 1.1 reference 1

Figure 1.2 reference 2

Figure 1.3 reference 3

Sketch/draft - Firstly, I am using InDesign to make the sketch to know how my layout. For the layout part, my idea is as simple as I can, as it's a CV, simple increase the readability of cv, and in the starting point I am using just black and white but after that a warm yellow inside to make the cv not so boring.

Figure 1.4 Layout 1

After done the layout 1, I adjusted a little bit of the black space to made it not so boring.

figure 1.5 Layout 2

Figma- After doing my draft I tried to be made it in Figma, copying all of the data and text inside including layout.

I made some changes on the text as some of the text I think is not too worth it in a CV, and I put the vector and also the progression bar inside.

Figure 1.6 Progression 1

Figure 1.7 Progression 2

Figure 1.8 Progression 3

Final Outcome

link: Figma

Figure 1.9 Digital Resume Prototype.JPG

Figure 2.0 Digital Resume Prototype.PDF

---

Feedback

---

Reflection

By doing this design I experience a little bit of what a web designer does, In the first place I am thinking the submission will be responsive website. So, I tried to figure out how to make a website by CSS, it's super difficult but I learn a lot, it took me plenty of time doing it until I heard that this is just a prototype only, just using Figma to do it. Lesson to learn always check what is the requirement first before starting my task. but still I learn a lot on how to create box using CSS, and made the page become two colors. I took hours to learn that. By doing this CV prototype, I know that I need to develop more skill as my CV information is horrible, that's no company will hire me if I just submitted this. 

---