Interactive Design-Project 1: Prototype Design – Digital Resume/CV

 || 23/4/2024 / Week 1

|| Chen TianYao / 0357550

|| Interactive Design / Bachelor of Design (Hons) in Creative Media

|| Lectures & Exercise 1,2 & 3

---

Prototype Design:

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

---

INSTRUCTION:

---

REFERENCE:

(1) Pinterest

PROCESS in Figma:

First, I should finish my Digital Sketch in Figma.

I have divided my personal blog into 6 sections: Banner, Personal Information, My Skills, Education, My Artworks and contact me.

I used the techniques I learnt in Typography to create my banner, in which I briefly introduced my name and some basic information.

#1.1 Banner in Figma

Then, I drew an anime girl illustrator for the background of the information to show my skills (drawing) and the direction of my drawing goals.

#1.2 Illustrator finish in Adobe Photoshop 

#1.3 Final Design of "Personal Information" in Figma

In design of "My skills", "Education" and "My Artworks", I use the same Typography, because I think they are the main information in my page.

#1.4 Design of "My skills", "Education" and "My artworks" in Figma

#1.5 whole project in Figma

Figma Link:https://www.figma.com/design/s48CJHKIe4UBe25k597xQd/My-resume?node-id=0-1&t=ll1PbZe9OlngQdWs-1

PROCESS In HTML & CSS:

Final Website Link: https://chentianyaoresumetaylorsproject1.netlify.app/#

#2.1 Code in index.html

#2.2 Code in Style.css

#3.3 Final Submission Website

FEEDBACK

SELF-REFLECTION

FURTUER-READING