Interactive Design / Exercises

28.8.2023 - 10.10.2023 (Week 1 - Week 7)
Elysa Wee Qi En / 0355060 / Bachelor of Design (Hons) in Creative Media / Taylor's University
Interactive Design
Exercises

LECTURES 

Week 2 / Usability

Keep in mind the five processes of design thinking:
1. Empathise - see what the people need
2. Define - see the needs and problems
3. Ideate - create innovative ideas
4. Prototype - think of and create solutions
5. Test - try out the solutions

Usability is how effectively, quickly, and successfully a user can utilise a design or product. It is the second stage of User Experience (UX) Design. The better a design can accommodate people, the higher its usability. 

Interfaces shouldn't be too complicated as it would decrease discoverability, which is the ability for users to understand the use of a design without instruction. 

Something that can help improve discoverability is feedback. This can be in the form of hover effects, click effects, sound effects etc. to tell the user that their command/ action has been inputted. 

Key principles of usability:
- Consistency
To make sure the elements of the website are harmonious (e.g. footers, headers, typefaces etc.). Helps users to know for certain that they are still 'on the same page'. In web design, this can include your navigation system, page layouts, fonts and branding. 

This can apply to things like buttons too. If each button does not look or act the way the user is already familiar with, at least for the website individually, the user can become frustrated. 

- Simplicity 
An interface should have a clear intention. Simplicity in a design makes it more difficult for the user to make mistakes, done by making the interface obvious with good choices of elements like symbols. Simplicity in a design improves efficiency and user experience. 

- Visibility
The more visible an element is, the more likely a user will know about it and know what to do with it. Vice versa is also important: the less obvious, the more difficult it is for a user to know about. 

Interfaces should have good visibility so a user knows, just by looking at it, what they can access and accomplish on/ from the creation. 

- Feedback
Feedback tells the user about the results of an interaction, making it easily understandable. It tells the user about whether they or the product have succeeded or failed at executing a task. This can be in the form of visual or sound cues. 

- Error prevention 
Making mistakes is common. Error prevention serves to stop users from making such mistakes. It makes their experience easier. An example is messages about levels of security when creating a password, or deletion confirmations. 

Week 3 / Understanding Website Structure

Good website structure is a key part of creating a user-friendly and accessible website. Users can find information easily and the website can keep them engaged. Website performance will be affected.

*SEO - Seach Engine Optimisation - to make the website searchable from every search engine

Websites consist of three main elements: header, body, and footer. 

Header - The top section. Normally contains the logo, navigation menu, and contact information. Create a good navigation menu by using short and concise labels. If there are a lot of pages, you can use a dropdown menu. 

Body - Group of sections where the main information is stored. Can contain text, images, videos etc. Proper organization is important for readability.

Footer - The bottom section. Normally contains copyright information, contact details (like social media icons and phone number links), and links to important pages. Provides closure to the page and extra navigation options.

Other notes:

- To achieve a good website structure, you can use headings (H1, H2, H3...) to create a hierarchy. Group the information logically and label the sections clearly to improve user experience. 

- Support your headline with an image or video. 

- The top fold is the first screen you see when the page loads. Very important, where the most important information is placed. 

- Website can include social proof: reviews or quotes from previous users with their pictures

- List the benefits of your services

Week 4 / The Web

Some people access the web through audible interfaces (text-to-speech or speech-to-text). For example, those who are blind or are unable to type. 

Hardware and software:

• Variety of browsers - Google, Internet Explorer (Edge), Firefox etc.
• Variety of operating systems - Windows, Mac OS, Linux 
• Variety of screen resolutions - 640 x 480 pixels, to 1680 x 1050 pixels and beyond

Because of all these variables, there is a high chance that a website will look different to other people. Despite that, everyone should be able to access the website's content. Therefore you should develop the website depending on these web standards. 

The World Wide Web Consortium (W3C) developed and maintained web standards by developing the standard markup languages we now use to build websites. In this course, we use:

HTML - Hypertext markup langauge
CSS - Cascading style sheets

These languages make it so that developers can understand each other's coding, making development easier. It also ensures that all users can see the website properly. 

How the web works:
Because the web server hosting a website can be anywhere in the world, a browser will first connect to a Domain Name System (DNS) server. 

