INTERACTIVE DESIGN - TASK 1: EXERCISES

29th August - 17th October (Week 1 - Week 8)
Azim Azariff Bin Azahar (0353583)
Bachelor of Design (Honours) in Creative Media
Interactive Design - Task 1: Exercises

Image from etsy.com

LECTURES

Week 1 (29/08/23): The first week was basically an introduction to the module. We went through the module booklet and Sir gave us brief explanations for each project. So the first class ended early.

Week 2 (05/09/23): In the second week, Sir went through the first lecture notes for this module. He would give us explanations on each slide whilst also giving a few examples. Once the lecture notes were done, we had a group activity in class. We were separated into 3 groups and we basically had to create a website on paper with the scenario given. Honestly it was a fun first activity for this module.

What I learned in Week 2: Usability: Designing Products for User Satisfaction

What is Usability?
- Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.
- A design's usability depends on how well its features accommodate users' needs and contexts.
- An interface with high usability guides users through its easiest route to achieve its goal.

Principle of Usability:

1. Consistency
2. Simplicity
3. Visibility
4. Feedback
5. Error Prevention

Consistency
- It is a key factor in web designing for both virtual elements and functionality.
- Consistent design is intuitive design.
- It includes consistent navigation system, page layout, menu structure, fonts, typography and branding in web design.
- Consistency is key for these patterns be recognised and learned by users.

Simplicity

- Simplicity is used loosely to refer to the need to minimise 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.

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

Feedback
- Feedback communicates the results of any interaction, making it both visible and understandable.
- It's job is to give the user a signal that they have succeeded or failed when performing the task.

Error Prevention
- It involves alerting a user when they're making an error.

Week 3 (12/09/23): I was absent this week.

What I learned in Week 3: Understanding Website Structure

Why Website Structure matters?
- Website structure is the foundation of a user-friendly and accessible website.
- It affects user experience, SEO, and overall website performance.
- A well-structured website helps users find information easily and keeps them engaged.

The 3 Key Elements in a website:

1. Header
2. Body
3. Footer

Header
- The header is the top section of a website.
- Usually contains the logo, navigation menu, and contact information.
- It provides users quick access to essential information.

Body
- The main content area of the webpage.
- It contains texts, images, and other multimedia elements.
- Proper organisation of content within the body is crucial for readability.

Footer
- Located at the bottom of the webpage.
- Usually contains copyright information, links to important pages, and contact details.
- The footer provides closure to the website and additional navigation options.

Organising Content
- Use headings to create a hierarchical structure.
- Logical grouping of content and clear labelling of sections improve user experience.

Navigation Menus
- Helps users to move around the website.
- Use clear and concise labels.
- Consider using drop down menus for complex sites.

Week 4 (19/09/23): In the fourth week, Sir went through the week 4 lecture notes as usual before beginning the tutorial. For the tutorial, Sir showed all of us how to create a website using the notepad app. It was quite interesting to be honest. After the tutorial was done, we all had to create a similar website without any instructions given.

What I learned in Week 4: Interactive Design Web Standards

Web Standards
- There are many other ways people access the web.
- Many people do so on their phones or other mobile devices.
- Some access the web using audible interfaces.
- Blind people uses speech output and people who are unable to use their hands use speech input.

Hardware and Software issue:
- Growing variety of browsers that people can choose from: Microsoft Internet, Mozilla Firefox, Google Chrome, Safari and others.
- People use a variety of operating systems, including Windows, Mac OS, and Linux.
- People have their computers set to a wide variety of screen resolutions, from 640 x 480 pixels to 1680 x 1050 pixels and beyond.

Web Standards
- The central organisation who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C).
- The W3C has defined dozens of standards, including the standard markup languages we use to build websites.
- The standard markup languages we'll be using are: HTML and CSS.

Why Web Standards?
- To make internet a better place, for both developers and visitors.
- Using web standards will ensure that all browsers will display your web site properly, without time-consuming rewrites.

How the web works
- To find the location of the web server, your browser will first connect to a Domain Name System (DNS) server.

Fig. 4.1 How the web works
(19/09/23)

Fig. 4.2 How the web works
(19/09/23)

Structure of a web page
- Understanding structure
- Learning about markup
- Tags and elements

Fig. 4.3 Web structure
(19/09/23)

Fig. 4.4 Web structure
(19/09/23)

- Many web pages act like electronic versions of these documents.
- Structure is very important in helping readers to understand the messages we are trying to convey and to navigate around the document.

How pages use structure

Fig. 4.5 How pages use structure
(19/09/23)

HTML describes the structure of pages
- In the browser window, you can see a web page that features exactly the same content as the Word document.
- To describe the structure of a web page, we add code to the words we want to appear on the page.

Fig. 4.6 HTML describes the structure of pages
(19/09/23)

- The HTML code is made up of characters that live inside angled brackets <>.
- These are called HTML elements.
- Elements are usually made up of two tags: an opening tag and a closing tag.

