INTERACTIVE DESIGN / PROJECT 1/PROTOTYPE DESIGN

18/9/2023 - 2/10/2023 / Week  1 - Week
Adriena Tan Yan Zi/ 0351236
Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Project 1 / Prototype Design

---

Instructions 

---

Project 1

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.

Drafting My CV

Looking for inspo 

I went both google and pinterest to find for the example wireframes and cv layout until i settle on which one best suits mine. 

Sketching Wireframes 

Figure 1.1 Wireframe 1 and 2

For these first two wireframes i'm just experimenting with the different elements like frames, lines and icons I can include to make it lighten up the overall layout and from these two i prefer the first one as all the necessary information is in a confined space which makes the overall layout looked neater. 

Figure 1.2 Wireframe 3 and 4

These are the third and forth wireframes I experimented with and quite like the left one as there is a good balance of elements used and information neat and legible. However in the end, i went for the first wireframe i drafted as I like the layout the best, simple and legible. 

Digitalising in Figma 

Figure 2.1 Layout frames

First of all, i tried to put the boxes and elements in to determine the placement of these elements and figure out where the rest of the information would go and look the best. 

Figure 2.2 About Me content

Putting in my name and personal information about myself, at this point I am still not very sure about the colour palette of my cv so I was just playing around with the colours of the font paired with the background. Soon, decided on going with the this blue palette. 

Figure 2.3 Education content 

Putting in the content for education and determine the text for the sub heading. 

Figure 2.4 Inserting achievements 

Putting in content for projects/ achievement following the same layout alignment as the education. 

Figure 2.5 Inserting experience 

Same goes the experience segment but just changing up the content with the same alignment. 

Figure 2.6 Inserting skills

For the skills segment I was a little puzzled as to what to include so I just put the skills i have learned during my degree and module that I have taken. 

Figure 2.7 Inserting contact details

Here I just simply put in the necessary contact information to reach out to me like my socials and phone number. The lecturer also taught us how to acquire the icons from Figma so I decided to included those icons as well for clearer identification of the information. 

Figure 2.8 Inserting background

Lastly, I went through a lot of images in search for a suitable background for my cv that suits both the layout and the aesthetic which then found this bluish butterfly background that I really like as I love butterflies. 

Figure 2.8 Final CV jpg

Got feedback from sir to change the colour which I also made changes to the colour and improve the layout a little. 

Final CV in Figma 

Click here, link to my Figma CV

---

Reflection

For this assignment I find it quite fun to do as we have the flexibility and freedom to experiment with the layout out of our CV but at the same time learn to do it on a new platform that I have never worked with before like Figma. Fortunately, it was quite easy to catch on the tips and tricks being taught in class. Along the way, I did faced trouble to find some tools or features in Figma as I am not familiar with this platform but with a little exploring, trials and errors I managed to get the hang of it and carry out the assignment smoothly. After this assignment, I have a clearer understanding on how to plan out layouts and form one without using the coding part, a clearer understanding on the content of a good cv.