Interactive Design / Exercises

28 Aug 2023 - 25 Sep 2023 / Week 1 - Week 5
Leem Sejin / 0362419
Interactive Design / Bachelor of Design (Honour) in Creative Media
Exercises

---

LECTURES

Week 2

Usability: Designing Products for User Satisfaction

Usability : how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation ( Part of UX Design)

Principle of usability

1. Consistency
2. Simplicity
3. Visibility
4. Feedback
5. Error Prevention

Week 3

Website structure matter : It is the foundation of a user-friendly and accessible website. It affects user experience, SEO, and overall website performance. A well-structured website helps users find information easily and keeps them engaged.

Three key elements

1. Header : the top section of a webpage, contains the website's logo, navigation menu, and contact information by providing quick access to essential information and navigation.
2. Body : main content area of a webpage, contains text, images, videos, and other multimedia elements.
3. Footer : located at the bottom of a webpage, includes copyright information, links to important pages, and contact details.

- Use headings (H1, H2, H3, etc.) to create a hierarchical structure.

- drop down menu > use nested link html

Week 4

Web Standards

The central organization who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C).
It includes the standard markup languages : HTML CSS

HTML CODE

The HTML code is made up of characters that live inside angled brackets <>
eg <element>Information</element>

Attributes provide additional information about the contents of an element.

List of html elements

-<h1> main headings
-<h2> subheadings
-<p> to create paragraph
-<b> bold text
-<i> italic
-<ol> ordered list
<li>/<ul>

Week 5
ID and Class attribute

ID Attribute

Every HTML element can carry the ID attribute. It is used to uniquely identify the element from
other elements on the page **no two elements have the same value for their ID attributes

Class attribute

Every HTML element can also carry a class attribute, to identify several elements as being different from the other elements on the page

Week 6

CSS Selectors

Selectors are used to define which elements should receive specific styles, such as colors, fonts, spacing, and more.

Universal Selector: Selects all elements on the page.

eg) * {

/* CSS styles go here */

}

Element Selector: The simplest type of selector, it targets HTML elements by their tag name.

eg) p {

/* CSS styles go here */

}

ID Selector: Targets an element with a specific id attribute. IDs must be unique within an HTML document. To select an element with a specific ID, use a # symbol followed by the ID name.
eg) #my-element {

/* CSS styles go here */

}

Class Selector: Targets elements with a specific class attribute. Multiple elements can share the same class. To select elements with a specific class, use a . symbol followed by the class name.

eg).my-class {

/* CSS styles go here */

}


Descendant Selector: Selects an element that is a descendant of another element. You can specify a hierarchy of elements to target. For example, to style all <a> elements inside a <div> with class
"container,"

eg) .container a {

/* CSS styles go here */

}


Child Selector: Selects elements that are direct children of another element. To select only the immediate <li> children of an <ul>, you can use:

eg)ul > li {

/* CSS styles go here */

}


Pseudo-class Selector: Selects elements based on their state or position in relation to other elements. Common pseudo-classes include :hover, :active, :visited, :link, :focus, and :nth-child(n)

eg) a:hover {

/* CSS styles go here */

}


Pseudo-element Selector: Selects parts of an element rather than the element itself. Common pseudo-elements include ::before and ::after, which are used to add content before or after an element.

eg) p::before {

/* CSS styles go here */

}

Week 7 - Display property

Every element has a default display value depending on what type of element it is.

1) Block element : <div> is the standard block-level element.

2) Inline element : <span> is the standard inline element. An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph.

3) Inline-block

4)Flex

5)Grid

Box Model

**Most HTML elements are containers.

Each box has three layers that surround its content :

1. Padding
2. Border
3. Margin

---

INSTRUCTION

<iframe src="https://drive.google.com/file/d/1Zox9a8xcIHU_u9RH3dAo0nFTMqSvedj1/preview" width="640" height="480" allow="autoplay"></iframe>

Week 1

Exercise 1 : Web Analysis

This week, we learnt basic of website design, and given a task to study the website structure and its function. I went into the websites with award winning, and explored different websties. I choose two websites for can drink promotion and interior design website, because these have interesting animations.

Final submission for Web Analysis

Fig 1.1 Web Analysis

Week 2 

