Interactive Design: Project 1

8/5/2024 - 22/5/2024 / Week 4 - Week 6
Tee Jia Ern / 0348512
Interactive Design / Bachelor of Design in Creative Media
Project 1

---

LECTURES

WEEK 9: Box Model

Display Property

Block Level Element

<div>

A block-level element begins on a new line and extends as much as it can to the left and right.

Inline Element

<span>

You can wrap text inside a paragraph <span> like this </span> with an inline element without interfering with the paragraph's flow.

Other Display Properties

- Inline-block

- Flex

- Grid

Box Model

Fig 1.1: Box Model

Flexbox

Flex Container: The parent element with display: flex.

Flex Items: The children of the flex container.

Flex Container

display: flex: Establishes a flex container.

flex-direction: Defines the direction of the flex items (row, column).

justify-content: Aligns flex items along the main axis (start, end, center, space-between, space-around).

align-items: Aligns flex items along the cross axis (stretch, center, start, end).

---

INSTRUCTIONS

Part 1 Prototype Design – Digital Resume/CV

I followed the five text sections. I added images of my profile picture and the event. I also added app icons in the skills software tools. This is my first draft.

I didn't like how casual it looks like. I tried to make another mockup that looks more professional and clean.

---

REFLECTION

Experience: I learned to use Figma to create mockups of website design. 

Observations: The interface is easy to use. The tools are straightforward. It is easy to use the software. 

Findings: Figma is a great software to create mockups of website design.