Labels

Interactive Design - Project 1 / Prototype Design

5.9.2023 - 3.10.2023 (Week 4 - Week 6 )
Chong Hui Yi / 0363195
Interactive Design / BDCM
Project 1 / Prototype Design

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/19K7sai7Rdfy3_GxqSVJlxpkQ_RCjyOUe/preview" width="640" height="480" allow="autoplay"></iframe>

Project 1: Prototype Design

Part 1 Prototype Design – Digital Resume/CV
"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."

Sketch 1

I first searched on Pinterest to find what a digital resume is. Then, I drew five drafts (in Fig. 1.1). After that, I decided to choose the second draft as my digital resume.

Fig. 1.0 Research, week 4 (23/9/2023)


Fig. 1.1  5 Sketches, week 4 (25/9/2023)

Digitization 1
I began exploring Figma, and its tools are straightforward. It's not complicated to use. I found icons for phone, email, web, and more in the 'Plugins' section.


Fig. 1.2 Placing Icons with Plugins, week 5 (1/10/2023)

I use the serif typeface "Antic Didone" for headings and subheadings, while I use the sans-serif typeface "Raleway" for regular text because I find that sans-serif fonts are easier to read and I like their clean appearance. (Including my blog, which also uses the "Raleway" font.)

I added a rectangular background line behind the title, and I was quite indecisive about where to place it. In the end, I decided to use the fifth one from Fig. 1.3.


Fig. 1.3 Trying out background rectangles in various positions, week 5 (1/10/2023)

I used icons to represent all the 'SKILLS' section, making it look more intuitive. Up to this point, everything was my first attempt at creating a digital resume. However, later on, I realized that I could turn the digital resume into a website, which would allow for more varied designs. So, I wanted to give it a try.

Fig. 1.4 First Attempt, week 5 (1/10/2023)

Sketch 2

Similarly, I sought inspiration on Pinterest, but this time, I didn't search for 'digital resume'; instead, I searched for 'landing page.' I found a wide array of designs, and after a lot of browsing, I selected a design that piqued my interest. I then created my second draft and showcased it in Fig. 2.1.


Fig. 2.0 Reference, week 5 (1/10/2023)


Fig. 2.1 Sketch #2, week 5 (1/10/2023)

I wanted the overall design to be soft, elegant, and minimalist. That's why I chose the colour palette from Fig. 2.3.


Fig. 2.3 Colour palette, week 5 (1/10/2023)

Digitization 2

For the Adobe icons in the 'SKILLS' section from earlier, I made more precise adjustments. Although there are plenty of alignment guides in Figma when dragging objects, there were times when I still couldn't see the exact distance between two elements that I wanted. Dealing with this issue was driving me a bit crazy. In the end, I used rectangles as rulers to measure the size of each gap, ensuring consistency. I found this method quite practical, and I've used it frequently since.


Fig. 2.4 Ensuring consistent gap sizes with rectangles, week 5 (1/10/2023)

I used my portrait photo as a grid, placing the subheading 'PROFILE' in the middle (I wanted it to partially obscure my photo, haha). In Fig. 2.5, I showcased the 'SKILLS' section with both dark and light backgrounds. After comparing them, I felt that the light background looked better. It provides symmetry between the subheading 'PROFILE' and the 'SKILLS' grid, while the dark background seemed a bit unbalanced.

To make the subheadings ('PROFILE,' 'SKILLS,' etc.) appear more concise and to avoid overly spacious grids, I increased their letter spacing.


Fig. 2.5 "SKILLS" section in 2 designs, week 5 (2/10/2023)

I included three 'Advanced Typography' projects because these three colours are relatively muted (though they still stand out somewhat). Using my other brightly coloured works would seem incongruous with the overall style.

I changed the background of the 'PROJECT' section to a dark colour to match the design of the 'EDUCATION' section, resulting in Fig. 3.0.


Fig. 2.6 'PROJECTS' section design process, week 5 (2/10/2023)

At first, I planned to design the 'CONTACT' section similarly to the 'SKILLS' section, but I found it looked too spaced out and didn't quite resemble a footer. So, I decided to put all my contact information in a single line.

Fig. 2.7 'CONTACTS section design process, week 5 (2/10/2023)

I felt that the content of my digital resume was somewhat limited, so I added an 'experience' section below the 'project' section.


Fig. 2.8 Adding 'EXPERIENCE' section, week 5 (2/10/2023)

Mr. Shamsul suggested that I make the theme colors more contrasting, so I tried several different color combinations (refer to Fig. 2.8). In the end, I found that I preferred the second one.


Fig. 2.9 Different theme colours, week 6 (3/10/2023)

Final Outcome:
Fig. 3.0 Final Digital Resume - JPEG, week 6 (3/10/2023)


Feedback

Week 6: The theme colors could be made more contrasting, but the layout is okay.

REFLECTION

In this project, I found joy in the design process, and time seemed to fly by unnoticed. Figma is an easy-to-use software compared to tools like Adobe Illustrator and Adobe Photoshop, and I only needed to use a few tools to create my digital resume. Honestly, I was quite worried during the design process about whether I could later code it in HTML. I lacked confidence! While my digital resume isn't very lengthy and doesn't have much content, I invested a lot of time in it. So far, I am satisfied with the results.
Labels:

Comments

Post a Comment

Popular Posts