Interactive Design/ Project 1: Prototype Design

15th May 2024 - 28th May 2024 (Week 5 - Week 6)
Natalie Chu Jing Xuan, 0354589
Interactive Design, Bachelor of Design (Honours) in Creative Media

Project 1: Prototype Design

---

Table of Contents

1. Module Information Booklet (MIB)
2. Part 1 Prototype Design - Digital Resume/CV

---

Module Information Booklet (MIB)

---

Part 1 Prototype Design - Digital Resume/CV

Objective

In this first part of the assignment, I will focus on creating a UI design prototype for my 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 my 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, colour 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.

Design

I chose to use Figma to create my design prototype for digital resume. I wish to create a simple and clean layout. After listing down my information, I came out with this layout:

Fig.1.1 Layout

I choose to have a white background and decided to add some gradients later on. The font I used is Judson. Then I proceed to decide my colour scheme for my resume. 

Fig.1.2 Colour palette

Fig.1.3 Colour changed according to colour palette

Next, I draw an circle with the Ellipse shape tool. I added drop shadow effect with layer blur of 130. Lastly, I added gradient on it.

Fig.1.4 Colour gradients

I added stars, a border around my profile picture, and prototype interactions that link to my Instagram profile and my blog page.

Fig.1.5 Progress

Final Outcome

Figma Prototype: