Chuah Kwai Pin / 0348376
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Exercises
LECTURES:
Week 2: Surverying The Possibilities
It is important to spend some time developing an understanding of what "quality" website means, because users do not give websites many chances. In addition, it is also necessary to spend some time planning a website before beginning to develop its content. Planning ahead will reduce the number of mistakes made while constructing the site.
In this week's exercise, the purpose if to begin considering what makes a high-quality website. Some of the questions that can be considered for evaluation of websites include:
1) Why do you feel that some websites are good?
2) Why do you feel that some websites are not so good?
3) Do others agree with your opinion?
4) Does anyone disagree?
5) How might website quality be judged differently across different audiences?
6) Are there some qualities of websites that all audiences would agree are good? What are these qualities?
5) How might website quality be judged differently across different audiences?
6) Are there some qualities of websites that all audiences would agree are good? What are these qualities?
Week 3: Colour Theory for Web Designers
Why colour matters in Web Design?
- Advantage: using the right colour combinations help users understand and navigate the site.
- Can improve visitors' online experiences
- Helps users to find the information they need and respond to the Call to Action
- Plays a significant role in branding and product messaging
Colour Relationship
- Monochrome: Consisting of various tints, shades and saturation of the same colour.
- Complementary: Based on two colours from opposite sides of the colour wheel.
- Analogous: Featuring three colours that are next to each other on the colour wheel.
- Triadic: Using three colours that are at the points of a triangle drawn within the colour wheel.
Complementary and analogous colour schemes are the easiest to work with for many designers.
Colour Warmth
Warm colours
- Contain higher amounts of yellow and red
- Evokes a sense of passion, happiness and heat
- May seem aggressive and bring feelings of danger (alert messages)
Cool colours
- Contain higher amounts of blue and purple
- Chilly climates, crystal clear waters or the sky
- More soothing and relaxing, can carry connotations of formality and sadness
Week 4: The Web
- World Wide Web Consortium (W3C) defined dozens of standards including standard markup languages
- The standard markup languages we will be using are HTML and CSS
HTML describes structure of pages
- HTML code is made up of characters that live inside angled brackets <>
- Elements usually have two tags, an opening tag and a closing tag <element>Information</element>
Body, Head and Title
<body>
- Everything inside this element is shown inside the main browser window
<head>
- Comes before the <body> element
- Contains information about the page.
- Usually find <title> element inside here
- Contents are usually shown in the top of the browser (tab bar)
Headings
- HTML has six levels of headings:
- <h1> main headings
- <h2> subheadings
- <h3> for further sections use subheadings
.png) |
| Fig. 1.1 Headings |
Paragraph
- To create a paragraph, use opening <p> tag and closing </p> tag to surround a body of text.
.png) |
| Fig. 1.2 Paragraph |
Bold & Italic
- Opening <b> tag and closing </b> tag element makes a section of text appear bold.
.png) |
| Fig. 1.3 Bold |
- Opening <i> tag and closing </i> tag element makes a section of text appear italic.
.png) |
| Fig. 1.4 Italic |
List
- Ordered list are lists where each item are numbered
- It is created with the <ol> element
- Each item in the list is placed between an opening <li> tag and closing </li> tag
.png) |
| Fig. 1.5 Ordered list |
- Unordered list are list that begin with a bullet point
- It is created with the <ul> element
- Each item in the list is placed between an opening <li> tag and closing </li> tag
.png) |
| Fig. 1.6 Unordered list |
Nested List
- A second list can be put inside an <li> element to create a sub-list or nested list
.png) |
| Fig. 1.7 Nested list |
- Created using the <a> element
- Users can click on anything between the opening <a> tag and the closing </a> tag
.png) |
| Fig. 1.8 Writing Links |
Week 6: Adding image in HTML
- The tag <img> is used to add an image
- <img> tag is a single sided element which does not have a closing tag like other HTML element
.png) |
| Fig. 2.1 Adding Image in HTML |
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 the attributes
Class attribute
- Every HTML element can also carry a class attribute
- Used to identify several elements as being different from other elements on the page
Week 7: Introduction to CSS
- CSS (Cascading Style Sheet) allows you to create rules that specify how the content of an element should appear
- Contains 2 parts: selector and declaration
.png) |
| Fig. 3.1 CSS Rules (selector and declaration) |
- CSS declaration sit inside curly brackets and each is made up of 2 parts: property and value, separated by a colon
.png) |
| Fig. 3.2 CSS Rules (property and value) |
Method to employ CSS
External CSS <link>
- This <link> element can be used in an HTML document to tell the browser where to find the CSS file
- Lives inside the <head> element
- A HTML page can use more than one CSS style sheet
Internal CSS <style>
- Can also include CSS rules within a HTML page by placing them inside <style> element
- Lives inside the <head> element
- The value should be text/css
INSTRUCTIONS:
Exercises
Week 2:
Surveying the Possibilities
For this week, we were split into groups of 5 and tasked to look for 3 good websites and 3 bad websites from https://www.mwa.my/2021/ and https://www.awwwards.com/. Some of the factors and qualities that we have to take into consideration when doing the critic includes the website's design, usability, creativity and content. We also have to discuss and figure out as a group who is the target audience and what is the main purpose of the website.
 |
