Interactive Design - Project 1: Prototype Design - Digital Resume

14.5.2024 - 1.6.2024 (Week 4 - Week 6)
Vanessa Kei Kurniadi / 0360525
Bachelor of Design (Hons) in Creative Media
Interactive Design - Project 1: Prototype Design - Digital Resume

---

INSTRUCTION

Project 1: Protoype Design - Digital Resume

For this project we were instructed to try to make a prototype of our own CV using Figma. We need to think on how we want the resume to look like, from the overall UI design and layout, to what information and details we want to provide and offer to the potential clients.

Below is the complete instruction for the project:

fig 1.1.1 Instruction for project 1: Prototype for Digital Resume, week 4 (14.5.2024)

Visual References

I put some of the visual references I have on Miro and gave some notes on why I really like them.

fig 1.2.1 Visual references for Digital Resume Prototype, week 5 (22.5.2024)

Link for all images here:

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

Color Palette

I personally really love the color palette on the first image from my visual references, so I want to follow it for my own CV. To do this, I go to a Coolors color palette extractor and extracted the color from the image.

fig 1.2.2 Color palette extracted from one of my visual reference.

Content

Here are some of the contents that I want to provide on the resume. It includes my profile, education history, experiences, projects, and skillsets.

fig 1.2.3 Planned content for the resume, week 5 (24.5.2024)

Sketches

I was consulting with a friend of mine who had some experience with UI designing, and after some consideration and looking up through references on Pinterest, I've come up with 3 designs, and I really like my 3rd one.

I have the overall layout ready (I will make minor changes and maybe some looks changes if I think necessary, but this should be fine) but I can't really picture the other decorations and images. I am planning to do it on the get go.

fig 1.2.4 my sketches; left: 1st and 2nd sketch; right: 3rd sketch, week 5 (24.5.2024)

Figma

I have made a Figma account for this project. Mr Shamsul told us that to start, we need to create our canvas on desktop size, and increase the length to as long as we need it.

fig 2.1.1 creating my canvas in Figma, Week 6 (27.4.2024)

The next thing I did was to create a simple layout on the canvas. For this part I asked a lot to my friend on how to navigate and do things, because I always get a bit frustrated when learning new applications.

fig 2.1.2 creating the first 2 sections of my resume, week 6 (28.4.2024)

Then I proceeded to beautify the layout and star adding my pictures there. I learned how to do masking and especially how the layers work here.

My friend gave me some tips, that the orange works well with the color palette I chose. So I gave some orange colors for the elements in the resume.

fig 2.1.3 Resume UI progress 1, week 6 (30.5.2024)

For my interests, I was going to put some images there, but they stand out in such a bad way, so I changed them into simple icons. These way they blend with the overall look and still looks really nice.

fig 2.1.4 Resume UI progress 2, week 6 (30.5.2024)

Underneath the profile, I started to work on my education, experience, and skill sets section. It just feels right to put them together because in some sense, they are connected. And they can also be put under "About me" section because they are still about who I am.

fig 2.1.5 Resume UI progress 3, week 6 (30.5.2024)

Next is my skill sets. For this part, instead of the ambiguous bar, I was advised by my friend to use the dots system instead, and I agree cuz it also makes it somehow looks neater.

fig 2.1.6 Resume UI progress 4, week 6 (30.5.2024)

I didn't have much things to display for my projects section, so for now I am displaying my past works from my previous courses. There is a "see more" to display more, though for now that one is just for decoration.

Lastly I just add the "Thank You" text, plus telling the clients that I am looking forward to working with them, and repeating my buttons so they don't have to scroll up to do it.

fig 2.1.7 Resume UI progress 4, week 6 (31.5.2024)

Here is how my progress looks so far, and it looks like it's already coming together, and I'm liking how it looks overall.

fig 2.1.8 Resume overall progress 5, week 6 (31.5.2024)

After some consideration, I made a little change on the timeline section in hope it'll be easier for me to do in Dreamweaver later.

I also removed the buttons on the footer section because I think it's too much repetition of the same button.

Here's how it looks like now:

fig 2.1.9 Made some changes in the timeline section, week 6 (31.5.2024)

Final Look

fig 2.1.10 Resume final look, week 6 (31.5.2024)

fig 2.1.11 Resume final look PDF, week 6 (31.5.2024)

---

FEEDBACK

Week 4

• Get to know on how to make headings, sub headings, paragraphs, etc
• Complete my biodata information for my CV project

Week 5

• No Feedback (Public Holiday)

Week 6

• Finish the CV layout on Figma, submission is extended to Friday
• Learn on how to do the class and id attributes
• Keep note that I have 3 extra marks from class

---

REFLECTION

Experience

This project has been a fun yet challenging one for me. I am not really a person who give much thoughts on UI/UX things, so it was a challenge to come up with a good one for my own project. Not only that, this is also my first time using Figma, so I needed a bit more time to get used to everything.

I also had to learn some basic UI coding into Adobe Dreamweaver. I did have some coding class in the past during my highschool days, and fortunately I was, and still am quite a fast learner in this field. Mr Shamsul has also been really patient and helpful in all my problems and questions. I am really grateful for all the help given by my friends and lecturer.

Observation

I noticed some of my friends are doing much better than me, either in understanding of UI or UX, as well as the coding itself. But that won't stop me from trying my absolute best on this course.

Findings

In this project I have found out how to navigate and do basic work on Figma, as well as how to make some codes with Adobe Dreamweaver. I have also learnt some things, phrases, and elements of a web, as well as what each parts of a web does, which are the HTML, CSS, and JavaScript.