Interactive Design - Project 1: Prototype Design - Digital Resume/CV

15.05.2024 - 29.05.2024 / Week 4- Week 6

Teo Mei Hui / 0358315

Interactive Design / Bachelors of Design (Honors) in Creative Media / Taylor's University

Project 1: Prototype Design - Digital Resume/CV

---

CONTENTS

1. Lectures

2. Instructions

3. Task

4. Feedback

5. Reflections

---

LECTURES

Week 4

Figure 1.1 Web Standards Lecture

Week 5

Figure 1.2 HTML & CSS Lecture

---

INSTRUCTIONS

---

TASK

Part 1 Prototype Design – Digital Resume/CV

We are tasked to create 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:

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

Process

Research

First, I gathered visual references online to look for inspiration and find out how resumes are usually designed. There are many different styles and layout.

Figure 2.1 Visual references

Sketches

Then, I created 5 rough sketches, I didn't really have a clear idea on what I wanted yet. The layout that I ended up using was inspired by the 3rd sketch.

Figure 2.2 Sketches

Figure 2.3 Sketches

Content

I listed down any of my information that can be used as content for the resume.

Figure 2.4 Preparing content

Digitization

I installed Figma and started to create my resume prototype. I started by inserting all the contents and images that I would like to try using.

Figure 2.5 Inserting content

Then, I chose the typeface that I liked and also adjusted the font sizes. I used Limelight for the headers and ITC Garamond Std for the body texts.

Figure 2.6 Choosing typeface

Next, I constructed the icons for the Adobe applications, as I could not find the complete set online. I also constructed the proficiency level indicator. Fortunately, some of the icons are vectors that I found online, which saved a lot of time.

Figure 2.7 Constructing icons and graphic elements

Moving on, I edited my own image by masking it to make it fit the rounded rectangle element.

Figure 2.8 Masking image

After I was done setting up the typography, images, icons and visual elements, I started arranging the layout. 

Figure 2.9 Arranging layout

Once I was done with the layout, I started exploring different color scheme, I went with the blue one as blue feels more professional.

Figure 2.10 Choosing color scheme

I made some last adjustments and was ready to submit.

Figure 2.11 Final design (before feedback)

Refinement

I got feedback from Mr. Shamsul, he advised me to change my header's typeface, it's not really suitable as it does not really reflect my identity of UI/UX Designer. So, I changed the header typeface to Inter, which is most recommended for UI/UX design (according to the first search result shown by Google). I was thinking if I should change the body text as well but it looked fine so I didn't.

Figure 2.12 Changing typeface

Mr. Shamsul also suggested I change my color scheme. He sent me a few pictures of colors he would recommend, all which are more futuristic and techy colors. I took one of the pictures I liked as reference and based my color scheme on it.

Figure 2.13 Suggested colors by Mr. Shamsul

Figure 2.14 Final color scheme

Something was still lacking (it looks so canva), so I tried applying gradient, which gave it a more modern-look. I was finally satisfied enough with it.

Final

Figure 2.15 Final Resume/CV UI Design Prototype (JPEG)

Figure 2.16 Final Resume/CV UI Design Prototype (PDF)

---

FEEDBACK

Week 6

Mr. Shamsul said that if it were up to him, he wouldn't use the typeface for the heading. It doesn't really reflect myself as UI/UX designer. The design doesn't really show that I'm a UI/UX designer. Instead, opt for typeface with a more techy look. Try to explore other color schemes as well, something more futuristic.

---

REFLECTIONS

Through this task, I was able to learn how to create an effective CV by using good layout and visual design as well as appropriate typography and color schemes. I also learned how to use Figma to create design prototypes. Figma was quite simple and easy to use, which was fortunate, because I had quite a hard time figuring out the design for my CV. It looked too simple and unprofessional at first so I was unsatisfied with it, after some advise from Mr. Shamsul, I was able to improve it. It is not easy to create a CV that is concise but still visually aesthetic. This was a great learning experience, it will definitely help me create a better CV in the future.