Interactive Design

3.4.2023 - 11.6.2023 (Week 1 - Week 9)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Interactive Design
Exercises:
Web Analysis, Web Replication, HTML and CSS Document Development

LECTURE

WEEK 1 (3.4.2023): Surveying the possibilities

Fig. 1.1 - Week 1 Lecture Notes

WEEK 2 (10.4.2023): Usability: Designing Products for User Satisfaction

Fig. 1.2 - Week 2 Lecture Notes

WEEK 3 (17.4.2023): Colors for Web

Fig. 1.3 - Week 3 Lecture Notes

WEEK 6 (9.5.2023): The Web

Fig. 1.4 - Week 6 Lecture Notes

Keynotes:

HTML code live inside angled bracket < >
Elements = Tags
Opening tag <element>
Closing tag </element>
Each element tells the browser the information that sits between its opening and closing tags.
<element>Information</element>
Attributes: contain additional pieces of information.
They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.
<p lang=“eng-us”>Paragraph in English</p>
<p> :paragraph
<b> : bold
<i> : italic
<ol>: Ordered list (numbered)
<ol>
<li>information</li>
<li>information</li>
</ol>
<ul> : Unordered list (bullet point)
<ul>
<li>information</li>
<li>information</li>
</ul>
<a> : Links

WEEK 7 (14.5.2023): HTML & CSS

Fig. 1.5 - Week 7 Lecture Notes

Adding Image in HTML

<img src=“url” alt=“description”>
Eg. <img src=“img_flower.jpeg” alt=“Flowers in Denmark”>
Does not have a closing tag, need to add an attribute
Alt attribute is added to describe the image

ID attribute

Every HTML element can carry the ID attribute
Used to uniquely identify the element from other elements on the page
No two elements have the same value for their ID attributes (otherwise the value is no longer unique)
Eg: you might want to assign one paragraph within the page a different style from all of the other paragraphs

Class attribute

Every HTML element can also carry a class attribute.
Used when to identify several elements as being different from the other elements on the page
The class attribute on any elements can share the same value or name
For example, you might have some paragraph of the that contain information that is more important than others and want to distinguish between these elements

Block elements

Elements appear to start on a new line in the browser window
Eg: <h1>, <p>, <ul> and <li>

Inline elements

Elements appear to continue on the same line as their neighboring elements
Eg: <b>, <i>, <em>, <a> and <img>

Cascading Style Sheet (CSS)

CSS allows to create rules that specify how the content of an element should appear
Eg. Used to set the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all level header should be in a blue, italic, Helvetica typeface
CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed.

A CSS rule contains two parts: a selector and a declaration

CSS declaration sit inside curly brackets and each is made up of two parts; a property and a value, separated by a colon.

You can specify several properties in one declaration each separated by a semi-colon

Using External CSS

<link>

Used in an HTML document to tell the browser where to find the CSS file used to style the page

It is an empty element and it lives inside the <head> element

It should use three attributes:

• href; To specify the path to the CSS file

• type; This attribute specifies the type of document being linked to. The value should be text/css

• rel; Specifies the relationship between the HTML page and the file linked to. The value should be stylesheet when linking to a CSS file

A HTML page can use more than one CSS style sheet.

To do this it could have a <link> element for every CSS file it uses

Eg. one author use one CSS to control the presentation (fonts and colors) and a second to control the layout

Using Internal CSS

<style>

Include CSS rules within an HTML page by placing them inside a <style> element

Usually sits inside the <head> element of the page

The <style> element should use the type attribute to indicate that the styles are specified in CSS

The value should be text/css

When building a site with more than one page, you should use an external CSS style sheet. This:

• Allow all pages to use the same style rules (rather than repeating them in each page)

• Keeps the content separate from how the page looks

• Means you can change the styles used across all pages by altering just one file (rather than each individual page)

Practical Class Note:

Add quick link

Add in the heading:

<h3 id="section-1">About me</h3>

Add on top for the Quick link:

<h2 id="home"> Quick Links</h2>

<ul>

<li><a href="#section-1">About Me</a></li>

<li><a href="#section-2">My Hobby: Photography</a></li>

<li><a href="#section-3">My Hobby: Travelling</a></li>

<li><a href="#section-4">My Hobby: Watching movies</a></li>

