Interactive Design / Project 2: Working Web Page

15/05/2023 - 08/05/2023 / Week 7 - Week 10 

Kim Min Ah / 0356145

Interactive Design  / Creative Media / Taylor's Design School

---

PROJECT

Project 2: Working Web Page

---

CLASS NOTES

Week 7 (15/05/2023)

JPEG (Joint Photographic Expert Group)

GIF (Graphics Interchange Format)

PNG (Portable Network Graphics)

Selection tool 

Edit copy porch

Create new artwork with transparent background

Control the file sizes for quick loading time

For web:

Save for web 

Export the image (not save)

72 dpi

Resize the photo if it requires

Do not resize the image on dream weaver.

JPG low medium high

Working files

Only web only (images and pages)

File name example:

img_main.jpg

title= “logo”

Allow users to hover over the image and see the information

ID attribute

All low keys

Make sure there are no several elements that have the same value for the ID attributes.

It has to be unique.

Class attribute

e.g.) class=“left”

Block level elements :

Appears in a new line

e.g.)<h1>,<p>

Inline elements

E.g.) <img>

Special characters= type “&” 

Heading

CSS

Cascading Style Sheet

Other sets of documents with different kinds of coding with HTML

Display

CSS’s most important to control layout properly.

Every element has a default display value: usually either block or inline.

Block-level element:

<div>: Block-level element, Starts on a new line

Other block-level elements:

Header, footer, section, etc.

e.g.) headings

Inline element: Standard inline element, 

<span>: can wrap text in a paragraph

e.g.) horizontal menu

Other display properties:

Inline-block

Flex

Grid

Most html elements are containers:

Body, p, h1, h2, div, ul, ol, li

Boxes:

Padding

Border

Margin

example:

HTML

<div>
<p>This is a paragraph.</p>

</div>

CSS

div {

background-color: red;

padding: 0;

border: 1px solid black;

margin: 0;

}

p{

background-color: white;

padding: 1em;

border-width: 10px;

border-style: solid;

border-color: blue;

margin: 10px !important;

}

To create a layout:

Include <div> tag/element

In CSS using the position property

Five values of position property:

Attic

Relative

Absolute

Fixed
Sticky

---

INSTRUCTIONS

Fig  Interactive Design Module Booklet

---

Project 2: Working Web Page

Wireframe

Submission

website link:

https://minah-kim-project2.netlify.app/#

---

REFLECTION

Experience
Project 2 enhanced my fundamental coding skills and had me practice creating a working web page. The transition from Project 1, involving wireframing, prototyping, and design ideation, to the completion of a functional webpage, gave me a sense of accomplishment. 

Observation
During this process, I became aware of the significant role that composition plays in delivering a seamless user experience on a webpage. However, I faced some challenges in developing layouts that simultaneously satisfied aesthetic appeal and good user experience.

Realization
I realized that I need further study in order to learn more about compositions that effectively balance aesthetic aspects with optimal user experiences.