Interactive Design / Lecture, Exercise
Week 01- Week 07 30/08/2022 - 11/10/2022
Riko Matsuyama 0351470
Instructions
Lecture
Week2
Surveying the Possibilities
• It is tempting in a web design course to plunge in and start right away creating and developing web pages. However, since our goal is for you to learn to develop high-quality websites, we first must spend some time developing an understanding of what "quality" means.
• This is important because if websites aren't developed with quality in mind, visitors might be unable to find the content or features they're looking for, or they might be unable to access or use these features. Users don't give websites many chances.
• In addition to understanding website quality, you must spend some time planning a website before you begin to develop its content. Planning ahead will reduce the number of mistakes you'll make while constructing the site. In the work world, this will save you time and money.
Week3
Why color matters in Web Design?
• The most apparent advantage of using the right color combinations in web design is that they help users understand and navigate the site.
• Enabling them to find the information they need and respond to your Call to Action (CTA)
|
| Fig1.1: color wheel |
Color Relationship
• Monochrome: Consisting of various tints, shades, and saturation of the same color.
• Complementary: Based on two colors from opposite sides of the color wheel.
• Analogous: Featuring three colors that are next to each other on the color wheel.
• Triadic: Using three colors that are at the points of a triangle drawn within the color wheel.
|
| Fig1.2; color relationship |
• Hues that contain higher amounts of yellow and red are considered warm colors -
evoke a sense of passion, happiness, and heat,
can also seem aggressive and bring feelings of danger. That’s why they’re often used in alert messages.
|
| Fig1.3: color system |
• HEX color system uses a six-digit, three-byte, hexadecimal description of each color,
such as #000000 (black) or #ffffff (white)
• Every two characters represent a color value
|
| Fig1.4: tints and shades |
Contrast
• Contrast is a crucial element of any website, especially when it comes to background color and text.
• If the contrast is too low, users are more likely to have trouble differentiating between elements.
• Is vital not only for readability but content hierarchy as well
Week4
The use of headings and subheadings in any document often reflect a hierarchy of information. Any document will start with a large heading, followed by an introduction or the most important information.
When using a word processor to create a document, we separate out the text to give it structure. Each topic might have a new paragraph, and each section can have a heading to describe what it covers.
|
| Fig1.6: heading |
The HTML code is made up of characters that live inside angled brackets <> These are called HTML elements. Elements are usually made up of two tags: an opening tag and a closing tag
<element>Information</element>
Each element tells the browser something about the information that sits between its opening and closing tags.
|
| Fig1.7: an opening tag |
|
| fig1.8: closing tag |
Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equal sign.
<p lang=“eng-us”>Paragraph in English</p>
The attribute name indicates what kind of extra information you are supplying about the element’s content. It should be written lowercase.
The value is the information or setting for the attribute. It should be placed in double quotes. Different attributes can have different value
<body> ... You met the <body> element in the first example created. Everything inside this element is shown inside the main browser window.
<head> ... Before the <body> element you will often see a <head> element. This contain information about the page. You will usually find a <title> element inside the <head> element.
<title> ... The contents of the <title> element are either shown in the top of the browser (tab bar)
When creating a web page, you add tags (known as markup) to the contents of the page. These tags provide extra meaning and allow browsers to show users the appropriate structure for the page.
• HTML has six levels of headings:
• <h1> main headings
• <h2> subheadings
If there are further sections under the subheadings then the <h3> element is used and so on.
 |
| Fig1.9: h |
To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag.
 |
| Fig1.11: p |
 |
| Fig1.12: result |
By enclosing words in the tags <b> and </b> we can make characters appear bold.
The <b> element also represents a section of text that would be presented in a visually different way (for example key word in a paragraph) although the use of <b> element does not imply any additional meaning.
 |
| Fig1.13: b |
 |
| Fig1.14: result |
 |
| Fig1.15: i |
 |
| Fig1.16: result |
There are lots of occasions when we need to use lists. HTML provides us with two different types:
Ordered list are lists where each item in the list is numbered. List is for set of steps for a recipe that must be performed in order.
Unordered list are list that begin with a bullet point.
The ordered list is created with the <ol> element. Each item in the lis is placed between and opening <li> tag and a closing </li> tag (the li stands for list item.)
 |
| Fig1.17: li, ol |
 |
| Fig1.18: result |
The unordered list is created with the <ul> element. Each item in the lis is placed between and opening <li> tag and a closing </li> tag (the li stands for list item.)
 |
| Fig1.18: ul, li |
 |
| Fig1.19: result |
 |
| Fig1.20: ul, li |
Links are the defining features of the web because they allow you to move from one web page to another Commonly type of links:
• Links from one website to another
• Links to one page to another on the same website
• Links from part of a web page to another part of the same page
• Links that open in a new browser window (tab)
Links are created using the <a> element. User can click on anything between the opening<a> tag and the closing </a> tag. Specify which page to link using the href attribute.
 |