You connect to the web via an Internet Service Provider (ISP). After typing in the desired web address, the computer will contact the DNS servers, which is a network of servers. They will tell the computer the IP address associated with the requested domain name. 

The DNS server sends a unique number back to the computer and it allows the browser to contact the web server that hosts the desired website. 

A web server is a computer that is constantly connected to the web and is set up specifically to send web pages to users. 

Structure of a web page:
Web pages are like digital versions of a document, so it requires proper formatting and structure. This is so that readers and visitors can understand the content of the site. 

An HR in HTML represents a Horizontal Rule, which creates a section break. 

HTML

HTML code is made up of elements that are placed inside brackets < >. Elements are normally made up of two tags, opening and closing tags. The tags determine something about the information between the tags. 

<element>information</element>

Attributes tell us about the elements. They are split into names and values. 
The name indicates the type of value, and the value is the information of the attribute. 

Fig. 1.1. Attribute name vs value

When creating a webpage, tags known as markup are added to provide extra meaning and help the browsers show users the appropriate structure of the page. 

Important tags:

• <p></p> for paragraph spacing
• <br> is for a line break
• <h1><h2>... <h6> for headings - are already bold, so no need to add bold tags
• <b></b> for bold text - also represents text that is presented in a visually different way, but does not necessarily imply an additional meaning
• <i></i> for italics - also represents text that would be said in a different way from the other content, like technical terms, foreign words, thoughts etc. 
• <ol> creates an ordered list (with numbers)
• <ul> creates an unordered list. 
• <li> (stands for 'list item') - each item in the list is placed between opening and closing tags

Fig. 1.2. HTML for an ordered list

• A sublist can be created by putting list items within list items

Fig. 1.3. HTML for a sublist

• <a></a> creates a link - the attribute is href (hyperlink reference) - links appear in blue and underlined by default

Fig. 1.4. HTML for a link

• <img> is to place an image. This is a one-sided tag, with no closing tag - the attribute is src
  <img src="link.jpg"/>
  Webs only allow jpg, png and gif files

Week 5 / HTML and CSS

ID and Class Attribute
- Every HTML element can carry the ID attribute
- Used to set one element different from the other elements
- No two elements should have the same ID attributes or else the value is no longer unique

- Every HTML element can also carry a class attribute
- Used to identify several elements as being different from the others

- Unless there is a CSS rule indicating that he element should be displayed differently, the appearance of the element won't change

Types of elements
Block elements:
- Elements that will always appear in a new line in the browser window
- E.g. <h1>, <p>, <ul> and <li>

Inline elements:
- Elements that will always appear continuous on the same line as the neighbouring elements
- E.g. <b>, <i>, <em>, <a> and <img>

CSS
- Allows you create rules that specify how an element and its contents should appear
- You could change the background colour, font, text colour etc. 
- Works by associating rules with HTML elements. Rules consist of a selector and declaration

Fig. 1.5. CSS rules

- Declarations are made of properties and values. Specify the property before the value, separated by a colon
- You can have multiple style declarations
- Separate each 'group' with a semicolon

Fig. 1.6. Properties and values

*To add a style that affects the whole document, write it in the head section

• UPPERCASE vs Capital
• Word and letter spacing are not recommended unless necessary

Week 7 / Box Model

The display property
Display is how you control layout with CSS.

Elements naturally
have their own value: either a block-level element or an inline element. 
Block: Height is determined by the content, width is determined by the window.
Inline: <span> is the tag. Text can be wrapped inside a paragraph without disrupting the flow of it. 

Most HTML elements are containers. Each box has three layers: padding, border and margin. 

Fig. 1.7. Layers of a box

The size of these layers can be measured with normal CSS units: em, % and px. To control the appearance of the paragraph, we can add CSS. 

Fig. 1.8. CSS to change the appearance of a paragraph

Week 9 / Box Position Types in CSS

Static - Default position. Elements are unaffected by top, bottom, left and right properties. Also unaffected by z-index.

Relative - Can be moved by position properties, but said properties only affect this box and not the others. (Good for drop-down menus)

Absolute - Positioning is removed from flow and considered alone and apart from the other elements, unless connected to a 'parent' element using [position: relative] on it. (Good for background videos)

Fixed - Removed from flow similar to absolute, but they remain in place on screen even as the page is scrolled. (Good for back-to-top buttons etc.)

