Interactive Design/ Project 1: Prototype Design

14/05/2024 - 28/05/2024 / Week 4 - Week 6

Lim En Yu / 0354452

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor’s University 

Project 1: Prototype Design

---

TABLE OF CONTENTS

1. Instructions

2. Project 1: Prototype Design

3. Feedback

4. Reflection

---

Instructions

Fig 1.1 Module Information

---

Project 1: Prototype Design

Objective: In this first part of the assignment, we will focus on creating a UI design prototype for our 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 our 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.

Inspirations/ Visual References

As there are so many types of CV and resume, I wanted to find some inspirations on the art style and art directions. Therefore, I have looked for some examples on Pinterest.

Fig 2.1 Visual References from Pinterest, Week 4 (19/5/2024)

Sketches

After reviewing the examples online, I have done a few sketches with different arrangement of informations. At the end I have chosen sketches #2 as it looked neat and clean among all and has the best composition design.

Fig 2.2 Sketches, Week 5 (21/5/2024)

Next, I decided to set the colour of my digital resume as blue and I have found the colour palette that I prefer on colour hunt. Here is the colour palette chosen:

Fig 2.3 Colour palette chosen from colour hunt, Week 5 (21/5/2024)

First, I use the colour to differentiate two part of my resume following the sketch which is left and right. I started by importing my picture on the up right corner.

Fig 2.4 Pregression in Figma #1, Week 5 (21/5/2024)

Then, I estimated the area needed for each sections on the right side by placing the title first. Also, I have added a frame for my picture.

Fig 2.5 Pregression in Figma #2, Week 5 (21/5/2024)

I have also added the title on left side and separate them with a border line so that it looked more neat and nice.

Fig 2.6 Pregression in Figma #3, Week 5 (21/5/2024)

Lastly, the digital resume is completed when I added all the informations for each sections with some icons, graphic elements and also bullet point to make sure everything is labelled clearly and arranged orderly.

Fig 2.7 Pregression in Figma #4, Week 5 (23/5/2024)

Changes after Mr Shamsul's feedback in class:

I have made changes on the whole layout of my digital resume design as Mr Shamsul says that we need a catchy and outstanding profile that can attract audiences' attraction at first sight.

Therefore, I have modified the overall design in a more attractive and interesting alignment that are not similar with the references found on Pinterest.

First, I have added navigation bar on top of the resume.

Fig 2.8 Added navigation bar, Week 6 (28/5/2024)

Also, I have changed the style of my profile picture with transparent background and place some elements behind my picture to create depth and make the overall design more attractive. Other than that, I also added a slogan under mt introduction.

Fig 2.9 Insert of profile picture and slogan, Week 6 (28/5/2024)

Aside from that, I also changed the way I presenting the information for education and experiences which changes it into timeline graph which more easy to understand.

Fig 2.10 Present both sections in timeline graph, Week 6 (28/5/2024)

Moreover, I separated language while it falls beside with abilities by placing a textbox underneath it.

Fig 2.11 Added of boxes, Week 6 (28/5/2024)

The same goes to skills section, I also apply the text box to create a more interesting layout.

Fig 2.12 Separated sections, Week 6 (28/5/2024)

Final Outcome of Project 1 Prototype Design:

Fig 2.13 Final Outcome of Project 1 Prototype Design (JPEG), Week 6 (28/5/2024)

 

Fig 2.14 Final Outcome of Project 1 Prototype Design (PDF), Week 6 (28/5/2024)

Fig 2.15 Final Outcome of Project 1 Prototype Design, Week 6 (28/5/2024)

---

Feedback

Week 6: Mr Shamsul says my digital resume looks OK only as its design layout is too common and same like those examples on Pinterest. We must have an outstanding layout instead of a normal style digital resume. The profile must be attractive at first sight

---

Reflection

Actually this project is not very challenging as we just need to create the layout that we are going to code it out during project 2. However, this project also trained my design layout skill and also how I could make this web page more attractive in terms of different layout.

This is very helpful for me as I learned that while constructing the prototype, the wireframe is very important also, not only the coding part.

In conclusion, this project is only a start for me, I will try to challenge myself on the next project although I don't have enough confidence on it.