INTERACTIVE DESIGN - EXERCISES

28/08/2023 - 11/09/2023
Adriena Tan Yan Zi 
Interactive Design / Bachelor of Design in Creative Media 
Exercises 

---

Lectures 

Week 1: 
The lecturer brief us on the module information booklet and showed us some examples of the past seniors works as well as introduced us to some award winning websites like the Walt Disney one.

Week 2:
We had listens to lecture about the important usabilty of websites. Then begin to form groups to make a paper prototype with the prompt topic given by the lecturer.

Week 3
Web structure - make it more user friendly
SOE - uses keywords with tags to help the search engine find the website
Footer informs its the end of the webpage
Some navigation features located in the footer for easy navigation
HTML code header (h1 > h2> h3) and so on 

Week 4: 

Web Standards
CSS - cascading style sheet
HTML - Hypertext Markup Language
Why it is important? : To get a universal language so everyone understands / to ensure that all browsers display the text properly without rewrites.
Changing the heading change it with the style option
Can use CSS to change how a website looks
Tags can be both-sided or one-sided
In HTML, <> these are called angle brackets; in CSS we don't use them
<b></b> ; opening and closing tag respectively
compulsory to use attribute tag for <a></a> tags and <img> tag. Ex: < a href="#id"></a>

Week 6

@charset "utf-8";
/* Author Adriena
    Date: 9 Oct 2023
*/
/* Element selector */

h1 {
    color: rgba(167,37,73,1.00);
}

/* Class Selector */
.nav-link {

text-decoration: none;

color: rgba(167,37,73,1.00);

}

/* Descendant Seloector */
header ul li { 

display: inline;

margin-right: 20px;

}

/* Child Selector */

ul.list > li {

font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"

}

/* Pseudo Class */

a.hover {

text-decoration: underline;

color: aliceblue;

}

/* Pseudo Element Selector */

p::first-letter {

font-weight: bold;

}

Week 7

The Display Property

• Display is CSS's most important property for

controlling layout.

• Every element has a default display value

depending on what type of element it is.

• The default for most elements is usually block or

inline.

The Display Property

Block-level element

• <div> is the standard block-level element. A

block-level element starts on a new line and

stretches out to the left and right as far as it can.

The Display Property

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.

The Display Property

Inline Element Inline Element Inline Element

The Display Property

• You can always override this. Though it wouldn't

make sense to make an inline div, you can use

this to customize the display of elements that

have particular semantics.

• A common example is making inline li elements

for horizontal menus.

The Display Property

Other Display Properties

• Inline-block

• Flex

• Grid

Box Model

Box Model in CSS

• Most HTML elements are containers. Consider some of the

HTML elements we've used so far: body, p, h1, h2, div, ul, ol, li.

• Each of these is a container, or box.

• Each box has three layers that surround its content. The layers

are, in order from inside to outside:

• Padding

• Border

• Margin

Box Model in CSS

• The following illustration shows

the various layers in the box

model:

• The size of each of the layers

in the box model can be

specified using the usual CSS

units of measure (em, %, and

px).

• For example, consider the

following <p>, which is

wrapped inside a <div>:

Box Model inCSS

• For example, consider the following <p>, which

is wrapped inside a <div>:

<div>

<p>This is a paragraph. It is a very short paragraph.</p>

</div>

Box Model in CSS

Reason to include an element in ‘div’ tag/element is to create layout.

Another method to create layout in CSS is using position property.

---

Instructions 

---

Tasks

Exercise 1: 
Choose TWO (2) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.

Write a brief report summarizing your findings and recommendations.

What To Have in The Analysis:

• Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the  user.
• Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
• Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
• Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
• Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.

Deliverables:
Write a brief report summarizing in not more than 500 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings)

Click here to view Adriena's slides 

Exercise 2 - Web Replication 

Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page. 

First Web Replication - Morgan Stanly 

 

Web Replication 2 

Final PDF

Exercise 3 

In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.

Create an HTML file named "index.html."

Create a section that displays the following information:

Recipe title

Include necessary images for the page

List of ingredients

Step-by-step cooking instructions

Create an external CSS file named "style.css."

Apply CSS rules to style your recipe card.

Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.

Chosen Recipe

I started with just coding the basic format of html coding to put the necessary elements and information, including the ordered list for the step by step instructions. 

I added the step by step pictures from the side to increase the overall readability of the instructions and guides. 

Before connecting my external style.css file i did the basic styling here in the html like adding the font family, font colour and background image as well. 

After the tutorial from week 7, I have a better understanding of how to use the class styles to refine the overall look of my website which i added the navigation panel and change some letters. 

CLICK HERE TO WEBSITE