Interactive Design / Project 1/ Part 1 Prototype Design – Digital Resume / CV

15.5.2024 - 28.5.2024  / Week 4 - Week 6 

ID name YANG HANWEN

ID number 0364085

Program name bachelor of design (honors) in creative media

Part 1 Prototype Design – Digital Resume/CV

TABLE OF CONTENTS

■ Instruction

■ Lectures

■ Prototype Design – Digital Resume/CV

■ Feedback

■ Reflection

Instruction

Lectures

Week 4 | The Web and Language

Week 5 | Lecture Note

Prototype Design – Digital Resume/CV

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

Objective: In this first part of the assignment,focus on creating a UI design prototype for the 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 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 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 resume into logical sections, such as "Profile," "Education," "Experience," "Skills," "Projects," and "Contact."
• Prioritize sections based on their relevance and significance to the position for 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 the e-portfolio explaining and showcasing the processes of the task

Evaluation Criteria:

The 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.

Examples:

• My resume :: Behance
• Portfolio |CV|Graphic Design | Digital Marketing :: Behance
• Resume :: Behance
• My Resume 2023 :: Behance

Process：

First I used Adobe Illustrator to create a brief prototype draft.

After that, I made some adjustments based on my draft in Figma.

The photo I used is the one on my electronic student ID card

Submission：

Feedback

No feedback was sought from Mr. Shamsul Hamimi Ab. Rahman

Reflection

Since Figma is not an Adobe platform, there are some differences in usage. For example, to zoom in and out of a page, in Adobe software (Adobe Illustrator, Adobe Photoshop, Adobe After Effects, etc.), the shortcut key is "Alt + mouse🖱️wheel" to adjust, but in Figma, it is "Ctrl + mouse🖱️wheel" to adjust. Another one is the font size adjustment. In Adobe's software, you can directly hold down the mouse and drag it outward to achieve it, but in Figma, it seems that you can only enter a value in the character size value box to change the size (at least, I have only found this way of adjustment at present)