Interactive Design / Project 1: Prototype Design

2024.05.14-2024.06.11 Week 4 - Week 8

Teh Ming En/0364908

Interactive Design-Bachelor of Design (Honours) in Creative Media--Taylors University

Project 1: Prototype Design

---

Instructions

---

Project 1: Prototype Design - Digital Resume/CV

 In this 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.

Requirements:

• Content and Structure
• Layout and Visual Design
• Sections and Organization
• Visual Elements
• Prototype Presentation

Visual Reference

Fig 1.1 Visual Reference

I go to Pinterest to find some visual references.

Sketches

Fig 1.2 Sketches 1-4

Fig 1.3 Sketches 5

After that, I come up with 5 sketches. They are roughly sketching because I have no too much idea about it. I decided to continue with the first sketch (upper left).

Digitize

Fig 1.4 Creating Background

Fig 1.5 Creating the Part of Technical Skills

In digitization part, I decided to use ellipses to represent my technical ability to manage the skills. I created several ellipses first and adjusted the arc and ratio of them. For the background, I just used a rectangle and adjusted the croner radius of it to decorate the resume.

Fig 1.6 First Attempt

After receiving feedback from Mr. Shamsul, I have to modify some details of my resume. I changed how I displayed my technical skills, making it simpler. After, adding more space to my resume and a few other details, my resume was completed. 

I chose to use beige as the main color because it matches my personal photos and is not too harsh.

Submission

Fig 2.1 Project 1: Prototype Design-Digital Resume

Reflection

In this project, I focused on creating a UI design prototype for my digital resume using Figma. Although I was not familiar with Figma, I have tried my best. I started by gathering visual references from Pinterest and sketching out ideas. After selecting a design, I digitized it, using ellipses for technical skills and a beige color scheme. The feedback helped me to refine the design, which included improving headings, adding white space, and adjusting shapes. This iterative process taught me the importance of feedback and the value of visual organization in creating an effective digital resume.

Feedback

Week 5:

My resume is clean but need to modify some details:

1. The heading is not obvious, it was suggested to use the bold text to make it easy to find.

2. The resume needs more white space, margins, and alignment.

3. The circles of the technical skills were suggested to change to the rectangular shape and it would be better.

4. The corner radius of the rectangle doesn't need to be too big, it was better at between 20 to 30.