<li><a href="#section-5">My Hobby: Listening to music</a></li>

</ul>

Short cut for quick link section:

select the word About me and open properties, on the link, type in #section-1 and press enter will auto create tag for that.

Add comment (visible in web page, just for u to refer)

<!-- Author: Tan Yi-Tyng

Date: 15 May 2023-->

Add Eng language tag (below the <!doctype html>)

INSTRUCTIONS

EXERCISE 1

Web Analysis

For this task we must analyse two existing websites from the link given by Mr Shamsul and identify areas for improvement. We have to review the selected website 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.

The selected websites that I chose to analyze for this exercise:

First Website: MA True Cannabis

Link: https://matruecannabis.com/en

Second Website: Simple Chocolate

Link: https://simplychocolatecph.com/

Fig. 2.1 - Final Exercise 1 (PDF)

EXERCISE 2

Web Replication

For this exercise we are asked to replicate two existing websites provided by Mr Shamsul to gain a better understanding of their structure. We have to follow the dimension of the existing website from the width and height. This exercise will help us develop our design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. We can use any image from stock image or free stock icon. The image that we will be using does not have to be an exact image. We may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, can download fonts from Google Fonts.

Process

First, based on the given websites provided in google classroom and decided to choose the Morgan Stanley and Ocean Health website for this exercise. I started by taking a screenshot of the landing page and importing it into Adobe Photoshop. Next, I went to Google Fonts to look for similar typefaces used on the website.

