Interactive Design - Project 1: Prototype Design

19/9/2023 - 3/10/2023 : (Week 4 - Week 6)
Ting Wen Yi / 0361799
Interactive Design/Bachelor of Design (Hons) in Creative Media
Project 1 : Prototype Design 

INSTRUCTIONS



Part 1 Prototype Design – Digital Resume/CV
Duration: 2 weeks

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.

PROJECT 1 : PROTOTYPE DESIGN

Part 1 Prototype Design – Digital Resume/CV

1. Research and Inspiration

Figure 1.1 Mood Board - Week 4 (22/9/2023)

I started by searching for example CV designs, and I also had some ideas I wanted to implement. I aim for simplicity and readability because, from my experience, I know that recruiters only spend about 5 minutes per CV, especially when they have many to review. Furthermore, I want my design to leave a lasting impression on the recruiter so that they remember my CV. I've created a mood board to help guide my design.

Figure 1.2 Notes - Week 4 (22/9/2023)

I researched a recruiter's perspective on CVs for designers to understand what makes a good CV. After conducting my research, I compiled a list of the content I should include in my own CV.

Content:

a. Profile
I am currently pursuing my degree and am a motivated and enthusiastic individual with a strong interest in the design industry. I have experience in interior design and a track record of successful project management, consistently delivering quality outcomes through effective leadership and team motivation. I am actively seeking a part-time position to apply my knowledge and experience.

b. Personal Details
  • 013-213 4047
  • tingbernice@gmail.com
  • tingwenyi.blogspot.com/
c. Work Experience

IGCSE Invigilator (May - June 2023)
Wesley Methodist School (International)
-Supervised students during exams to maintain the integrity and security of the testing process.
- Set up exam rooms, distributed exam materials, and collected completed exams.

IGCSE Invigilator (Oct - Nov 2023) 
Wesley Methodist School (International)
- Checked student identification to ensure compliance with exam rules and regulations.
- Responded to student inquiries and provided assistance as needed during exam sessions.

Interior Designer Intern  (Oct - Dec 2021) 
White Panel Studio, Petaling Jaya, Selangor
- Created appealing and comprehensive mood boards to present to prospective clients
- Produced creative and detailed design of residential interiors using AUTOCAD, 3DMAXs
- Attended site inspections and took notes of interior design ideas, themes, concepts, and spatial layout. 

d. Skills
  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe Premiere Pro
  • Adobe Indesign
  • Adobe After Effects
  • 3DS Max
  • Figma
  • AutoCAD
e. Languages
  • Malay
  • Chinese (Mandrin)
  • English
f. Education
  • Taylor's University (Bachelor (Honors) of Design in Creative Media)
  • First City University Collage (Diploma in Interior Design)
  • Metro Learning Centre, Batu Caves (IGCSE)
g. Project
Maybank MyTIGER Values Art

2. Layout Draft

Figure 2.1 Layout - Week 4 (22/9/2023)

I created five different layout drafts to plan my design. In the first layout, I placed my contact information at the end. However, after conducting more in-depth research, I realized that it would be more effective to place my contact information at the top, especially with the portfolio link. I rearranged the most important elements to the top and placed less crucial information at the bottom. I believe that my second draft is more practical and will have a better impact.

3. Figma

Figure 3.1 Figma Progress 1 - Week 4 (23/9/2023)

I used Figma to digitize my CV since I couldn't download Adobe XD due to maintenance issues. I began by creating an A4-sized page and then followed the draft from my second version, carefully placing my details. Having prior experience in creating CVs, I knew exactly which details to include. To maintain consistency, I also incorporated colors from the mood board I had previously planned.

Figure 3.2 Figma Progress 2 - Week 4 (23/9/2023)

After adding more details, I quickly realized that I had little to no space for my profile summary where I had originally intended to place it. However, I had plenty of space in the left column. So, I quickly change my plan to shift my name and profile picture to the left side and position my profile summary at the top.

Figure 3.3 Figma Progress 3 - Week 4 (23/9/2023)

To maintain consistency, I include skill level indicators for my language proficiency alongside my other skills.

Figure 3.4 CV First Attempt - Week 4 (23/9/2023)

Second Attempt

Figure 3.5 Color Reference - Week 4 (29/9/2023)

