Interactive Design / Exercises
09/09/2022 - 07/11/2022 / Week 2 - Week 11
Anna Ong Su Kuan / 0353775
Interactive Design / Bachelor of Creative Media / Taylor's University
Exercises
CONTEXTS
- Instructions
- Feedback
- Reflections
LECTURES
Week 3
Color Theory
Why color matters in Web Design?
- help users understand & navigate the site (using the right color combinations)
- can improve visitors' online experience
- enabling them to find the info they need & respond to the Call to Action
- enabling them to find the info they need & respond to the Call to Action
- plays a significant role in branding & product messaging
- plays a huge role in customers' decisions about purchasing a product (according to research)
Color Relationship
- monochrome (various tints, shades, & saturation of the same color)
- complementary (2 colors from the opposite sides of the color wheel)
- analogous (3 colors that are next to each other on the color wheel)
- triadic (3 colors that are at the points of a triangle drawn within the color wheel)
Color Warmth
- hues that contain higher amount of yellow & red are considered warm colors (sense of passion, happiness & heat) & (seem aggressive & bring feelings of danger)
- higher amounts of blue & purple are considered as cool colors (more soothing & relaxing) & (carry connotations of formality & sadness)
Color System (RGB, CMYK & HEX)
- CMYK is used in print design
- HEX uses a 6 digit, 3 byte, hexadecimal description of each color (ex: #000000)
Week 4
The Web
Hardware & software issue
- growing variety of browsers that people can choose from (Google Chrome, Safari, etc)
- people use a variety of operating systems (Windows, Mac OS, Linux)
- people have their computers set to a wide variety of screen resolutions (640x480 px - 1680x1050 px, etc)
- high probability that your website will look different
- World Wide Web Consortium (W3C) is the central organization who is responsible for creating & maintaining web standards
- HTML
- CSS
HTML
- is made up of characters that live inside angled brackets <> (HTML elements); usually made up of 2 tags (ex: <element>information</element>)
- attributes provide additional information about the contents of an element
Body, Head & Title
- <body> everything inside this element is shown inside the main browser window
- <head> is before the <head> element, this contains info about the page; usually will find a <title> element inside here
- <title> are either shown in the top of the browser (tab bar)
Headings
- HTML has 6 levels of headings
- <h1> main headings
- <h2> subheadings
- etc
Paragraph
- to create a paragraph, surround the words that make up the paragraph with an opening <p> & </p>
Bold
- <b>
Italic
- <i>
Lists
- ordered list <ol> is the element, <li> is then placed between each item
- unordered list <ul> is the element, <li> is placed between each item
Nested Lists
- put a second <li> inside the first <li> element to create it
Writing Links
- <a> element, specify which page to link using "href" attribute (ex: <a href=“http://www.imdb.com”>IMDB</a>
Week 6
Extra Markup
Adding Image in HTML
- <img>
- <img src="url">; src attributes specify the location of the image
- "alt" attribute is added to describe the image
- can describe width & height; ex: <img src=“img_flower.jpeg” alt=“Flowers in
Image Format for Web
- JPEG; highly compatible & small size & very little loss of quality
- GIF; small in size but not suitable for photos
- PNG; allows full range of color & better compression
ID Attribute
- used to uniquely identify the element from other elements on the page
- no 2 elements have the same value
Class Attribute
- a way to identify several elements as being different from the other elements on the page
*ID & Class attribute; will only change their appearance if there's a CSS rule that indicates it should be displayed differently
Block Elements
- elements that appear on a new line in the browser window
- ex; <h1>, <p>, <ul> & <li>
Inline Elements
- elements that appear to continue on the same line as their neighboring elements
- ex; <b>, <i>, <em>, <a> and <img>
Week 7
Introduction to CSS
- able to create rules that specify how the content of an element should appear
- CSS uses {}
CSS Style Rules with HTML Elements
- contains 2 parts, selector (indicate which element the rule applies to) & declaration (indicate how the selected element should be styled)
- CSS declaration sit inside {} & each is made up of 2 parts, property (ex: color, font, width, height, etc) & value (specify the settings of the chosen properties), separated by a colon ( ; )
Method to Employ CSS
Using External CSS
- <link>
- can be used in an HTML doc, it lives inside the <head> element
- should use 3 attributes, href (to specify the path to the CSS file), type (specifies the type of doc being linked to, should be text/css), rel (specifies the relationship between the HTML page & the file linked to, should be stylesheet when linking to a CSS file)
- an HTML page can use more than 1 CSS style sheet
Using Internal CSS
- <style>
- usually sits inside the <head> element
- value should be text/css
- when building a site with more than 1 page, an external CSS style sheet should be used (allow all pages to use the same style; keeps the content separate from how the page looks; can change the styles used across all pages by altering just 1 file)
4 Links
- a:link (a normal, unvisited link)
- a:visited (a link that user has visited)
- a:hover (when the user mouses over)
- a:active (the moment it is clicked)
INSTRUCTIONS
Exercise 1
In this exercise, we were tasked to create a web document based on the content that was provided to us by the lecturer. We are required to follow the format of the document (heading, sub-heading, paragraph, list, including links)
Using notepad, I typed all the codes out and doing regular checks to ensure I'm entering the correct codes.
Netlify link : Exercise 1
Exercise 2
In this exercise, we were tasked to create a single HTML page based on the content that was provided to us by the lecturer. We are required to follow the format of the document & style the page with the appropriate CSS style.
Using Studio Visual Code, I did the HTML & CSS coding to create the page which was then uploaded on Netlify.
Netlify link : Exercise 2
Exercise 3
In this exercise, we are tasked to recreate a landing page from a list of websites that was provided to us by the lecturer.
This is the landing page recreation of Jade Sheng's website.
Link to her website : https://www.jadesheng.studio/
Exercise 4
Our task is to create an interesting & clear layout based on what we've learnt from the previous class, using the content given to us by the lecturer. The layout must contain rows, columns, & a clear navigation system.
I first added in the content information in the HTML sheet, and did some basic grouping using <class>, <div>, <nav> & <id>. This was done in Visual Studio Code.
After that, I created separate sheet for the CSS codes. I started to style & format the website layout to give them colors, columns & rows.
Netlify Link : Exercise 4
FEEDBACK
Week 9
Specific Feedback
For exercise 2, my lecturer said overall it looks fine so I don't need to change anything. For exercise 3, my lecturer said to use it as a reference or a reflection to project 1.
REFLECTIONS
Experience
Week 5 : This is my first time doing & learning about coding, I might know some basics of it but I've never done it. Trying to learn how to use the codes and insert it at the correct placing took awhile.
Week 7 : After having done the pervious exercise, this task was more fun & interesting to complete as the CSS part was not that difficult to understand & learn.
Week 8 : Recreating the landing page for my chosen website isn't as hard as I had experience with the previous exercises.
Week 11 : Even with the few exercises that were given to us in the past to practice coding, this exercise was still a new experience as there were some coding knowledge & application that looked confusing.
Observations
Week 5 : After while of learning, it became easier to complete the rest of the document.
Week 7 : Playing around with the CSS codes was quite a fun process, so it didn't take me that long to complete this task.
Week 8 : Using tools that can be found online or using the "Inspect" option on chrome has helped me to complete this exercise.
Week 11 : I encountered some difficulties throughout the css part as some of the codes were either not working properly/was using the wrong code.
Findings
Week 5 : Having friends who have a lot more experience than me was helpful as I could ask them for help whenever there was an issue.
Week 7 : My lecturer's advice along with coding websites was proven to be helpful to me throughout the process, in case I get confuse & need to refer to something.
Week 8 : Having friends that know a few tips & shortcuts on how to get the measurements & spacing for different websites.
Week 11 : Having friends that have experience & more knowledge about coding was very helpful for me, as googling was confusing at times.
- plays a huge role in customers' decisions about purchasing a product (according to research)
Color Relationship
- monochrome (various tints, shades, & saturation of the same color)
- complementary (2 colors from the opposite sides of the color wheel)
- analogous (3 colors that are next to each other on the color wheel)
- triadic (3 colors that are at the points of a triangle drawn within the color wheel)
Color Warmth
- hues that contain higher amount of yellow & red are considered warm colors (sense of passion, happiness & heat) & (seem aggressive & bring feelings of danger)
- higher amounts of blue & purple are considered as cool colors (more soothing & relaxing) & (carry connotations of formality & sadness)
Color System (RGB, CMYK & HEX)
- CMYK is used in print design
- HEX uses a 6 digit, 3 byte, hexadecimal description of each color (ex: #000000)
Week 4
The Web
Hardware & software issue
- growing variety of browsers that people can choose from (Google Chrome, Safari, etc)
- people use a variety of operating systems (Windows, Mac OS, Linux)
- people have their computers set to a wide variety of screen resolutions (640x480 px - 1680x1050 px, etc)
- high probability that your website will look different
- World Wide Web Consortium (W3C) is the central organization who is responsible for creating & maintaining web standards
- HTML
- CSS
HTML
- is made up of characters that live inside angled brackets <> (HTML elements); usually made up of 2 tags (ex: <element>information</element>)
- attributes provide additional information about the contents of an element
 |
| Fig 1.1 Lecturer's notes, (23/09/2022) |
Body, Head & Title
- <body> everything inside this element is shown inside the main browser window
- <head> is before the <head> element, this contains info about the page; usually will find a <title> element inside here
- <title> are either shown in the top of the browser (tab bar)
Headings
- HTML has 6 levels of headings
- <h1> main headings
- <h2> subheadings
- etc
Paragraph
- to create a paragraph, surround the words that make up the paragraph with an opening <p> & </p>
Bold
- <b>
Italic
- <i>
Lists
- ordered list <ol> is the element, <li> is then placed between each item
- unordered list <ul> is the element, <li> is placed between each item
Nested Lists
- put a second <li> inside the first <li> element to create it
Writing Links
- <a> element, specify which page to link using "href" attribute (ex: <a href=“http://www.imdb.com”>IMDB</a>
Week 6
Extra Markup
Adding Image in HTML
- <img>
- <img src="url">; src attributes specify the location of the image
- "alt" attribute is added to describe the image
- can describe width & height; ex: <img src=“img_flower.jpeg” alt=“Flowers in
Denmark” width=“500” height=“350”>
Image Format for Web
- JPEG; highly compatible & small size & very little loss of quality
- GIF; small in size but not suitable for photos
- PNG; allows full range of color & better compression
ID Attribute
- used to uniquely identify the element from other elements on the page
- no 2 elements have the same value
Class Attribute
- a way to identify several elements as being different from the other elements on the page
*ID & Class attribute; will only change their appearance if there's a CSS rule that indicates it should be displayed differently
Block Elements
- elements that appear on a new line in the browser window
- ex; <h1>, <p>, <ul> & <li>
Inline Elements
- elements that appear to continue on the same line as their neighboring elements
- ex; <b>, <i>, <em>, <a> and <img>
Week 7
Introduction to CSS
- able to create rules that specify how the content of an element should appear
- CSS uses {}
CSS Style Rules with HTML Elements
- contains 2 parts, selector (indicate which element the rule applies to) & declaration (indicate how the selected element should be styled)
- CSS declaration sit inside {} & each is made up of 2 parts, property (ex: color, font, width, height, etc) & value (specify the settings of the chosen properties), separated by a colon ( ; )
Method to Employ CSS
Using External CSS
- <link>
- can be used in an HTML doc, it lives inside the <head> element
- should use 3 attributes, href (to specify the path to the CSS file), type (specifies the type of doc being linked to, should be text/css), rel (specifies the relationship between the HTML page & the file linked to, should be stylesheet when linking to a CSS file)
- an HTML page can use more than 1 CSS style sheet
Using Internal CSS
- <style>
- usually sits inside the <head> element
- value should be text/css
- when building a site with more than 1 page, an external CSS style sheet should be used (allow all pages to use the same style; keeps the content separate from how the page looks; can change the styles used across all pages by altering just 1 file)
4 Links
- a:link (a normal, unvisited link)
- a:visited (a link that user has visited)
- a:hover (when the user mouses over)
- a:active (the moment it is clicked)
INSTRUCTIONS
Exercise 1
In this exercise, we were tasked to create a web document based on the content that was provided to us by the lecturer. We are required to follow the format of the document (heading, sub-heading, paragraph, list, including links)
 |
| Fig 2.1 coding progress, (29/09/2022) |
 |
| Fig 2.2 coding progress, (29/09/2022) |
Using notepad, I typed all the codes out and doing regular checks to ensure I'm entering the correct codes.
Netlify link : Exercise 1
Exercise 2
In this exercise, we were tasked to create a single HTML page based on the content that was provided to us by the lecturer. We are required to follow the format of the document & style the page with the appropriate CSS style.
 |
| Fig 3.1 coding progress, (15/10/2022) |
 |
| Fig 3.2 coding progress, (15/10/2022) |
 |
| Fig 3.3 coding progress, (15/10/2022) |
Using Studio Visual Code, I did the HTML & CSS coding to create the page which was then uploaded on Netlify.
Netlify link : Exercise 2
Exercise 3
In this exercise, we are tasked to recreate a landing page from a list of websites that was provided to us by the lecturer.
.jpg) |
| Fig 4.1 Final Recreation, (22/10/2022) |
This is the landing page recreation of Jade Sheng's website.
Link to her website : https://www.jadesheng.studio/
Exercise 4
Our task is to create an interesting & clear layout based on what we've learnt from the previous class, using the content given to us by the lecturer. The layout must contain rows, columns, & a clear navigation system.
 |
| Fig 5.1 coding progress, (07/11/2022) |
I first added in the content information in the HTML sheet, and did some basic grouping using <class>, <div>, <nav> & <id>. This was done in Visual Studio Code.
 |
| Fig 5.2 coding progress, (07/11/2022) |
After that, I created separate sheet for the CSS codes. I started to style & format the website layout to give them colors, columns & rows.
Netlify Link : Exercise 4
FEEDBACK
Week 9
Specific Feedback
For exercise 2, my lecturer said overall it looks fine so I don't need to change anything. For exercise 3, my lecturer said to use it as a reference or a reflection to project 1.
REFLECTIONS
Experience
Week 5 : This is my first time doing & learning about coding, I might know some basics of it but I've never done it. Trying to learn how to use the codes and insert it at the correct placing took awhile.
Week 7 : After having done the pervious exercise, this task was more fun & interesting to complete as the CSS part was not that difficult to understand & learn.
Week 8 : Recreating the landing page for my chosen website isn't as hard as I had experience with the previous exercises.
Week 11 : Even with the few exercises that were given to us in the past to practice coding, this exercise was still a new experience as there were some coding knowledge & application that looked confusing.
Observations
Week 5 : After while of learning, it became easier to complete the rest of the document.
Week 7 : Playing around with the CSS codes was quite a fun process, so it didn't take me that long to complete this task.
Week 8 : Using tools that can be found online or using the "Inspect" option on chrome has helped me to complete this exercise.
Week 11 : I encountered some difficulties throughout the css part as some of the codes were either not working properly/was using the wrong code.
Findings
Week 5 : Having friends who have a lot more experience than me was helpful as I could ask them for help whenever there was an issue.
Week 7 : My lecturer's advice along with coding websites was proven to be helpful to me throughout the process, in case I get confuse & need to refer to something.
Week 8 : Having friends that know a few tips & shortcuts on how to get the measurements & spacing for different websites.
Week 11 : Having friends that have experience & more knowledge about coding was very helpful for me, as googling was confusing at times.
Comments
Post a Comment