INTERACTIVE DESIGN - Exercises

on

2.9.2022 - 28.10.2022 (Week 1 - Week 9)
Loh Qiao Yin / 0348923 
Interactive Design/ Bachelor of Design in Creative Media / Taylor's University
Exercises

LECTURES

Week 1
[Briefing]

Week 2
Surveying the possibilities

Understanding principles behind effective website design and implementation.
Questions to ask yourself:
- Why do you feel that some websites are good?
- Why do you feel that some websites are not so good?
- Do others agree with your opinion?
- Does anyone disagree?
- Who is the target audience for a particular site?
- How might website quality be judged differently across different audiences?
- Are there some qualities of websites that all audiences would agree are good?
- What are these qualities?

Week 3
Colour Theory

Why colour matters in Web Design
- to help users understand and navigate the website
- to find required info and respond to Call to Action (CTA)
- for branding and product messaging

Aspects
- colour warmth
- tint and shades
- hue, saturation and lightness
- contrast
- colour psychology

Week 4
Web Standards

- World Wide Web Consortium (W3C) creates and maintains the web standards
- Standard markup languages incl. HTML and CSS

HTML in structure of page
Opening tag - <p>
Closing tag- </p>

Attributes

Fig 1.1 Lecture slide on attributes, 24 September 2022

Six levels of headings in HTML

Fig 1.2 Lecture slide on headings in HTML, 24 September 2022

Creating a paragraph

Fig 1.3 Lecture slide on creating a paragraph, 24 September 2022

Bold & italic
- Enclose words in <b> and </b> for bold; <i> and </i> for italic within a paragraph

Ordered and unordered list
<ol> vs <ul>

Fig 1.4 Ordered list, 24 September 2022

Fig 1.5 Unordered list, 24 September 2022

Nested list

Fig 1.6 Nested list, 24 September 2022

Writing links
<a> and </a>

Fig 1.7 Writing links, 24 September 2022

Week 5
[Week 4 lecture used]

Week 6

Adding image in HTML
<img src="url">

Fig 1.8 Alt attribute, 7 October 2022

Fig 1.9 Specify width and height, 7 October 2022

Week 7
Introduction to CSS

- allows the creation of rules specifying how the content of an element should appear
- associate rules with HTML 
- two parts: selector and declaration 

Fig 2.1 Selector and declaration, 14 October 2022

INSTRUCTIONS

/>

TASK

Week 2
Analyzing good and bad website designs

We are split into 6 people per group to analyse 3 good website designs and 3 bad website designs for the class activity. Later on, every group presented their chosen websites.


Fig 2.1 Chosen good website designs, 9 September 2022

Fig 2.2 Chosen bad website designs, 9 September 2022

Week 3
Colour theory exercise

1) Read the resources below:
- Web Style Guide: Visual Design (http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html)
- Wikipedia: Web Colors (http://en.wikipedia.org/wiki/Web_colors)
- WebAIM: Color Blindness (http://www.webaim.org/articles/visual/colorblind.php)

2) What are the three basic colours that monitor transmit?
- red, green and blue
3) How many colours could be referenced by name (e.g., "red") in HTML 4.01?
- 16
4) How many different colours are there in the "web-safe" palette?
- 216 
5) Are the majority of people we refer to as colour blind unable to see any colour at all? Explain.
- No. It is just an inability to distinguish certain shades of colour.
6) According to the WebAIM page on colour blindness, what is the key to designing sites that are accessible to people who are colour blind?
- The information can be shown via annotating the image, using different styles or contrasts for each line or by providing the image with text on the page that carries similar information.

Week 5-6
i) In-class HTML "About Me" practice

Fig 2.3 HTML in notepad, 30 September 2022
Fig 2.4 Screenshot of a snippet of "About Me" webpage, 30 September 2022

ii) Exercise 1- Netlify
Based on a word document about Triathlon history.

Fig 2.5 HTML in notepad, 30 September 2022

Fig 2.6 Submitted webpage to Netlify, 30 September 2022

Fig 2.7 Revised version, 14 October 2022

Week 7
Exercise 2- Netlify
Based on a word document about "Vision for the Unequal world".

Fig 2.8 HTML code in Visual Studio Code, 17 October 2022

Fig 2.9 Submitted webpage on Netlify, 17 October 2022

Week 8
Exercise 3- Replicate Landing Page Design

Choose a website listed by Mr Shamsul and replicate the entire landing page design. I chose the website from State Creative. We are allowed to swap the images with any stock photos.

Fig 3.1 Replicated State Creative's landing page design, 23 October 2022

FEEDBACK

Week 9 [exercise 3]
- remove the bullet point
- add back to top button

Week 2
- One of the choices for bad website design is actually Mr Vinod's favourite website. Anyways, after the presentation of good and bad website designs, it was mentioned that the way we presented was short but straight to the point.
REFLECTION

The exercises are manageable as long as attention was given during the tutorial sessions. I do find them beneficial in teaching the basics for the next assignment, though, obviously extra learning materials still have to be obtained through one's initiative.

Comments

Post a Comment