Sticky - Sticks to the top of the page when the scroll reaches it. Returns to position after scrolling above it. Parent element needs [position: relative]. (Good for navigations)

• Use [z-index] to adjust what is in front and what is behind
• [vh] value is used universally across all viewports. 100vh is going to be the max vertical height of the screen no matter the device size or resolution. However, using [height] will cause the content to overlap if it doesn't fit. Using [min-height] instead, however, will cause the container to grow if the content doesn't fit. 

INSTRUCTIONS

Fig. 2. Module Information Booklet

Exercise 1: Web Analysis

In this first exercise, we were tasked with picking two websites from a list and analysing them - identifying their strengths, weaknesses, purpose etc. 

I ended up choose the websites for 'EVER', a residence area, and 'Twinbru', a company that specialises in creating digital fabrics. 

Fig. 3.1. First page of EVER (14/12/2023)

Visit the site: https://ever.ru/#

I like this website, I think the transitions are nice and the creativity is definitely there. The residence ends up being well-promoted. However, due to all these transitions, the scrolling can be slow and that can be a hit-or-miss with people. 

Fig. 3.2. First page of Twinbru (14/12/2023)

Visit the site: https://www.twinbru.com/

I like this website as well. At least, I really enjoy the home page. I think it is very aesthetically pleasing, though it can be a bit laggy or take some time to load. Apart from that, the other tabs don't have the same aesthetic as the home page.

FINAL Web Analysis Submission

Link to presentation slides:

https://docs.google.com/presentation/d/1bPLvX4d6NBTPPt-MqAjWy8Yad3A69S6MZJY4TVWq_3s/edit?usp=sharing

Exercise 2: Web Replication

This exercise is to help us understand how to create a web layout. For this, we used Adobe Photoshop to replicate the home pages of two different websites. We were given three to choose from, and I ended up going for the websites for Ocean Health Index and Morgan Stanley. 

It was tricky to match the fonts on the websites, as the only ones I had available on my computer weren't exactly the same. So instead, I chose the closest one I could and adjusted font size, kerning etc. to try and replicate the look of the original website. 

Fig. 4. Replication progress (9/9/2023 - 14/12/2023)

FINAL Web Replication Submission

Fig. 4. Final Web Replication Submission (14/12/2023)

Link to presentation slides:

https://docs.google.com/presentation/d/1uTT1OUWhvTrQUZKs9nT9zDDzq7lHkdTDQ7JTc_8fBgY/edit?usp=sharing

Exercise 3: Recipe Card

After learning the basics of HTML and CSS in class, we were given this assignment in week 6. We had to use what we learnt and code a simple recipe card. We could choose whatever recipe for whatever dish we wanted. 

I ended up choosing a recipe for crepe cakes. 

For this, I wanted to make sure the hierarchy of the information was clear so that it would be easier to read and understand. 

Fig. 3.1. Use of h1, h2 and h3 (14/12/2023)

Also, since we learnt how to code both ordered and unordered lists, I used the ordered list for the steps and the unordered list for the ingredients.

Fig. 3.2. Code for ordered and unordered lists (14/12/2023) 

FINAL Recipe Card Submission

Link to website:

https://elysa-recipecard.netlify.app/

 

REFLECTIONS

Experience
This semester was off to a rough start since my Adobe wasn't working properly for a while. Because of that, the web replication exercise had to be done in the school library, which wasn't a bad experience per se but it was quite annoying to have to transfer so many screenshots with Google Drive. In fact, this assignment ended up being submitted late because of the struggles. But overall, all these exercises helped me better understand what I personally like in a website and even the basics of how to create one myself.

Observations
There are many different types of websites out there, but nowadays fancy transitions and effects are growing more popular. This makes sense in this technologically growing era, but it then means there are a lot more ways to express yourself (and/or what you're promoting) in a website or page. Like how with EVER, even a website promoting a residence area can be this unique and complicated, and end up showcasing/ promoting the residence in a compelling way.

Findings
Before this, I had no idea that there were two types of code involved in creating websites, and I also didn't know how powerful it was. It's not necessarily easy to learn all the commands, but the fact that one command is programmed to do something is impressive to me. Just a few lines of words and letters and the website can look completely different.