| Fig. 4.1 Surveying the Possibilities- Good Websites |
 | |
|
Week 3:
Colour Theory
Read all of the resources in the Resources section and answer the questions:
1) What are the three basic colours that monitors transmit?
Red, Green and Blue
2) How many colours could be referenced by name (e.g., "red") in HTML 4.01?
16 colours: White, Silver, Gray, Black, Red, Maroon, Yellow, Olive, Lime, Green, Aqua, Teal, Blue, Navy, Fuchsia and Purple.
3) How many different colours are there in the "web-safe" palette?
216 web-safe colours
4) Are the majority of people we refer to as colour blind unable to see any colour at all? Explain.
No, that is not true. Colour blindness is the inability to distinguish certain shades of colour, which means people who are colour blind can still see colours, just not all. Our human eye has 3 types of photoreceptors which are responsible for detecting different colour wavelengths. Colour blindness can occur if any of the photoreceptors are missing or not functioning properly.
5) According to the WebAIM page on colour blindness, what is the key to designing sites that are acessible to people who are colour blind?
It is important to make sure that colours are not the only method of conveying important information. When using different colours to differentiate information such as pie charts or bar graphs, the information should also be provided in a way that people who are colour blind can see. The best way is to consider that anyone who is blind, is also colour blind.
Week 5-6:
"About Me" HTML Coding
As an introduction to HTML coding, we started off with a simple exercise on notepad, which was to introduce ourselves and include our favourite food and movies. We were also told to add photos and also link the movies to a webpage so that we understand how it works.
.png) |
| Fig. 5.1 HTML coding on Notepad |
 |
| Fig. 5.2 Screenshot of webpage |
Exercise 1:
Recreate into a Webpage- Triathlon History
We have to create a webpage based on a word document by coding it on notepad. The webpage was then revised and updated once we transferred it into Adobe Dreamweaver and learned how to style.
.png) | |
|
 |
| Fig. 6.2 Screenshot of Triathlon History webpage |
 |
| Fig. 6.3 Updated version (after learning how to style) https://exercise1-chuahkwaipin.netlify.app/ |
Week 7:
Exercise 2: Recreate into a webpage- VUW
For this exercise, we also had to recreate the webpage based on a word document. Instead of coding on HTML, we have to code this on Dreamweaver and also style it.
.png) |
| Fig. 7.1 Coding and styling on Adobe Dreamweaver |
 |
| Fig. 7.2 Screenshot of Vision for the Unequal World webpage https://exercise2-chuahkwaipin.netlify.app/ |
Exercise 3: Replicate A Landing Page Design
For our third exercise, we had to choose a website from a list given and then replicate it accordingly on Adobe Illustrator. The purpose of the task is to enable us to look at the nuances of website design and have a better understanding of the layout.
 |
| Fig. 8.1 Replicate of WWF's website |
Week 10:
Exercise 4: Layout Design
In this exercise, we are required to create an interesting and clear layout using the content given. We are to include rows, columns, and a clear navigation system.
 |
| Fig. 9.1 Screenshot of webpage https://exercise4-chuahkwaipin.netlify.app/ |
FEEDBACKS
Week 2
- A good presentation on the good and bad websites
- Short and straightforward
Week 6
- Cool colours
- Try to add an image as the background
Week 7
- Try to add a back to top button
Week 9
- It is good overall, looks similar to the original website
REFLECTION
Doing the exercises in this module really brought me back to my high school days. I remembered coding html on notepad back in year 7 and what I have learned then was a lot more simpler than this. I am glad that I got to learn how to style websites and also use CSS stylesheets to enhance the look of my webpage. That part was new to me, but I enjoyed learning bit by bit because I have always wondered why the html coding on notepad always looked so basic. It was a lot of trial and error at first because I was unfamiliar with using CSS and the terms, but slowly after more exercises, I got the hang of it.
Comments
Post a Comment