Interactive Design: Project 1

18/9/23-2/10/23 // W4-W6
Mercy Chong HuiZiun // 0360929

Interactive Design // BDCM
Project 1: Prototype Design

---

Lists

Lectures

Process
Final Outcome

Reflections

---

Instructions

---

Lectures

W5: ID and Class Attribute

ID Attribute
: Every HTML element can carry this attribute

: Used to uniquely identify the element from other elements 
-> No two elements have the same value for their ID Attributes

-> No numerical values

Class Attribute
: Can share the same name/value on HTML element.

ID & Class attribute

: It will only change its appearance if a CSS rule indicates it should be displayed differently.

Block elements

: Known as block level elements

Eg: <h1>, <p>, <ul>, and <li>

Inline elements

: Some elements will always appear to continue on the same line as their neighboring elements

Example: <b>, <i>, <img>...

Intro to CSS(Cascading Style Sheet)

: Allows you to create rules that specify how the content of an element should appear.

Example: Setting color background, all paragraphs should appear in gray using the Arial typeface, etc.

CSS Style rules with HTML elements

: CSS rule contains two parts; a selector and a declaration.

 

  : Colon | ; Semi-colon

---

Project 1: Prototype Design

[Task To-do]

• Creating a UI design prototype for my own digital resume
  

Process

Before starting to create my own digital resume, I went online and searched through some ideas/inspiration on Pinterest for this task.

Fig Few examples of digital CVs 

Wireframe Sketches

Started my sketches using the references I got. Did 5 rough wireframe sketches so it's easier to determine which layout i can choose to move forward into the next process.

Fig Wireframe sketches

In the end I chose wireframe #4 and proceeded to Figma.

Digitization process
Software used: Figma

I first created some base shapes and then worked on the placement of each content. 

Fig Starting process of the resume

After determining the layout, added some texts into the resume.

For the icons on the 'Interests' section, I used a plugin called "Iconify" in Figma where you can easily search for icons using the keywords you want.

Final Outcome

Fig Digital resume prototype design in Figma (PDF)