Interactive Design Project 2

Eric Chang (0378298)

Bachelor Of Design in Creative Media

Interactive Design

---

Instruction:

Lecture:

Week 7

Display Property

The display property is CSS's most crucial property for controlling layout. Every HTML element has a default display value, typically either block or inline.

Block-level elements like <div> start on a new line and stretch horizontally as far as possible. They stack vertically on the page.

Inline elements like <span> flow within text content without disrupting paragraph flow. They sit side by side horizontally.

Developers can override default display values - for example, making list items (<li>) inline to create horizontal navigation menus. Other display properties include inline-block, flex, and grid.

Box Model

Most HTML elements (body, p, h1, div, ul, ol, li) are containers or "boxes." Each box has three layers surrounding its content, from inside to outside:

1. Padding - Space between content and border
2. Border - The edge of the element
3. Margin - Space outside the border, separating elements

These layers can be sized using CSS units like em, %, and px. The document provides an example showing how to style a paragraph within a div:

• The div gets a red background, black border, and no padding/margin
• The paragraph gets a white background, 1em padding, 10px blue solid border, and 10px margin

The purpose of wrapping elements in div tags is to create layouts. CSS positioning is another method for layout control.

Flexbox

CSS Flexbox is introduced as a powerful tool for creating responsive layouts that builds on Box Model understanding. Key concepts include:

Flex Container: The parent element with display: flex Flex Items: The children of the flex container

Important properties for flex containers:

• display-flex: Establishes the flex container
• flex-direction: Controls item direction (row, column)
• justify-content - Aligns items along the main axis (start, end, center, space-between, space-around)
• align-items - Aligns items along the cross axis (stretch, center, start, end)

---

Project 2: 

The goal of this project is to create a working prototype for our proposal website, We can use figma to do this, and the website has to be functional.

For this project i decided to pick "https://www.goldsgym.co.id/" because the website has a old designed theme into it. Below are the proposal for the redesign.

Below is the Website Redesign Proposal Powerpoint:

Website Redesign Proposal by ERIC CHANG

For this project 2, we are asked to make a working prototype using figma. Which means that we also need to create a working button for this project.

Before doing this project, I decided to watch the figma tutorial that Mr. Shamsul created. After that it's just a matter of creating something based on our wire-framing.

Below are my progress:

For the first page, I Decided to do the contact page, as it is the easiest part of the website. I decided to make it very simple as possible so the information would be highly visible.

Fig 1.0 Contact us page

Next, I decided to create the homepage, for this part i decided to make it relatively simple with the hope of presenting the information in a clear way, I was at first scared that Mr.Shamsul wouldn't approve my design, but he was fine with the overall design.

Fig 1.1 Homepage

Next is the history and awards page, for this page i tried my best to keep the design language from the original website but make it better overall, and so below are the results for the about us page.

Fig 1.2 About us page

I Decided to use Lines to present the highlight that Gold's Gym has earned over the year, while making it more fresh, to keep up with the times.

Lastly, is the knowledge page. for this page i also keep the design language from the original website, but make it better and more relevant with today's world.

Fig 1.3 Knowledge Page

We also need to make the website works, and so we need to use the tutorials that Mr. Shamsul gave to us it was pretty helpful, and so below are the screenshot of the finalized prototype.

Fig 1.4 Zoomed Out Screenshot

FIGMA PROTOTYPE: