Interactive Design - Project 1 (Prototype Design)

15/05/2024 - 29/05/2024 ( Week 4 - Week 6 )

Chong Wee Han / 0368863

Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University

Project 1 - Prototype Design

---

LECTURES

Week 4 - Lecture 04

Week 5 - Lecture 05

---

INSTRUCTIONS

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

Project 1(Prototype Design - Digital Resume/CV)

Requirements for Project 1

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

I did some research on Pinterest for my visual references and I decided to go with the dark colour vibe resume.

Figure 1.1 Visual references

Wireframe

I did 5 wireframes and chose the second one as my digital resume layout.  

Figure 1.2 Wireframe 01

Figure 1.3 Wireframe 02

I want my resume to look like a website so I added a navigation bar on it. Mr. Shamsul also suggested me play with different fonts in my resume. The whole resume has a lot of star elements because that is my favourite element and it would be more representative of me.

Colour choice

Figure 1.1

Figure 1.2

I added this progress bar in my hard skills part.

Figure 1.3

I also added the icons of phone, email and blog that I found in Iconify.

Figure 1.4

Final Submission - Project 1

Figure 2.1 Final Outcome

---

REFLECTION

This task we are using Figma to complete with and this is my first time using Figma this websites. I figure it out with different layout of my resume because I want to make it more unique. I'm quite satisfied with the outcome and this is also my first time doing resume. I had gained a lot of knowledges that what should included in a resume when I'm doing my research. I believe that this would be useful for me in my future.