Interactive Design / Lectures & Exercises

28/08/2023 - / Week 1 - Week 8

Iman binti Kamarudin / 0364014

Interactive Design / Bachelors in Design (Hons) in Creative Media

Lectures & Exercises

---

---

LECTURE

Usability

- How efficiently, effectively, and successfully a particular user can utilise a product or design.

- 2nd level of UX Design

Users should be able to find their way through an interface without relying on expert knowledge.

Key Principle of Usability

1. Consistency

- Ensures your website looks coherent and works harmoniously across all its different elements (headers, footers, sidebars & navigation bars.)

- Consistent design is intuitive design.

- If similar looking things don't produce a similar output, the user is bound to become frustrated.

2. Simplicity

- Betters user interfaces by helping the user achieve their goals faster and more efficiently

- Number of steps involved in a process should be minimised

- Use symbols and terminology that make the interface as obvious as possible

3. Visibility

- The more visible an element, the more likely users will know about them and how to use them

4. Feedback

- Communicates the results of any interaction

- Gives the user a signal that they have succeeded or failed at performing a task

- e.g hovering over a navigation item and it changes colour or loads a submenu

5. Error Prevention

- Alerting a user when they make a mistake

The 5 Processes of Design Thinking

1. Empathise

2. Define 

3. Ideate

4. Prototype

5. Test

Understanding Website Structure

Why?

- It is the foundation of a user friendly and accessible website

- It affects user experience, SEO (search engine optimisation), and overall website performance

- Keeps users engaged

Key Elements

1. Header

- Website logo, navigation menu and contact information

- Provides user quick access to essential information and navigation

2. Body

- Main content

- Text, images, videos and other multimedia elements

- Proper organisation is crucial for readability

3. Footer

- Copyright information,  links to important pages and contact details

- Provides closure to the webpage and additional navigation options

Web Standards

- There are many different ways to access the Web

- Many people who are blind depends on speech output and people who are unable to use their hands depend on speech input

Hardware & Software Issue

- Growing variety of browsers

- Variety of operating systems

- Variety of screen resolutions

Due to the diversity, there is a high probability that your website will look different to others than it does to you. Despite this, the content of your website is what is most important.

Why Web Standards?

- To make the internet a better place for both developers and visitors

How The Web Works?

- Connect to the web via ISP

- Type a domain name/web address into your browser to visit a site

- Computer connects to a network of servers called DNS servers.

- They tell your computer the IP address associated with the requested domain name

- Every device on the web has its own unique IP address.

Structure Of A Webpage

- In all kinds of documents, structure is important in helping readers to understand the messages we are trying to convey 

HTML elements are made up of two tags <element>information</element>

ID and Class Attribute

<div> doesn't have any meaning. You need to define it by using an ID/class attribute.

ID Attribute #

- Every HTML element can carry the ID attribute

- It is used to uniquely identify the element from other elements on the page

- 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 group of elements to be different from other elements on the page (you can use the same tag more than once)

Block Elements

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

- It is known as a block level element

- <h1>, <p>, <ul> and <li>

Inline Elements

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

- It is known as an inline elements

- <b>, <i>, <em>, <a> and <img>

Introduction to CSS

- CSS allows you to create rules that specify how the content of an element should appear

- You can set the background colour, typeface etc.

A CSS rule contains a selector and a declaration 

- Selector: all the HTML elements - p, h1, h2, h3

- Declaration: property and value {insert style declaration} {font-family: Arial}

CSS Selectors

Box Model

<div> is a blank box where your <p>, <li> and <h1> etc. live and you can change the style of.

Most HTML elements are containers. Each container has three layers that surround its content. The layers are, in order from inside to outside

- Padding (surrounds the content and enlarges the box if added)

- Border (space outside the box that can move it to the left/right/bottom)

- Margin (outside the border)

* selects all elements

border: selects all sides

padding: 0 40px [0px on top/bottom and 40px on left/right]

- for image

border-radius: 100px [to create circle border]

