Interactive Design - Project 1/ Prototype Design

14.05.2024 -28.05.2024  / Week 4 - Week 6

Siang Huey Yee / 0369549

Interactive Design / Bachelor of Design (Honours) in Creative Media         

Project 1: Prototype Design - Digital Resume/CV

---

OUTLINE

• INSTRUCTIONS
• PROJECT 1: PROTOTYPE DESIGN - DIGITAL RESUME /CV
• FEEDBACK
• REFLECTION

---

INSTRUCTIONS

BACK TO OUTLINE

Module Information Booklet

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

---

PROJECT 1: PROTOTYPE DESIGN - DIGITAL RESUME /CV

BACK TO OUTLINE

Objective: In this first part of the assignment, we 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, colour 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 the 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, colour palette, and imagery.

1) Sketches

Figure 1.1 My Digital Resume/CV - Sketch 1 

Figure 1.2 My Digital Resume/CV - Sketch 2

Figure 1.3 My Digital Resume/CV - Sketch 3

Figure 1.4 My Digital Resume/CV - Sketch 4

I initially chose to digitize my Sketch 2 idea, but I received feedback from my lecturer, Mr. Shamsul that, although the idea was special, it lacked professionalism for my digital resume, which was slightly like an official website. Therefore, I later proceeded with Sketch 4's idea.

Figure 1.5 Sketch 2 Digitisation Process

2) FIGMA

I have continued my progress using the style of Sketch 4 in Figma, where I created the UI design prototype for my digital resume/CV. Below are the figures from Figma, embedded in code and available in PNG and PDF formats.

Figure 1.6 My Digital Resume/CV - FIGMA

FIGMA Embed Code: <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FldDbHlvPiSkaQ0XiUKFkYW%2FPROJECT-1---DIGITAL-RESUME%252FCV%3Fnode-id%3D0-1%26t%3Dort0slyM5wVjsgHB-1" allowfullscreen></iframe>

Figure 1.7 My Digital Resume/CV - PNG

Figure 1.8 My Digital Resume/CV - PDF

---

FEEDBACK

BACK TO OUTLINE

Week 6:

Mr. Shamsul commented that my idea was unique but lacked professionalism, as I initially wanted to design the digital resume as a website tab. Therefore, I later proceeded with my Sketch 4 idea, which Mr. Shamsul mentioned looked better.

---

REFLECTION

BACK TO OUTLINE

While completing Project 1 - Prototype Design, I acquired more skills and techniques on how to effectively use the FIGMA platform for creating a digital resume prototype design. This knowledge is essential for the subsequent assignments in Project 2, where I will create a real website using Adobe Dreamweaver, HTML, and CSS. Through this process, I not only improved my proficiency with FIGMA but also gained a deeper understanding of how to transition from a prototype to an actual website, which will be invaluable for my future projects.