Example: <element>information</element>

Fig. 4.7 A closer look at tags
(19/09/23)

Fig. 4.8 A closer look at tags
(19/09/23)

Headings
- <h1> main headings
- <h2> subheadings
- If there are further sections under the subheadings then the <h3> element is used and so on.

Fig. 4.9 Headings
(19/09/23)

Paragraph
- To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag.

Fig. 4.10 Paragraph
(19/09/23)

Bold & Italic
<b>
- By enclosing words in the tags <b> and </b> we can make characters appear bold.
- The <b> element also represents a section of text that would be presented in a visually different way although use of <b> elements does not imply any additional meaning.

Fig. 4.11 Bold
(19/09/23)

<i>
- By enclosing words in the tags <i> and </i> we can make characters appear italic.

Fig. 4.12 Italic
(19/09/23)

Lists
- Ordered list are lists where each item in the list is numbered. List is for set of steps for a recipe that must be performed in order.
- Unordered list are list that begin with a bullet point.

<ol>
- The ordered list is created with the <ol> element

<li>
- Each item in the list is placed between and opening <li> tag and a closing </li> tag.

Fig. 4.13 Ordered list
(19/09/23)

<ul>
- The unordered list is created with the <ul> element.

Fig. 4.14 Unordered list
(19/09/23)

Nested Lists
- You can put a second list inside an <li> element to create a sub-list or nested list.
- In nested unordered lists, the browser will usually change the style of the bullet too.

Fig. 4.15 Nested lists
(19/09/23)

Links

Commonly type of links:
- Links from one website to another.
- Links to one page to another on the same website.
- Links from part of a web page to another part of the same

Writing Links
- Links are created using the <a> element.
- User can click on anything between the opening <a> tag and the closing </a> tag.

Linking to other sites

<a>
- Links are created using the <a> element which has an attribute called hred.

<img>
- The <img> HTML tag servers the purpose of incorporating images into a web page.
- In the context of web design, it's important to note that images are not physically inserted within a web page, instead, they are linked to it.

Week 5 (26/09/23): I was absent on this day

Week 6 (03/10/23): I came an hour late but once I arrived, Sir was about to finish the lecture. Once the lecture slides were done, we had an in-class exercise. We used Adobe Dreamweaver to create a website whilst also implementing CSS styles to it.

INSTRUCTIONS

EXERCISES

Exercise 1: Web Analysis
(Week 1 - Week 2)

Our task is to analyse an existing website and identify areas for improvement. This exercise will help us develop our critical thinking skills and gain insights into web design best practices. We basically have to choose 2 websites from the given link and create a Google Slide report containing 500 words in total. Basically 250 words for each website.

Link Given: https://www.csswinner.com/winners

The 2 websites I chose:

Squarespace 20th Anniversary: https://timeline.squarespace.com/

Tim van Wolfswinkel: https://timvanwolfswinkel.com/

To be honest I don't really have a reason why I chose these 2 websites, I basically just went through the link given and went through a few websites until I found something interesting to work on.

Google Slide link:
https://docs.google.com/presentation/d/1YZeQVA3Z227yoquiQ7cBdloyn7BjnDA-MMCyTGIObNM/edit?usp=sharing

Google Slide report:

Fig. 1.1 First slide
(05/09/23)

Fig. 1.2 Second slide
(05/09/23)

Fig. 1.3 Third slide
(05/09/23)

Fig. 1.4 Fourth slide
(05/09/23)

Fig. 1.5 Fifth slide
(05/09/23)

Exercise 2: Web Replication
(Week 2 - Week 3)

Our task is very self-explanatory. We're given three choices of websites and we basically have to replicate the website by using softwares such as Adobe Photoshop and Adobe Illustrator. This task is to develop our design skills when using these softwares and also gaining insight to web design skills. We're not required to use the same exact pictures or fonts, anything similar would do.

The website I chose: https://banditrunning.com/

Fig. 2.1 Website Chosen
(11/09/23)

I basically took a screenshot of the whole main page and used Adobe Illustrator to replicate the page.

Fig. 2.2 Screenshot in Illustrator
(11/09/23)

The task was quite simple, I managed to complete it in a few hours. I used the basic tools such as the pen tool, shapes tool, direction selection tool, etc.

Fig. 2.3 Side-by-side comparison
(11/09/23)

The Final Replication:

Google Drive Link:
https://drive.google.com/drive/folders/1Fn8WwM5I9_IpJ3nK9nOnc9PzlsIkD-Au?usp=sharing

Exercise 3: Creating a Recipe Card
(Week 6 - Week 7)

Our task is to create a recipe card by using HTML and CSS in the Dreamweaver app. It's pretty simple as we had an in-class exercise before we were given this task.

I got my recipe from a website called "aheadofthyme".

This is the link to the website: https://www.aheadofthyme.com/easy-baked-meatballs/

The recipe I chose was the Easy Baked Meatballs.