Exercise 2 : Web Replication

We are tasked to duplicate 2 websites provided.  I chose these websites ; 'Morgan Stanley' and 'Ocean Health Index'

Fig 1.1 Screenshot the website (11/9/2023)

To screenshot the website : Shift + Command + P and type screen capture

Before I start, I searched the similar images to used for this exercise in pexel.

Fig 1.2 Downloaded images (11/9/2023)

In Illustrator, I imported the screen shot image and use the ruler tool to draw the guide lines. I placed the guide lines according to the placement of the photos and text.

Fonts that are used for this exercise :

Adelle Sans Devanagari

Roboto

Fig 1.3 Placing the photos (11/9/2023)

Fig 1.4 Setting the guideline (11/9/2023)

Unfortunately, I did not managed to find several images, thus, I created from scratch using pentool.

Fig 1.5 Creating figures (11/9/2023)

Some of the titles has different kerning and leading size, so I increased kerning a little bit as well.

Fig 1.6 Adjusting kernings (11/9/2023)

Some of the images that I collected are too bright as compared to the reference website, so I adjust the brightness with hue & saturations and curves

Fig 1.7 Adjusting brightness (11/9/2023)

This is the comparison between reference website (left) and duplicated website (right)

Fig 1.8 Comparison between reference and duplicated webpage (11/9/2023)

Final Submission Exercise 2

Fig 1.4 Web Duplicate 1 jpeg (11/9/2023)

Fig 1.5 Web Duplicate 1 pdf (11/9/2023)

Fig 1.6 Web Duplicate 2 jpeg (11/9/2023)

Fig 1.7 Web Duplicate 2 pdf (11/9/2023)

Week 4 

(Intro to html code)

Before we start with html code, there are some changes needed for textedit ( for mac user). 

Notes taken during the class :

 

Fig 2.1

Fig 2.2

Fig 2.3

Week 6 

Exercise 3 : Creating A Recipe Card

For the class exercise, we are tasked to create the recipe card using css class elements. 

I choose the Coconut Pandan Recipe to create the card.

I started with finding the font to use for the website. In the google font, I found the font called PT Sans 

and copy the link to the html.

Fig 4.1 Selecting google font

HTML Code

Fig 4.2 Pasting google font link

For the heading of the website, I created the sentence ; Let's make delicious Pandan Coconut Icecream!' and followed by short introduction of the recipe.

Fig 4.3 Html code for heading and paragraph

I chose the image of the pandan iceream and placed right below of the title. Also, I found the estimated time for making the ice cream from the website, so I decide the add this information right below the image.

For the image size, I added the attribute code to adjust the size of the image because the size of the image is too large. (width= 200px / height=200px)

Fig 4.3 Html code for image

I separate the section into three ; Ingredient list, Instruction and Notes. I used unordered list for Ingredient list and ordered list for Instruction.

Based on the reference website, I found that it has external link to homemade pandan extract. Hence, I added the hyper link attribute before 8 tablespoon homemade pandan extract.

Under the Notes section, I add the class ID named "notes", to decorate the section seperately.

Fig 4.4 Html code for content

CSS code

Firstly, I added the background colour ; aliceblue, followed by highlighting the main heading of the page after creating Element Selector. 

For the Ingredient and Instruction section, I adjust the font size and its font style under the element selector

Fig 4.5 CSS code for background

Fig 4.5 CSS code for Element Selector

I created ID Selector, to make the NOTES section more eye catching, by adding the coral colours and Italic the section title to differentiate from other sections.

Fig 4.6 ID Selector

In my recipe card has external link to other site, hence I created the Pseudo class selector, to change the colour of the hyperlinked text when I hover the mouse to the word.

Fig 4.7 Pseudo class selector

Fig 4.8 Colour changed when hover to the link

Exercise 3 Submission

Link to the website : https://sejin-exercise3.netlify.app/

Fig 4.9 Overview of the recipe card

Fig 4.10 Overview of the recipe card pdf

---

REFLECTION

When I study the award winning website, I was surprise that many of them contains animations that interact with users. It attracts the attention, and leading me to scroll down and stay on the website for a long time. After exploring different website, I was eager to learn coding and build a attractive website but. learning html and css code is really hard and takes long time to understand the logic,