I am in the process of crafting my resume, and I've decided to infuse it with vibrant creativity. I plan to employ a multicolor background, with orange as the primary color, to inject energy and visual appeal into my resume. This approach will not only make my resume stand out but also reflect my distinctive personality and style.

Figure 3.6 CV Refining - Week 4 (29/9/2023)

I used four different colors of ellipses to create a gradient color background and adjusted the opacity and applied an effect (layer blur) to give a blurry background.

Figure 3.7 CV Second Attempt - Week 4 (29/9/2023)

For my second attempt, I changed the picture to my portrait, and I have also updated my 'Interests' section to 'Projects.' Additionally, I aligned projects with skills to create a more consistent and organized presentation. I also change the color theme to match my background.

4. Final CV Design

Figure 4.1 CV Final Design - Week 4 (29/9/2023)


Figure 4.2 CV Figma Prototype - Week 4 (29/9/2023)

FEEDBACK

Week 4:
Find a nice portrait picture. Align 'Projects' with 'Skills'.

REFLECTION

My first experience creating a CV with Figma was a positive and educational one. It taught me about design principles, attention to detail, and the importance of presenting my skills and experiences in a visually appealing and well-structured manner. I look forward to applying these lessons not only in crafting future CVs but also in other design and communication projects.


Comments

Post a Comment

Popular posts from this blog

Information Design - Exercises

Image
6/2/2024 - 18/2/2024 : (Week 1 - Week 2) Ting Wen Yi / 0361799 Information Design/Bachelor of Design (Hons) in Creative Media Exercises INSTRUCTIONS EXERCISES Exercise 1: Quantify & visualize data In this task, we are to quantify (count) your chosen items and arrange the objects into a presentable layout or chart. Information must be presented as is. You are required to arrange the objects with relevant indicators written out with pens to help you visualize the quantity and data. Take a picture of the final assembly and upload it into your e-portfolio and Google Classroom. Mr. Shamsul mentioned that we could choose from various objects such as M&Ms, a jar of buttons, Lego bricks, coins, or a bag of survival kit. I have decided to choose Lego as my object. Figure 1.1 Object Chosen - Week 1 (6/2/2024) Before the day of the class, I also created a very brief draft outlining how I intend to present my data. This will allow me to save more time during the class and kick-start the ex...
Read more

Information Design - Project 1: Instructable Infographics Poster

Image
21/2/2024 - 27/2/2024 : (Week 3 - Week 4) Ting Wen Yi / 0361799 Information Design/Bachelor of Design (Hons) in Creative Media Project 1: Instructable Infographics Poster INSTRUCTIONS An infographic poster for ONE recipe selected from Pasta Grannies. Study one video, break down, and chunk the preparation and cooking process into an instructable poster. Try to capture each Grandma’s personality and unique dish identity in your poster as part of the narrative structure. These infographics present complex information quickly and clearly, with symbols charts, and diagrams. With an information graphic, computer scientists, mathematicians, and statisticians develop and communicate concepts using a single symbol to process information.  Your job is to transmit a set of instructions and at the same time educate the audience. Infographics should be fun, it should simplify the context while representing information graphically.  Because “A picture is worth a thousand words”. Yours shoul...
Read more

Information Design - Project 2: Animated Infographic

Image
28/2/2024 - 8/3/2024 : (Week 4 - Week 5) Ting Wen Yi / 0361799 Information Design/Bachelor of Design (Hons) in Creative Media Project 2: Animated Infographic  INSTRUCTIONS Use the assets from Project 1 Instructable Infographic poster into a 60-second motion graphic. Once again, capture the aesthetics and narrative of the poster with movements, SFX, and music. Requirement: Max 60  seconds infographic video 720p: 1280x720 pixels (H26/mp4) published on YouTube (set to Unlisted) PROJECT 2 : ANIMATED INFOGRAPHIC  1. Assets  Figure 1.1 Assets from Project 1 - Week 5 (3/3/2024) Since this is a continuation of project 1, I already have most of the assets needed for the video. Figure 1.2 Adding Assets - Week 5 (3/3/2024) I created some of the missing assets that will be used later in my video. For example, I created the dough before flattening it out because I want to capture the essence of using the rolling pin to roll out the dough and make the flat pasta sheet. 2...
Read more