Interactive Design -Project 1 / Prototype Design

15.05.24 - 30.05.24（Week 4-Week6）

Qian Guoyi (0369462)

Interactive Design/ BDCM 

Project 1 / Prototype Design 

  INSTRUCTIONS

TASK

Week4:

This week, we need to use prototyping software, such as Adobe XD or Figma, to design our own digital resume UI model. This UI model should showcase the layout, visual elements, and user interface interactions of the digital resume, ensuring that the resume is both visually appealing and user-friendly. Through this project, we will gain a deeper understanding of how to create user-friendly interfaces on digital platforms and effectively present our skills and experiences.

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

• Realistic and meaningful user interface interactions.

• Consideration of responsiveness for different screen 

sizes.

• Presentation quality and clarity of the design rationale.

Requirements The assignment page should include a clear and concise 

headline that describes the purpose of the website. Document

page size width is 1366 pixel. Follow the pre-set in Figma or 

Adobe XD.

I designed my own digital resume UI model using Figma according to the requirements. My initial idea was to use yellow and green as the main color scheme for the interface and design it as a scrollable long interface. Therefore, at the very beginning of the interface, I designed a cover about myself and added some search engines at the top. The next section is my introduction. Overall, I aimed to design the interface into two sections, with a line in the middle dividing the content into left and right parts. I used contrasting colors for the interface, with a green section in the middle to separately elaborate on my background, education, and experience. On the left side, I also included a section for my skills. Additionally, I added some interactive elements, such as buttons and links, to enhance the user experience and make it more engaging.