Interactive Design | Project 1 : Prototype Design - Digital Resume / CV
16.05.2024 - 30.05.2024 Week 4 - Week 6
Tracy Angeline Tio / 0362222 / Bachelor of Design ( Honors ) in Creative Media
Interactive Design / Taylor's University
PROJECT 1 : PROTOTYPE DESIGN - DIGITAL RESUME / CV
After that, I preparing what content I'm gonna used for my CV, which is :
When I made the contact logo, I used Plugins (can find in Figma menu) and manage the plugins. The logo I used for the contacts are phone, email, location and work (portfolio).
Next, I added the information about my introduction, education, experience and my honors and awards.
After several hours, I finally finished my first attempt of Project 1.
I changed up the circle path become a line and I also added some stroke in software skills. Lastly, I added up some of my social media account on the bottom page.
Out of two attempts, I did not find it good because the I think the photo looks darker. Therefore, I decided to create a white outline for the photo like a sticker to made the images stand out more.
FINAL OUTCOME
Interactive Design / Taylor's University
PROJECT 1 : PROTOTYPE DESIGN - DIGITAL RESUME / CV
TABLE OF CONTENTS
LECTURES
All Lectures are on Interactive Design | Exercises
INSTRUCTIONS
MIB BOOKLET :
PROJECT 1
Prototype Design - Digital Resume / CV
On this exercises, 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 :
- 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.
- 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
- 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
- Visual Elements: Incorporate relevant images, icons, or placeholders that align with the content and enhance the visual appeal of your digital resume.
- Prototype Presentation: Update your e-portfolio explaining and showcasing the processes of the task
At first, I looked out for some references to get a inspiration about the layout and the content from the Pinterest. There were many sample of CV given but I choose the favorite one as my references.
 |
| Fig 3.1 CV References Week 05 26/05/2024 |
- Name & Surname
- Profession Name
- About Me
- My Photo
- Education Background
- Experience
- Honor & Awards
- Software Skills
- Language Used
- Contact Information (Phone Number, Location, Email, Portfolio Link)
Full File of my content could be viewed on HERE.
Then I began sketching the prototype idea. There were 3 ideas I had on.
 |
| Fig 3.2 Sketches Week 05 26/05/2024 |
I asked few friends about their opinion on my sketches. Most of them choose the third sketch because it is not a common design rather than the first and the second. I looked back again and I think it is true because if I used sketches 1 and 2, due to there were many CV design put the photo profile in the left side, I was aware that it will causing some plagiarism. At the end, I choose sketches #3.
Before I digitized it, I used Color Hunt to choose the color that suits for my CV. After browsing, I choose the blue, pink and cream as my color.
 |
| Fig 3.3 Color Palette Used Week 06 29/05/2024 |
Moving to Figma, First I create a new design and click frame (F) to grab a page. Then I used rectangle shape and circle to designing my Header Part. For the font, I used Josefin Sans mostly, and I'm just changing the thickness of it.
 |
| Fig 3.4 Progress #1 Week 06 29/05/2024 |
 |
| Fig 3.5 Progress #2 Week 06 29/05/2024 |
I tend to do the graphical elements first and then filled in the information because I want to make sure all the graphics and information could fit in. By using layout grid that could be find by select the canvas and click design in the right side, I could make all the elements are structured in one line.
 |
| Fig 3.6 Adding Grid and Graphics Week 06 29/05/2024 |
 |
| Fig 3.7 Adding Text into the CV Week 06 29/05/2024 |
 |
| Fig 3.8 First Attempt #1 (PNG) Week 06 29/05/2024 |
On tomorrow class (30/05) I asked Mr Shamsul for his opinion about my work. He said that the header has an awkward shape that could not be done in HTML. Therefore I tried to arranged the header again a bit.
 |
| Fig 3.9 Revision Week 06 29/05/2024 |
 |
| Fig 3.10 Adding Social Account Week 06 29/05/2024 |
 |
| Fig 3.11 Header Attempts Week 06 29/05/2024 |
I used this tutorial to creating the outline of the images
Vid 3.12 How to Remove Background And Add Outline in Figma Week 06 30/05/2024
 |
| Fig 3.13 Attempts #3 Header Week 06 30/05/2024 |
I was satisfied with the result after I putting up the outline and adjust the circle in both side to be balanced. I asked some of my relatives and they agreed the 3rd attempt looks good rather than without outline.
 |
| Fig 3.14 Second Attempt #2 (JPG) Week 06 30/05/2024 |
After I revised the header, It still looks like I missed some Illustration elements. Therefore, I decided to made the canvas longer to put my favorites projects on the bottom.
 |
| Fig 3.15 Adding Projects on CV Week 06 30/05/2024 |
Because the information is too much (full) I decided to reduce it and made the column in the same height and weight so it looks more clean.
 |
| Fig 3.16 Final Outcome Layout (JPG) Week 06 30/05/2024 |
Fig 3.17 Final Outcome (Figma Version) Week 06 30/05/2024
FEEDBACK
Week 5
Choose the sketches based on your own. You do not need to asked it to the lectures. Make sure the information is structured and the prototype is clean.
Week 6
The first attempt CV looks so colorful and Mr. like it. However, the shape on the top need to be changed by using same rectangle like the rest. Tried to explore more layout.
REFLECTIONS
Creating a CV Prototype design was a good experience for me. I got to introduced to the new software which is Figma and I also could explore more layout of CV rather than before I made it for school things. I observed that a good CV should have a good layout and eye-catching colors. The information should be arranged carefully to avoid spacing problem.
When using Figma, It had a good and bad points from it. The good point is the software had a many tools like adobe where we could using shape, pen tool, and others. We could operate easily because there were many tutorials given on the menu. I think the apps only have minus on the layer control. Figma separated every one text and shape (unless if we group it), not like Adobe where it is combined all the path to the one layer. Overall it is good for creating CV, but not for the complex and detailed design. I would suggested it to make the prototype or website things.
Comments
Post a Comment