1. First Website ( https://www.morganstanley.com/ )

Similar fonts that used on the website.

1. Nunito Sans: https://fonts.google.com/specimen/Nunito+Sans?query=Nunito+Sans

2. Roboto: https://fonts.google.com/specimen/Roboto?query=Roboto

Fig. 2.2. - Import the screenshot into Adobe Photoshop.

Fig. 2.3 - Searching similar images from stock image or Unsplash website.

Fig. 2.4. - Using the grid to align the texts and design elements.

Fig. 2.5 - Process of replicating the landing page and arranging the layers accordingly.

Fig. 2.6 - Separating the landing page into different sections and arranging them in folders accordingly.

Fig 2.7 - Expand the Nav Bar folder to view all the layers.

2. Second Website ( https://www.oceanhealthindex.org/ )

Similar fonts that used on the website.

1. Schibsted Grotesk: https://fonts.google.com/specimen/Schibsted+Grotesk?query=Schibsted+Grotesk

2. Open Sans: https://fonts.google.com/specimen/Open+Sans?query=Open+Sans

Fig. 2.8. - Import the screenshot into Adobe Photoshop.

Fig. 2.9 - Searching similar images from stock image or Unsplash website.

Fig. 2.10 - Apply gradient tool

Fig. 2.11 - Process of replicating the landing page and arranging the layers accordingly.

Fig. 2.12 - Separating the landing page into different sections and arranging them in folders accordingly.

Fig. 2.13 - Expand the 1st Page folder to see the layers.

Final Outcome

1. First Website ( https://www.morganstanley.com/ )

Fig. 2.14 - Final Exercise 2: Website 1 (JPG)

Fig. 2.15 - Final Exercise 2: Website 1 (PDF)

2. Second Website ( https://www.oceanhealthindex.org/ )

Fig. 2.16 - Final Exercise 2: Website 2 (JPG)

Fig. 2.17 - Final Exercise 2: Website 2 (PDF)

EXERCISE 3

HTML and CSS Document Development

For this exercise, we are required to create a personal profile page using HTML. This exercise aims to help us practice our HTML skills and create a webpage showcasing our personal interests.

Things to include:

We should include our name, a photo, a brief bio, and some personal interests.
Use HTML tags to structure out content. We should use headings (h1, h2, etc.) and paragraphs (p) to make the content more readable.
Add lists (ul or ol) to showcase your personal interests such as create a list of your favorite books, movies, or hobbies.
Add links (a) to our profile page. It could link to our social media profiles or to other websites that we find interesting.
Include an image (img) on our profile page. This could be a picture of ourselves or something that represents our interests.

Publish the profile page:

Once completed the profile page, we can publish it online using a free hosting service like GitHub Pages or Netlify. This will give you a chance to see our webpage live on the web and share it with others.

Process

I began by watching the HTML tutorial video provided by Mr. Shamsul, watching additional YouTube tutorials, and further reading online articles to reinforce my HTML knowledge. Now I have a clear fundamental understanding of creating my profile page using HTML.

Click HERE is the YouTube Tutorial that I found very helpful about using Dreamweaver.

Click HERE is the online article, which also shared helpful information about HTML.

Next, I started to plan the content to include on my profile page. Below is the doc that I prepared ahead of and listed out the information in Microsoft Word, this will be easier for me when creating the page in Dreamweaver.

Fig. 3.1 – Contents to put in the profile page

Creating the profile page on Dreamweaver

Firstly, I’m creating a new document in Dreamweaver using HTML type. Next, I set up a new site and arranged the file accordingly. Then, I started to copy and paste my content into Dreamweaver and structured them with tags.

Fig.3.2 – Set up new sites

Fig.3.3 – Using H1, H2, and H3 to make it visually hierarchical.

Fig.3.4 – Justify the long paragraph

Fig.3.5 – Create an ordered list of favorite countries

Fig.3.6 – Create a table for my favorite movie

Fig. 3.7 – Create an unordered list of favorite songs attached with links

Fig. 3.8 - Add my personal image for the about me section &
adjust both heading 1 and image in the center.

Fig. 3.9 - Insert image and add a caption

Publish the site on Netifly

Lastly, I went to Netify and uploaded the folder on Netify, and finally, I successfully published my HTML personal profile site on the web.

Fig. 3.10 – Publish the site on Netifly

Final Outcome

Click HERE to view my personal profile page.

Fig. 3.11 - Final outcome: Exercise 3 (JPG)

Fig. 3.12 - Source code: HTML (PDF)

EXERCISE 4

CSS Layout

For this exercise, we are tasked to create a responsive grid layout for a website based on the content provided by Mr Shamsul.

Requirements:

The design and alignment should be visually appealing
The website must be functional across different screen sizes, allowing for optimal viewing on both desktop and mobile devices.
Upon completing the task, upload the exercise to Netlify and submit the link on google classroom.

Process:

I first started by looking at the YouTube tutorials provided by Mr Shamsul, about the brief explanation of display and position and demonstration of applying CSS properties on web documents. In addition, I found some external online study material and spend some time studying in detail of the CSS, how it works, its syntax and usage.

Fig 3.13 – Further study of CSS in W3school website

Fig 3.14 – Further study of CSS in Codecademy website

After reading through the given contents used for this exercise, I begin with creating a new HTML file in Adobe Dreamweaver and start to create the contents.

Fig. 3.15 – Provided contents used for exercise 4.

Fig. 3.16 – Process of creating the content in HTML file.

After I have completed the full contexts using HTML, now I started to stylise the CSS file by insert an existing CSS file through CSS designer, then I continued to explore with designing the web page.

Research and Mood Board

Before styling the web page, I planned to do some visual research on the context. I have found out that most of the content comes from the “Just Creative” webpage. So, for the used colour palette of my website was took inspiration from the colour used on that site. As for the font used for my web page, I will be using the Nunito Sans which I found on google fonts.

Fig. 3.17 - Mood Board

Working Process on CSS

Fig. 3.18 - Process of working in CSS

Publish the site on Netlify

Lastly, I went to Netlify and uploaded the folder on Netlify, and finally, I successfully published the file on the web.

Fig. 3.19 - Publish the site on Netlify

Final Outcome

Exercise 4 Netlify Link: https://tanyityng-exercise-4.netlify.app/

Fig. 3.11 - Final Outcome: Exercise 4 -Layout (JPG)

Fig. 3.12 - Source code: HTML (PDF)

Fig. 3.15 - Source code: CSS (PDF)

FEEDBACK

WEEK 3 - Exercise 2 (Web Replication)

Since I started replicating both websites in Photoshop before Mr. Shamsul briefing this exercise 2, thus the width dimension was already set at 1920px instead of 1366px. But Mr. Shamsul said it's okay to remain 1920px for this exercise but needs to be aware of the dimension for the next exercise. Mr. Shamsul also shared an easier way to create a gradient effect for the website instead of using the brush tool.

TAN YI-TYNG (0353327)