Interactive Design Project 1 / Prototype Design

-

19.9.2023 - 3.10.2023 / Week 4 - Week 6
Tan Jian Xin / 0350784
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 1 / Prototype Design - Digital Resume / CV

INSTRUCTIONS
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



1. Sketches
We were instructed to sketch at least 5 wireframes for our prototype design.

Figure 1.1: Sketches of wireframes

2. Digitalization
Attempt #1
Firstly, I created a Desktop sized frame (1330 x 2249) in Figma as I have trouble installing Adobe XD. After that, I changed the grids to columns and increased the number of columns from 5 to 12.

Figure 2.1: Desktop sized frame

Then, I placed my profile pic in the rectangle tool and wrote my name and contacts using the text box tool. I chose Times New Roman as the typeface.

Figure 2.2: Adding profile pic, name and contacts

I then added the sections of 'Education', 'Experience', 'Skills', and 'Projects' with a sticky note like text background created with rectangles with shades of blue as its fill. 

Figure 2.3: Adding sections to my prototype design

Then, I added in the details for the sections stated above using the text box, Times New Roman typeface.

Figure 2.4: Details for sections

After that, I added 2 rectangles (pink filled) for the header and the footer.

Figure 2.5: Rectangles for header and footer

Below shows the exported prototype design for my prototype design.

Figure 2.6: Exported prototype design

Attempt #2
I altered the details of my profile and the placement of contact.
Figure 3.1: Attempt #2 prototype design

Attempt #3
I added the contacts for my blog and location. Besides, I also changed the font and the size of my profile picture. Other than that, I also changed the details for education and experience.

Figure 4.1: Attempt #3 prototype design

Figma: Digital Resume

Comments

Post a Comment

Popular posts from this blog

Design Principles Task 1 / Exploration

-
Image
6.2.2024 - 20.2.2024 / Week 1 - Week 3 Tan Jian Xin / 0350784 Design Principles / Bachelor of Design (Hons) in Creative Media Task 1 / Exploration List / Jump Link Lectures Instructions Feedbacks LECTURES Elements of Design - Individual "building blocks" Point  Simplest element of design Repetitive mark forms a line Other 2/3D figures and forms are created as the point moves in space Figure 1.1: Point Line   Can be active or static / aggressive or passive / sensual or mechanical Can indicate direction, define boundaries of shapes and spaces, imply volumes and suggest motion or emotion Can be grouped to depict qualities of light and shadow and to form patterns and textures Figure 1.2: Line Shape Expanse within the outline  Becomes visible when a line enclose an area or change in value (light/dark) or texture General category of shapes - Geometric (Tend to be precise and regular)  & Organic ( Irregular, more informal than geometric) Figure 1.3: Shape Form 2D - shap...
Read more

Design Principles Task 3 / Design

-
Image
5.3.2024 - 19.3.2024 / Week 5 - Week 7 Tan Jian Xin / 0350784 Design Principles / Bachelor of Design (Hons) in Creative Media Task 3 / Design List / Jump Link Instructions Feedbacks References INSTRUCTIONS Following your analysis of the design you selected in Task 2, you will now create a new piece of work that is either a response to or an inspiration from the previous one. You will incorporate your understanding of design principles in your design. Any appropriate medium and/or resources may be used to convey your visual message. Direct use of photographs is not allowed. If any work is shown to be plagiarized, the student will receive a failing mark for the entire module and be subject to the university's regulations regarding academic misconduct. 1. Visual references After choosing the 14th goal set by the United Nations - Life Below Water, I decided to read more information in relation to this goal to narrow down the topic in which I hope to portray in my design. Figure 1.1: In...
Read more

Intercultural Design Proposal / Field Study / Final Project & Portfolio

-
Image
5.2.2024 - 29.3.2024 / Week 1 - Week 8 Tan Jian Xin / 0350784 Intercultural Design / Bachelor of Design (Hons) in Creative Media Lectures / Proposal / Field Study / Final Project & Portfolio List / Jump Link Lectures Instructions Proposal Field Study Final Project & Portfolio Feedbacks Reflections LECTURES Briefing on MIB (module information booklet) Communicate the essence and the information efficiently and effectively Figure 1.1: Visual communication Visuals Everything that can be seen Wide, all-inclusive including nature (tree, bird, cat) Everything produced or created by humans that can be seen Produced or created by humans for the purpose of visual representations that has functions, content and communicative purpose Figure 1.2: Example of visual Design system (cultural sensitivity) Freedom and Spontaneity Easily distinguished in their environment Physical activity Can be physical, involving movement and activity that engages in physical challenges Mindfulness and Relaxat...
Read more