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.









Comments

Post a Comment

Popular posts from this blog

Minor Project

-
Image
03/04/2023 -  07/07/2023  Week 1 - Week 14  Kim Min Ah / 0356145 Interactive Design  / Creative Media / Taylor's Design School GROUP 6 Kim Min Ah Catherine Herbert Temba Chai Yi Xuan Ivy Jee Yi Jie Shofwa Alyadiena Wismayandi Siti Maisarah Binti Mohd Anuwarsani (leader) PROJECT Lilly Doll Project - AIDA CLASS NOTES Design Thinking -Empathy connected to a human-centred design to solve real-world problems 5 steps of Design Thinking: -Empathize (inspiration) -Define -Ideate -Prototype  (MVP / minimum viable product) -Test What people desire What is technically and organizationally feasible What is financially viable The Target audience has to be very specific Simple and clear words that customers can understand Fit yourself into the target audience’s shoes User + need + insight (probably something that users might don’t wanna say or know how to say it) Persona Persona gives a better understanding(empathy). Sampling tool to relate better INSTRUCTIONS Fig 1.1.1 ...
Read more

Design Research Methodology

-
06/04/2023 - 06/07/2023 / Week 1 - Week 14  Kim Min Ah / 0356145 Interactive Design  / Creative Media / Taylor's Design School LECTURES Week 1 What is research? -Pursuit of knowledge.  -A systematic and creative investigation to establish facts and new conclusions. -Student research is self-directed work and exploration of the topics of interest of them. Why should we do research? -To expand knowledge of one’s academic field. -To gain academic experience. -To develop critical thinking and communication skills. -To learn research techniques. How to start? -Identify the field of interest -Further research -Research problem statement -Research question -Research objectives Week 2 Problem statement -A concise description of an issue to be addressed or a condition that can be improved on. -Identify the gap between the current state of the issue and the goal. -Problem statements should be able to help readers to understand the problem better. Research question -It has to be ans...
Read more

Information Design / Group Exercises

-
11/01/2023 -  / Week 1 - Week   Kim Min Ah / 0356145 Information Design  / Creative Media / Taylor's Design School GROUP 2.1 Tan Jaycee (Leader)  Kim Min ah  Arwinda  Celeste Low  Lee Jayden Viola  Azriq  Nick EXERCISE Group Exercises: -Exercise 1: Types of Infographics -Exercise 2: L.A.T.C.H  -Exercise 3: Miller's Law -Exercise 4: Information Visualization Manifesto INSTRUCTION Fig 1.1.1  Module Information GROUP EXERCISES Group Exercise 1: Types of Infographics  Fig 1.1.2  Group exercise week 1 Group Exercise 2: L.A.T.C.H Fig 1.1.3  Group exercise week 2 Group Exercise 3: Millar's Law Fig 1.1.4  Group exercise week 3 Group Exercise 4: Information Visualization Manifesto   Fig 1.1.5  Group exercise week 4
Read more