Interactive Design: Project 1- Prototype Design

19.9.2023- 3.10.2023/ Week 4- Week 6

Kelly Lau Jie Ning/ 0354839

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

Project 1: Digital Prototype/CV

---

INSTRUCTION

---

Project 1-Digital Prototype/CV

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.

Progress

1. Research

First of all, I did the research using Pinterest for looking inspiration.

Fig 1.1 Research of Digital Resume from Pinterest

2. Sketch

After looking over all of the digital resumes, I started to do some sketches and list down my information in my sketchbook. I have done 5 sketches for the resume.

Information that can be put in the resume:

Name: Kelly Lau Jie Ning

Location: Selangor

Phone number: +6011-1314-6047

E-portfolio link: https://kellylaujieningdesign.blogspot.com/

Email address: kellylau0922@gmail.com

About me: I'm Kelly, a twenty-year-old with a passion for creativity and design. My MBTI personality type is INFP, which means I thrive in artistic and imaginative environments. Currently, I'm pursuing a Bachelor of Design in Creative Media at Taylor's University. I am enthusiastic about utilizing my creative talents to make a positive impact in the design industry and beyond.

Education: Primary school: (2011-2016) in SJK (c) Tung Hua, Secondary school: (2017-2022) in SMK Tung Hua, Foundation: (2022-2023) in Taylor’s College, Degree: (2023-now) in Taylor’s University

Skill: PS>AI> Id>AE>PR

Project: Typography (Task 1: Exercise 1- Type Expression, Task 1: Exercise 2- Formatting text, Task 2: Typographic Exploration and Communication, and Task 3: Type Design and Communication), Digital Photography and Imaging (Project 1: Physical and digital Collage, Project 2: Poster Design and Project 3(Final project): Self Titled) and Illustration & Visual Narrative (Project 1: Exercise 1- Vormator character, Project 1: Exercise 2- Illustrated typography, Project 2: MyTIGER Illustration Poster, Project 3: Digital Triptych and Final Project: Animated 1-page visual novel)

Interests: Cooking, Singing, Reading, and Drawing

Languages: Chinese> English>Malay

Fig 2.1 Sketch#1, 2, 3 and 4

Fig 2.2 Sketch #5

I chose Sketch #5 as my digital resume then I started to use Figma to digitalize it.

3. Figma
I tried to put all of the information in the frame first.

Fig 3.1 Resume without color and design

I got the icon of location, link, phone number, and email, from a plugin whose name Iconsax Icon Set by Iconduck. We can get a lot of icons using that plugin.

Fig 3.2 Iconsax Icon Set by Iconduck

I have found the PS, AI, Id, AE, and PR icons on the internet but they are all black and white bitmaps. So I use the plugin called Image Tracker. We can change our photo to vector by using Image Tracker.

Fig 3.3 Image Tracker functional page

Fig 3.4 Image after tracked

After that, I tried to add some color and pattern to the resume.

Fig 3.5 Resume after adding some color and design

For the wave shape on the top, I used the plugin which calls Get Waves to get it. We can get different types of waves for that plugin and we also can adjust the setting of the plugin to get the wave shape that we want.

Fig 3.6 Get Waves functional page

Then, for the gradient color of the wave, I created it using the plugin called Noisy Gradients. It can create a lot of different kinds of gradient colors. We can also choose the color that we want for make a gradient color.

Fig 3.7 Functional page of Noisy Gradient

4. After Feedback
Based on the feedback of Mr Rahman, I have changed my letter font and added the interest and language section. I added the extra section because I think the resume looks too simple and short. So, I added these two more sections. I tried to add more icons to make my resume don't look as simple as the previous one. I also changed the letter font to try to make my resume look like it's come out by a designer. I also created the grid and made the layout better for the final resume.

Fig 4.1 Resume with grid

Final outcome

The size of my final resume is 1064x1814.

Fig 5.1 Final Digital Resume- JPG 

Fig 5.2 Final Digital Resume- PDF

Fig 5.3 Final Digital Resume- Figma

---

FEEDBACK

Week 6

-Looks too simple.

-Letterfont didn't work. It didn't look like coming out from a designer.

-Can delete the column of the "About me" and "Education".

-Can delete the topic bottom line just need to put the above line.

REFLECTION

    Engaging in the process of creating this digital resume project has been an incredibly enlightening experience for me. It marked my initial foray into using Figma, a platform I had never previously encountered. To embark on this journey, I sought out tutorials to grasp the intricacies of Figma's tools and features, paving the way for a more confident and skillful utilization of the platform.

    As I delved deeper into the project, I embarked on a journey of self-reflection. I pondered questions like "Who am I?", "What can I do?", and "What have I achieved?" This introspective process wasn't just about building a digital resume; it was an opportunity to better understand my strengths, skills, and accomplishments. Through this self-exploration, I not only crafted a compelling resume but also gained a profound insight into my own personal and professional identity.