| Fig1.22: a |
Links are created using the <a> element which has an attribute called href. The value of the href attributes is the page that you want user to go to when they click on the link.
When you link to a different website, the value of the href attribute will be the full web address for the site, also know as an absolute URL Browsers show links in blue with an underline by default.
Week5
The tag <img> is used to add an image in HTML
img tag is a single-sided element that does not have a closing tag like other HTML element
• <img src=“url”>
• src attributes specify the location of the image
• <img src=“img_flower.jpeg”>
• <img src=“http://stockimages.anylink.com">
Alt attribute is added to describe the image
• <img src=“img_flower.jpeg” alt=“Flowers in Denmark”>
Alternatively, you could also specify the width and height by adding those attributes
• <img src=“img_flower.jpeg” alt=“Flowers in Denmark” width=“500” height=“350”>
ID attribute
• Every HTML element can carry the ID attribute
• It is important that no two elements have the same value for their ID attributes (otherwise the value is no longer unique)
Class attribute
• Every HTML element can also carry a class attribute.
• Sometimes you will want a way to identify several elements as being different from the other elements on the page
For example, you might have some paragraphs of the that contain information that is more important than others and want to distinguish between these elements.
Block elements
• Some elements will always appear to start on a new line in the browser window
• It is known as block-level elements
• Example: <h1>, <p>, <ul> and <li>
Inline elements
• Some elements will always appear to continue on the same line as their neighboring elements
• It is known as inline elements
• Example: <b>, <i>, <em>, <a> and <img>
Week7
CSS allows you to create rules that specify howcthe content of an element should appear
• For example, you can set the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all levels the header should be in a blue, italic, Helvetica typeface
A CSS rule contains two parts: a selector and a declaration
 |
| Fig1.23: selectors |
Selectors indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas.
Declarations indicate how the elements referred to in the selector should be styled. Declarations are split into two parts (a property and a value) and are separated by a colon.
 |
| Fig1.24 |
This rule indicates that all <h1>, <h2> and <h3> elements should be shown in the Arial
the typeface, in yellow color.
The property indicates the aspects of the element you want to change. For example, color, font, width, height, and border.
Values specify the settings you want to use for the chosen properties. For example, if you want to specify a color property then the value is the color that you want it to be for the elements.
The <link> element can be 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
 |
| Fig1.25 |
 |
| Fig1.26 |
＊id and tag. if you click this, you can jump to the page that you want to visit.
 |
| Fig1.27 |
＊no need to type automatically.
 |
| Fig1.28 |
 |
| Fig1.29 |
Week10
<div> A div tag is a general-purpose HTML tag that is used to organize (group) each piece of content.
<span> A span tag is a tag used to change the design of only the enclosed element. By using the span tag, you can change the color and font separately from the rest of the loaded stylesheet.
<navi> The <nav> element in HTML represents a section for providing navigational links to other parts of the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
<-- this is a comment --> The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.
padding You can align the text to the center or specify the width as necessary.
box-radius making the curved corners for the box
float You can float the specified element (floating state) and place it on the right or left
If you set "float: right;", you can align the vertically aligned elements horizontally in order from the right.
margin create empty space outside a box
(HTML FILE)
manage sites > site name and choose folder > save
(CSS FILE)
File > New > CSS > style.css
 |
| Fig1.33 |
CSS designer panel > + Source > Attach existing CSS file > browse > open
1. border: Code and preview in Google Chrome
 |
| Fig1,40: container |
4. aside-left and aside-right
5. Change the right and left on the bottom "main"
 |
| Fig1.46: html |
6. float - left & right
7. After that, change the ratio to 60% and 40%. ＊add box-sizing: border-box
 |
| Fig1.49 |
8. margin 1% .. top and bottom, 0 .. left and right
9. row and column - display: flex and add
padding
 |
| Fig1.54 |
 |
| Fig1.55 |
 |
| Fig1.56 |
 |
| Fig1.57 |
 |
| Fig1.58 |
 |
| Fig1.59 |
 |
| Fig1.60 |
 |
| Fig1.61 |
 |
| Fig1.62 |
Final layout (week10 class)
 |
| Fig1.63 |
So this is why they use twelve call up system. So it's easy for them to divide. And then they got the even numbers.
 |
| Fig2.1: inspect |
 |
| Fig2.2 |
 |
| Fig2.3 |
 |
| Fig2.4: card |
 |
| Fig2.5 |
 |
| Fig2.6: card, column |
 |
| Fig2.7: html |
 |
| Fig2.8: result |
Exercise
(Week1)
Good websites
https://www.thecaymantailor.com.my/
https://www.moooi.com/us/paper-play
https://www.bluemarinefoundation.com/the-sea-we-breathe/
Bad websites
https://pangrampangram.com/products/mori
• What are the three basic colors that monitors transmit? Blue red green
• How many colors could be referenced by name (e.g., "red") in HTML 4.01? 247
• How many different colors are there in the "web-safe" palette? 216??
• Are the majority of people we refer to as color blind unable to see any color at all? Explain.
• According to the WebAIM page on color blindness, what is the key to designing sites that are accessible to people who are color blind?
The key web accessibility principles for users who are blind are:
- Perceivable: visual information such as graphics, layout, or color-based cues cannot be perceived.
- Operable: the keyboard to is typically used to navigate and operate web content rather than a mouse
- Understandable: content must be presented in a way that preserves meaning and supports comprehension.
- Robust: content and web technologies must be compatible with assistive technologies, even if those technologies are not new.
When designing web content, it is not necessary to get rid of color. It is not necessary to convert all images to black and white or get rid of images entirely. In fact, it may not be necessary to change anything at all.
Exercise 1 (week5)
https://0351470rikomatsuyama.netlify.app/
Exercise 2 (week7)
https://beamish-gelato-f43b1b.netlify.app/
Exercise 3 (week8)
choose one of the websites and replicate the entire main page, landing page design, this task is to enable to look at the nuances of ebsite design and to have a better understanding of the layout.
Selected site: https://www.legalsuper.com.au/
|
| Fig3.1; Final outcome |
Comments
Post a Comment