float: left [paragraph space isn't affected by image]

- for paragraph space with image inside

overflow: auto [resizes to fit image size and text is at top]

---

INSTRUCTIONS

Exercise 1 - [Week 2]

- Evaluate two websites

References: cssawards.com, awwwards.com 

Fig 1.1 - Website Analysis Slides

Exercise 2 - [Week 3]

- Replicate two existing main website pages using Adobe Photoshop/Illustrator

References: oceanhealthindex.org, banditrunning.com, pexels.com

Process

First, I had to get the full sized screenshot of the website. Clicking on 'Inspect' when right clicking will open a small window. Then, press Ctrl + Shift + P and it will open up this panel.

Fig 2.1 - Inspect Window

Afterwards, type in 'screenshot' and these options should come out. Press on the second option and it will automatically download the full screenshot of the main page of the website.

Fig 2.2 - Screenshot Options

I then brought the screenshots into Adobe Illustrator and created another artboard with the same dimensions.

After, I started mapping out where each element is using the ruler guides to make it easier to place text and images in the right ratio and position as the original. Afterwards, I placed the images, header and footer using the shape tool and photos from pexels.com.

Fig 2.3 - Bandit Website Ruler Guide

Fig 2.4 - Bandit Website Image Layout

For the Bandit and Asics logo I traced over the reference screenshot using the pen tool.

Fig 2.5 - Bandit and Asics Logo Trace

I repeated this process with the second website replication. For the image in the last section, I went into Photoshop to slightly erase and blur the top section so it blended better into the dark blue background like in the original.

Fig 2.6 - Ocean Health Ruler Guide

Fig 2.7 - Ocean Health Image Layout

Fig 2.8 - Ocean Health Further Elements Layout

Final Website Replications

Fig 3.1 - Final Bandit Website Comparison

Fig 3.2 - Bandit Replication PDF

Fig 3.8 - Bandit Complete Replication JPEG

Fig 4.1 - Ocean Health Website Comparison

Fig 4.2 - Ocean Health Replication PDF

Fig 4.6 - Ocean Health Complete Replication

Exercise 3 [Week 6]

- Create a recipe card using HTML and CSS

First I searched up a recipe through About Thyme and decided to go with strawberry cobbler. Afterwards, I copy and pasted the ingredients and instructions into Notepad and then into Adobe Dreamweaver.

I set up a layout referencing what we learned in Week 7's Box Model class. I wrote the title of the webpage and added an image. I also put the ingredients in an unordered list and the instructions in an ordered list with added breaks after each step to make it easier to read.

Fig 5.1 - HTML 1

Fig 5.2 - HTML 2

I then created a style sheet and changed the font for the body as well as the text colour. For the layout I followed what we created in class as well. 

Fig 5.3 - Body CSS

I decided I wanted to make it harder for myself so I tried to add in checkboxes. I had to google how to do so and followed the format that w3schools gave. 

Fig 5.4 - Ingredient List HTML

Fig 5.5 - Checkbox CSS

I had to change a few things such as removed the 'checked' code so that it stopped displaying as immediately ticked when you load the website. I also had to rename the class to ingredients-list so it didnt class with the container class I created earlier for the layout.

Fig 5.6 - Adjusted Ingredients HTML

In the style sheet, I added a border to the checkboxes and changed the background colour to a dark blue when it was checked. I also rounded out the checkbox corners using border-radius.

Fig 5.7 - Adjusted Checkbox CSS

To make the title and sub-headings match a bit more and emphasise them, I added a box around them with rounded edges and changed the text colour to the same off white as the container background.

Fig 5.8 - Text CSS

To make it even worse for myself, I decided to change the numbering of the ordered list to add the word "step" in front.

Fig 5.9 - List CSS

Final Recipe Card

Website link: https://imankamarudin-exercise3.netlify.app/

Fig 6.1 - Final Recipe Card Screenshot

---

REFLECTION

My experience with these exercises was pretty positive. There was quite a big learning curve but I think these exercises really eased me into coding since I was pretty intimidated in the beginning. I found that coding can be really fun if you plan ahead and lay everything out in the beginning so you know what goes where.