Interactive Design - Lectures

03.04.2023 - 26.05.2023 / Week 1 - Week 8
Lim Rui Ying / 0358986
Interactive Design / Bachelor of Design (Hons) in Creative Media
Lectures

---

LECTURES

WEEK 1 | Module briefing

In the first class, Mr Shamsul gave us a briefing on the module and learning outcomes. He introduced the digital tools we are using for this module which are Figma and Adobe XD for prototyping, and Adobe Dreamweaver and Visual Studio Code for web development. He also briefly explained web design that users' needs and research are very important before designing a website, and the grid system is also vital in designing the layout. Next, we had a brief on upcoming exercises and projects with the marks distribution.

Lecture: Surveying the Possibilities

Before designing a website, we should understand the characteristics and criteria of a high-quality website. We should study the purpose, design, strengths and weaknesses, target audience and usability of plenty of websites to identify the major criteria of those high-quality websites and apply them in further web design.

WEEK 2 | Usability

What is Usability?

Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation. It is the second level of User Experience. When users first encounter an interface, they should be able to find their way about easily enough to achieve objectives without relying on expert knowledge.

Key Principle of Usability

Consistency

The landing page of 153/Joombas website

Consistency is a key factor in web design for both visual elements and functionality. Consistent design lets users recognise and learn the patterns easily.  It includes headers, footers, sidebars and navigation bars, menu structure page layout, fonts and typography, and branding in design. Consistency ensures that your website looks coherent and works harmoniously across all its different elements.

Simplicity

The landing page of the Moheim website

Simplicity refers to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes. Simplicity helps users achieve their goals faster and more efficiently, all while enjoying a great user experience. To achieve simplicity, the websites should have less wording, fewer columns, and limited typefaces. However, if the website is too simple, it looks empty.

Visibility

CTA button on the Apple website visible in blue colour

Visibility is the basic principle that the more visible an element is, the more likely users will know about them and how to use them. Users should know, just by looking at an interface, what their options are and how to access them.

Feedback

The hover effect on the "Deep Focus" playlist on the Spotify website

Feedback communicates the results of any interaction, making it both visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task. An example of feedback is when you’re on desktops or laptops when you hover over navigation items, you expect them to change colour or load a submenu. 

Error Prevention

Error prevention (Source: Tubik blog)

It involves alerting a user when they’re making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake. For example, "The password is not strong enough" will appear while creating a new password, a "Do you want to delete these items?" window will pop up when the user wants to delete something, and the password/email is to key in twice, etc.

WEEK 3 | Colours for Web

Why colour matters in web design?

- Help understand n navigate the site

- Colour improves visitors' online experiences 

- Plays a significant role in branding and product messaging

Colour wheel

Colour wheel (Source: Dopely Colors)

- Primary colours: red, yellow, blue

- Secondary colour: orange, green, purple

- Helps to select the colour for web design, app design, etc

Colour relationship

Colour relationships (Source: Dopely Colors)

- Monochrome: consisting of various tints, shades, and saturation of the same colour 

- Complementary: based on two colours that are next to each other on 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

Colour warmth

Colour warmth

Warm colours

- contain higher amounts of yellow and red are considered warm colours

- evoke a sense of passion, happiness, and heat
- can also seem aggressive and bring feelings of danger, often used in alert messages

Cool colours
- contain higher amounts of blue and purple

- reminisce of chilly climates, crystal clear waters, or the sky

- more soothing and relaxing than warm colours

- Can also carry connotations of formality and sadness

Colour system

Colour system (Source: Mandi Design & Co,)

- RGB 

- CMYK: uses percentage; for print design

- HEX: uses a six-digit, three-byte, hexadecimal description of each colour, such as #000000 (black) or #ffffff (white), every two characters represent a colour value

Tints and shades

Tint, shade and tone (Source: Knit Picks blog)

- Tints: add white to a colour

- Shades: add black to a colour

- Eg. poster colour

Hue, Saturation, Lightness (HSL)

- Hue: a colour

- Saturation: colour intensity (vibrant/faded)

- Lightness: defines how bright a colour is compared to pure white 

Contrast

- Crucial element of any website regarding the background colour and text

- Creating contrast is vital for differentiation between elements, readability and content hierarchy

Colour Psychology

Colour psychology (Source: User Testing)

Tools to select effective colour schemes

- Adobe Color

- Paletton

WEEK 5 | Organising the Web

WEEK 6 | The Web

Web Standards

- Early days: people accessed the Web using a keyboard, mouse and monitor

- Now: there are various ways people can access the web

- On phones or pocket mobile devices
- On tablet computers with touchscreen interfaces
- Through audible interfaces (speech output & speech input)

Hardware and software issues:

- Variety of browsers: Microsoft Internet Explorer, Mozilla, Firefox, Google Chrome, Opera, Safari, etc

- Variety of operating systems: Windows, Mac OS and Linux

- Variety screen resolutions: 640 x 480 px → 1680 x 1050 px & beyond

- To make sure your website and its content work across all devices and browsers, develop your website in accordance with web standards
- World Wide Web Consortium (W3C) is responsible for creating and maintaining web standards (*WWW was invented by Tim Berners-Lee)

- HTML is one of the standard markup languages defined by W3C

WEEK 7 

Image Format for Web: JPEG, GIF (support transparency, use for small size of image), PNG (support transparency) (*not all browsers support SVG)

Image Resolution for Web: 72 dpi

ID and Class attribute

ID attribute

- Uniquely identify the element from other elements on the page

Class attribute

- Can share the same value or name

Block elements

- Some elements will always appear to start on a new line in the browser window

- Eg. 0h1, h2, p, a

In-line elements

- Some elements will always appear to continue on the same line as their neighbouring elements

- Eg. img, b, i, u