Interactive Design: Project 1

| 14.05.2024 - 28.05.2024 (WEEK 4 -WEEK 6)

| Tang Chin Ting [ 0366473 ]
| Interactive Design / Bachelor of Design in Creative Media
| Project 1: Prototype Design

---

LECTURES

Every week's lecture can be found in Interactive Design: Exercises

---

INSTRUCTIONS

---

SUBMISSION

Part 1 Prototype Design – Digital Resume/CV

In this first part of the assignment, we 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.

Research

First of all, I began by searching for online references to gather ideas before starting the assignment. I discovered a wide variety of design styles for resumes, so I selected three of them as my references.

Figure 1.1 References from Pinterest

I particularly like the middle one because it includes more illustration elements. However, I'm concerned that having too many illustrations might make the resume look cluttered, making it difficult for viewers to grab all the information. Therefore, I'm torn between choosing a simple style or one with more illustrative elements for my resume design.

Sketch

I have sketched out five ideas, but I prefer the first one the most. However, it is a bit too long, so I need to add more content and I am concerned that developing the final design using HTML/CSS code will be challenging.

Figure 1.2 My lovely sketches with 5 ideas

Content and Structure

For the first step, I followed the lecturer's instructions to list down my information and also look for the content of the references since I had no idea what I needed to add to my resume.

Figure 1.3 Myself Information's Docs

Color Palette

I have decided to use this palette for my design which is the "Morandi Color Palette". This is the recommended color palette that I found online and I like it so much.

Figure 1.4 Color Palette that I decide to use

Digitize the outcome

I first chose a color palette for my design, but my roommate suggested that it looked a bit lifeless. Based on her feedback, I decided to use brighter colors to enhance the overall design.

Figure 1.5 First step digitize in Figma

Figure 1.6 Processing My Outcome

After that, I created a gradient background inspired by this reference, choosing light purple and light yellow as the main colors to make the design look lively and eye-catching.

Figure 1.7 A New Reference

In my design, I have used rectangles to frame the text, enhancing readability compared to placing words directly in the background. These text boxes are also used to highlight section headings. Additionally, I included a larger "HELLO!" in the profile explanation to catch the viewer's eye and add an element of surprise.

Figure 1.8 Processing My Heading

Initially, I decided to arrange the education and experience sections within the same horizon. However, I found out that the experience section lacked space, which made me redesign the layout for better clarity and organization.

Figure 1.9 Processing My Text

Figure 1.10 Processing My Additional Information

In this part, I attempted to find high-definition transparent PNG logos for the Adobe software but failed. Therefore, I opted to create a square for each logo. Additionally, I included some tags at the bottom to showcase my areas of specialization to employers.

Figure 1.11 Processing My Software Skill

The project section was easier than expected. I found images online and inserted them. To better match each image with the project title, I placed a rectangle over the images and set it to multiply. However, the titles were still hard to read, so I reduced the opacity of each image to 50%.

Figure 1.12 Processing My Project Section

Figure 1.13 Processing My Project Section (2)

I drew out the Instagram and Email logo, while for the phone and location icons, I used the one from online.

Figure 1.14 Processing My Project Contact Information

Moving on to the final stage, where I need to choose the most suitable portrait. At first, I used Figure 1.15 for my resume, but I gave up on this as it was a bit bland and less engaging. Therefore, I used the 2nd portrait which I find is more engaging and it clearly portrays the vibe I am showing to the employer which is amiable. 

Figure 1.15 & 1.16 Processing My Profile Photo

Figure 1.17 Processing My Profile Photo (2)

After receiving feedback from my lecturer, I made several adjustments. First, I removed the box behind the "HELLO!" text box to simplify the design. Next, I realigned all the text to ensure it was properly aligned. Additionally, I changed each subheading to the font 'Almendra' for a more cohesive look.

Figure 1.18 Rearrange Some Issues Following Lecturer's Feedback

Lastly, I also made some adjustments to my profile section and the top and bottom text "RESUME".

After the feedback given by our lecturer on the next day's class, I made some arrangements. I first rearranged the alignment between all text to make it look more organized and removed the line beside the "education" and "experience" sections.

Figure 1.19 Prototype Outcome JPG

Final Color Palette

Figure 1.20 Final Color Palette JPG

Final Prototype

Font Use

Heading: Inter (400 px)

Subheading 2: Almendra (160 px)

Subheading 3: Almendra (80 px)

Text: Inria Serif (40/32/30/25 px)

Figure 1.21 Final Prototype Outcome JPG

Click here for the Figma link!

Figure 1.22 Final Prototype Outcome PDF

---

FEEDBACK

Week 5:

Don't make it too hard, please make it simple. Since you need to code out your digital resume during your Project 2. If you can't code it out and you want to change the outcome that is not acceptable.

Week 6:

Our lecturer said that the layout looks okay but can be improved. I need to show that you are really a UI/UX designer. Plus, don't make the box like that. Make it simple. Besides, the top can make it more interesting and make sure all elements are well aligned.

---

REFLECTION

In this task, I first struggled with designing my resume. I turned to Pinterest for inspiration as I was confused about how to start. Once I began, I added my preferred color palette to the design. I asked for feedback from our lecturer and learned the importance of typesetting. Following the lecturer's guidance, my layout improved significantly. I realized that creating a professional composition is challenging; too many boxes can be messy, while too few can't highlight information. I added some boxes behind the text for clarity. Although my outcome may not look highly professional, I am committed to learning and improving for future tasks.