Interactive Design/ Lectures & Exercises

24/04/2024 - /05/2024 / Week 1 - Week 8

Lim En Yu / 0354452

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor’s University 

Lectures & Exercises: Web Analysis, Web Replication & Recipe Card

---

TABLE OF CONTENTS

1. Instructions

2. Lectures

3. Exercises

4. Feedback

5. Reflection

---

Instructions

Fig 1.1 Module Information

---

Lectures

Week 1 Lecture Slides:

Fig 2.1 Week 1 Lecture Slides, Week 1 (24/4/2024)

Usability: Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.

Key Principle of Usability:

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

1. Consistency

• Consistency ensures that your website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars.
• It includes consistent navigation system,  page layout and menu structure, fonts and typography and branding in web design.

Example of Consistency in design:

• Apple.com
• SimeDarby.com.my
• 153joombas.com

2. Simplicity

• Simplicity is used loosely to refer 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.

3. Visibility

• 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.

4. Feedback

• 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 color or load a submenu. 

5. Error Prevention

• 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. 
• The main reason this principle of error prevention is important is that we humans are prone to- and will always make mistakes.

Fig 2.2 Example of Error Prevention, Week 1 (24/4/2024)

Mailchimp demonstrating error prevention by asking users to type DELETE to confirm their actions.

Common Usability Pitfalls

1. Complex interfaces
2. Confusing navigation
3. Poor feedback
4. Inadequate error handling

Week 2

There is no class for this week but we are provided with an article for further reading which is The Anatomy of a Web Page: 14 Basic Elements. 

14 Basic elements that essential for a web page:

1. Header: Header is the upper (top) part of the webpage. Headers are also referred to as site menus and positioned as an element of primary navigation in the website layout.
2. CTA Button: A call-to-action (CTA) button is an element of a user interface aimed at encouraging a user to take a certain action. This action presents a conversion for a particular page or screen (for example, buy, contact, subscribe, etc.). Effective call-to-action buttons are easy to notice; designers intentionally create them so that website visitors could see them in split seconds and respond.
3. Hero Section: Hero section is the above-the-fold (pre-scroll area of the web page containing the element that presents the strong visual hook: a hero image, slider, catchy piece of typography, video, or anything else attracting visitors’ attention and transfers a needed message to them.
4. Footer: Footer is the lower (bottom) part of the web page which usually marks its end. Being another common zone of global website navigation, the footer provides the additional field for useful links and data users may be interested in finding.
5. Slider: Slider is an interactive element that applies a technique of a slideshow or carousel to present different products, offers, etc. It is especially popular as a part of e-commerce and business websites to present a sort of gallery of products or services. 

Benefit of slider: 

• saving space on the page
• user engagement 
• attractive visual hook.

6. Search: Internal search is a functionality that enables a visitor to browse the content inside the website and shows it according to the search query. Tuned correctly, it shows the relevant content, and this way provides the shortcut to what the user needs.

• saves the user’s time and effort
• amplifies usability and desirability of the digital product
• helps retain users
• increases conversion rates.

7. Menu: The menu is one of the core navigation elements in user interfaces. It is a graphical control that presents the options of interactions with the interface. Basically, it can be the list of commands – in this case, options will be presented with verbs marking possible actions like, for example, “save,” “delete,” “buy,” “send,” etc.

• Classic Horizontal Menu: The most common and well-recognized type of menu which presents the core navigation organized as a horizontal line in the website header, mentioned above.
• Slidebar Menu: Quite a classic type, presents a vertical list of options sticking to the left or right side of the web page.
• Dropdown Menu: A more complex type of menu for content-heavy websites; here, the list of additional options opens below the primary one when it’s clicked or hovered.
• Megamenu: That’s the complex expandable menu in which the big list of multiple choices is presented in a two-dimensional dropdown layout.
• Hamburger Menu: When the hamburger button (typically marked with three horizontal lines) is clicked, the menu expands. This option saves space and is often applied to mobile versions of websites.

8. Breadcrumbs: Breadcrumbs are navigation elements used to support users in a journey around the website: they get aware of where they are on the website and can get used to the website structure more easily.

• Increase findability
• Fewer clicks needed
• Effective use of screen space
• No misinterpretation
• Lower bounce rate

9. Form: Form is an interactive element that allows users to send information to the system or server. In a nutshell, it is a digital version of any real paper form we have to fill in to provide someone with the arranged information.
10. Cards: Cards, also called tiles, are layout elements that help arrange and visualize homogeneous data or content in a scannable and easy-to-use way. Cards are usually organized in a sort of grid, but each card looks like a separate piece in this system.
11. Video: Video is not a really basic part of a web page, but with the progress of web development solutions and technical abilities, we can find it more and more often on the website of different kinds these days.
12. Progress Indicator: Progress indicator is a small but helpful element that helps the visitor to understand the current point in the general volume of information or set of actions. It is beneficial on the pages loaded with text content and supposing long scrolling, like long-read articles or guides, for example.
13. Favicon: Favicon, also known as URL icon or bookmark icon, is a special type of symbol representing the product or brand in the URL-line of the browser and in the bookmark tab.
14.Tags: That’s another element of secondary navigation level, often found in blogs and websites with plenty of homogenous content. Tag is presented with a keyword or phrase that enables users to jump directly to the items marked up with it.

Week 2 In class activity:

We are divided into groups and each group assigned with a scenario in which we need to design a new interface to solve a

particular problem or meet a particular user need. Each group will need to sketch out their design ideas on papers and will have an individual to test their prototype for usability by having another person act as "users" and attempt to complete a task using the product or interface.

Scenario of our group:

Fig 2.3 Scenario given, Week 2 (30/4/2024)

Final outcome of user interface:

Fig 2.4 Final outcome of week 2 in class activity, Week 2 (30/4/2024)

Week 3 Lecture Slides:

Fig 2.5 Week 3 Lecture Slides, Week 3 (7/5/2024)

Understanding Website Structure: Website structure is the foundation of a user-friendly and accessible website. A well-structured website helps users find information easily and keeps them engaged.

Websites are typically divided into three key elements:

• Header
• Body
• Footer

Header: The header is the top section of a webpage. It usually contains the website's logo, navigation menu, and contact information. The header provides users with quick access to essential information and navigation.

Body: The body is the main content area of a webpage. It contains text, images, videos, and other multimedia elements. Proper organization of content within the body is crucial for readability.

Footer: The footer is located at the bottom of a webpage. It typically includes copyright information, links to important pages, and contact details. The footer provides closure to the webpage and additional navigation options.

Organizing Content

• Content organization is key to a well-structured website.
• Use headings (H1, H2, H3, etc.) to create a hierarchical structure.
• Logical grouping of content and clear labeling of sections improve user experience.

Navigation Menus

• Navigation menus help users move around the website.
• Use clear and concise labels for menu items.
• Consider using dropdown menus for complex sites.

Week 4 Lecture Slides:

Fig 2.6 Week 4 Lecture Slides, Week 4 (14/5/2024)

In this week of lecture we have learned about what is web standards, the structure of a web page and the most important, HTML code.

Web Standards: Web standards are the core set of rules for developing websites. It might be possible to develop sites that do not comply with standards, but doing so increases the likelihood that many people will be unable to access your site.

HTML describes the structure of pages

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.

• Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.
• Heading: <h1><h2><h3>...
• Paragraph tag: <p>
• Bold: <b>
• Italic: <i>
• Ordered list: <ol>, followed by <li>
• Unordered list: <ul>, followed by <li>
• Website tag: <a>, specify which page to link using the href attribute

Week 4 in class activity:

After having the lecture, we have carrying an in class activity to try out the HTML code that we have learned using Notepad. We are instrcuted to do a website of our self introduction.

Fig 2.7 Coding inside Notepad, Week 4 (14/5/2024)

After we have completed the coding, we are then instructed to publish the web to Netlify.

Final Outcome of website published in Netlify

Fig 2.8 Self introduction published to Netlify, Week 4 (14/5/2024)

Week 5 Lecture Slides:

Fig 2.9 Week 5 Lecture Slides, Week 5 (21/5/2024)

Extra Mark Up:

• ID attribute: It is used to uniquely identify the element from other elements on the page. Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page.
• Class attribute: Sometimes you will want a way to identify several elements as being different from the other elements on the page. The class attribute on any elements can share the same value or name.

By default, using these attributes does not affect the presentation of an element. It will only change their appearance if there is a CSS rule that indicates it should be displayed differently.

Block Elements:

• Some elements will always appear to start on a new line in the browser window.
• It is know as block level elements.
• Example: <h1>, <p>, <ul> and <li>

Inline Elements:

• Some elements will always appear to continue on the same line as their neighbouring elements.
• It is know as inline elements.
• Example: <b>, <i>, <em>, <a> and <img>

Week 5 in class activity

This week we have learned about how to create a table with the code <table>,<tbody>,<th> and <tr>. Also, we have also explored about rowspan and columnspan that allow us to combine the cells of the table. By applying the code, we have created a timetable schedule of the classes.

Fig 2.10 Coding in Adobe Dreamweaver, Week 5 (21/5/2024)

Here is the outcome after the input all the information inside the table:

Fig 2.11 Table created, Week 5 (21/5/2024)

Week 6 in class activity

After last week's class that we learned how to create a table, this week we learn how to create a contact form and also CSS.

Here is my work of coding of contact form which Mr Shamsul has asked us to complete before the class.

Fig 2.12 HTML code for the form, Week 6 (28/5/2024)

Outcome of the simple contact form that I have created:

Fig 2.13 Outcome of contact form, Week 6 (28/5/2024)

After that, we have learned CSS code that can change the style of the web page like font, font size, background colour, backgorund image, margin, border and more. Here is my CSS code for my web page:

Fig 2.14 CSS code, Week 6 (28/5/2024)

Fig 2.15 CSS code, Week 6 (28/5/2024)

Outcome for the design layout of my web page after including CSS code:

Fig 2.16 Web page with CSS code, Week 6 (28/5/2024)

Fig 2.17 Web page with CSS code, Week 6 (28/5/2024)

Week 7 Lecture Slides:

Fig 2.18 Week 7 Lecture Slides, Week 7 (4/6/2024)

We have learned on different types of CSS selectors which include:

• Universal Selector
• Element Selector
• ID Selector
• Class Selector
• Descendant Selector
• Attribute Selector
• Child Selector
• Pseudo-class Selector
• Pseudo-element Selector
• Adjacent Sibling Selector
• General Sibling Selector
• Complex Selector

Week 7 in class activity

This week, Mr Shamsul has taught us how to position the image beside the text and filling in the empty space. We will need dto apply "float" in css code but at the same time we will need to have a long enough paragraph or else the texts and images will crush together.

Fig 2.19 Images' CSS code, Week 7 (7/6/2024)

The images are able to place at left and right, and if the text are too close to the image, we can use the margin to control it.

Fig 2.20 Outcome of the CSS style code of images, Week 7 (7/6/2024)

Other than that, we have also learned to use the pseudo-class selector which are :focus, :hover and :nth-child(n). We can change the colour of text box while it is chosen by using :focus.

Fig 2.21 CSS code for text area background and hover colour, Week 7 (7/6/2024)

Fig 2.22 Outcome for text area background colour, Week 7 (7/6/2024)

Same goes to :hover, it will change the link colour while the mouse cursor hovering on it.

Fig 2.23 Outcome of hover colour, Week 7 (7/6/2024)

Furthermore, :nth-child(n) also able to specify the nth child element and able to style it.

Fig 2.24 Applying pseudo-class selector , Week 7 (7/6/2024)

Fig 2.25 Outcome after applying CSS selector, Week 7 (7/6/2024)

Week 9 Lecture Slides:

Fig 2.29 Week 9 Lecture Slides, Week 9 (18/6/2024)

Box Model-Layout in CSS:

Display Property

Block-level element

<div> is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can.

Inline element

<span> is the standard inline element. An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph.

Other Display Properties

• Inline-block
• Flex
• Grid

Flex Container:

display: flex: Establishes a flex container.

flex-direction: Defines the direction of the flex items (row, column).

justify-content: Aligns flex items along the main axis (start, end, center, space-between, space-around).

align-items: Aligns flex items along the cross axis (stretch, center, start, end).

Week 9 in class activity

This week we have created a new html file to practice on layout exercise. We have been shown by Mr Shamsul on how to apply the flex container.

Fig 2.30 Apply flex container #1, Week 9 (18/6/2024)

Fig 2.31 Apply flex container #2, Week 9 (18/6/2024)

Fig 2.32 Final outcome of web page, Week 9 (18/6/2024)

Week 10 in class activities:

This week we have learned to do a navigation bar that has hover effect and is following all the way while scrolliing the page.

Fig 2.33 Outcome of html code, Week 10 (25/6/24)

Here is the css code of the navigation bar:

Fig 2.34 CSS code, Week 10 (25/6/24)

Below is the layout after different columnns and rows are separated, each left and right will contain picture and content.

Fig 2.35 Outcome of html code, Week 10 (25/6/24)

Lastly, we have alson learn to do a contact form and footer.

Fig 2.36 Outcome of html code, Week 10 (25/6/24)

We have added extra CSS code to make the website compatible with different size screen. I have set the media screen to only screen and 996px.

Fig 2.37 CSS code, Week 10 (25/6/24)

---

Exercises

Exercise 1: Web Analysis

Task Requirements:

• We are required to choose TWO (2) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
• Write a brief report summarizing your findings and recommendations.

What To Have in The Analysis:

• Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
• Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. 
• Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
•  Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. 
• Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.

Deliverables:

Write a brief report summarizing in not less than 500 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings)

Final Outcome for Exercise 1: Web Analysis

Fig 2.1.1 Final Outcome for Exercise 1: Web Analysis, Week 2 (30/4/2024)

Exercise 2: Web Replication

Task Instructions

Our task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. 

• Morgan Stanley
• Ocean Health Index
• Bandit Running

Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. 

You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. 

Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page. 

• Free image: https://www.pexels.com/
• Google Fonts link: https://fonts.google.com/

Website Replication 1- Morgan Stanley

Here is the screengrab of Morgan Stanley website with fully loaded pictures and text.

Fig 2.2.1 Screengrab for Morgan Stanley Website, Week 3 (7/5/2024)

After that, I have imported the image into Adobe Illustrator and set it as template mode so that I could type and match the design and font on top of it. Also, I need to do kerning on text to match the text style of the website.

Fig 2.2.2 Kerning of text in Adobe Illustrator, Week 3 (10/5/2024)

Here is the outline view of the text and image after I have done the website replication which arranged all of them in place.

Fig 2.2.3 Text in Outline view, Week 3 (10/5/2024)

Below are the comparison of final outcome of website replication with the original screengrab image.

Fig 2.2.4 Comparison of final outcome with original image, Week 3 (10/5/2024)

Final Outcome for Website Replication 1- Morgan Stanley

Fig 2.2.5 Final Outcome for Website Replication 1- Morgan Stanley (JPEG), Week 3 (10/5/2024)

Fig 2.2.6 Final Outcome for Website Replication 1- Morgan Stanley (PDF), Week 3 (10/5/2024)

Website Replication 2- Ocean Health Index

Here is the screengrab of Ocean Health Index website with fully loaded pictures and text.

Fig 2.2.7 Screengrab for Ocean Health Index Website, Week 3 (7/5/2024)

In order to create the same frame as the example which is the upper corner of image is rounded while lower is sharp, I created a shape and apply clipping mask above the selected image.

Fig 2.2.8 Creating frame by applying clipping mask, Week 3 (7/5/2024)

Here is the outline view of the text and image after I have done the website replication which arranged all of them in place.

Fig 2.2.9 Text in Outline view, Week 3 (12/5/2024)

Below are the comparison of final outcome of website replication with the original screengrab image.

Fig 2.2.10 Comparison of final outcome with original image, Week 3 (12/5/2024)

Final Outcome for Website Replication 2- Ocean Health Index

Fig 2.2.11 Final Outcome for Website Replication 2- Ocean Health Index (JPEG), Week 3 (12/5/2024)

Fig 2.2.12 Final Outcome for Website Replication 2- Ocean Health Index (PDF), Week 3 (12/5/2024)

Exercise 3: Recipe Card

In this exercise, we will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE recipe from 101 cookbook.

Things we need to do:

1. Create an HTML file named "index.html."
2. Create a section that displays the following information:

• Recipe title
• Include necessary images for the page
• List of ingredients
• Step-by-step cooking instructions

3. Create an external CSS file named "style.css."

4. Apply CSS rules to style your recipe card.

5. Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.

6. Use your creativity to make the page look appealing and interesting.

In 101 cookbook, I have looked through a lot of recipe and finally I have chosen Thousand Layer Lasagna Recipe as it looks very delicious and mouth watering! I think it will attract people attention at first sight, also it says it is the best lasagna recipe so I wonder what make it so special also.

Fig 2.3.1 Recipe chosen from the website provided, Week 7 (6/6/2024)

After deciding my recipe, I have done a rough sketch of the recipe card which separate mainly into 3 parts which are introduction, ingredients and instructions.

Fig 2.3.2 Sketch for the recipe card layout, Week 7 (7/6/2024)

However, I have changed and improved on the layout afterward. I have added 2 more sections which one is the final outcome part and followed by a feedback form which suggestions or any reflections on this recipe can be collected. Also, there are minor changes of the layout of the photos. 

Fig 2.3.3 Sketch #2 for Recipe card, Week 7 (8/6/2024)

Other than that, I have chosen a colour palette as shown below as I wanted to match the colour theme with my recipe which are mainly brownish, reddish and light yellow. 

Fig 2.3.4 Colour Palette, Week 7 (8/6/2024)

I started by typing out all thee necessary html code. Here is the website layout of html code and image border css code only.

Fig 2.3.5 Layout othat only include image css style, Week 7 (9/6/2024)

After complete with all the html code, I proceed with css code starting on the first section of the recipe card which is the introduction. I adjusted the position of the title and also the image. Also, I have added text box for the paragraph.

Fig 2.3.6 Adding text box, Week 7 (9/6/2024)

Here is the font style in css code of my heading and the content:

Fig 2.3.7 CSS code for the fonts, Week 7 (9/6/2024)

In order to make the recipe card looked more organised, I have created text box for each section with different colour. Here is the css code for each container:

Fig 2.3.8 CSS code for container, Week 7 (9/6/2024)

Moreover, each image also has different css code as the position is different. I have adjusted the position by using the margin code and float.

Fig 2.3.9 CSS code for image, Week 7 (9/6/2024)

Here is the outcome of the second part of the recipe card after applying the css code which you can see the text box is added and the image is aligned.

Fig 2.3.10 Second section of recipe card, Week 7 (9/6/2024)

To adjust each element, I have created different class attribute for it and I have adjusted using the css code based on the preview in website.

Fig 2.3.11 CSS code for different class attribute, Week 7 (9/6/2024)

This is the layout of the final step of the recipe card. Another colour of text box is added and the image is positioned on the left.

Fig 2.3.13 Third section of recipe card, Week 7 (9/6/2024)

Lastly, here is the design of the feedback form that I have created and placed at the end of  the recipe card which aims to collect the feedbacks, suggestions or reflections from the people that Have tried out this recipe. This is to collecting opinions that may help to improve the recipe.

Fig 2.3.14 Feedback form at the end of the recipe, Week 7 (9/6/2024)

Final Outcome of HTML and CSS code:

Fig 2.3.15 HTML code for the final outcome of recipe card, Week 7 (9/6/2024)

Fig 2.3.16 CSS code for the final outcome of recipe card, Week 7 (9/6/2024)

Final Outcome for Exercise 3 Recipe Card:

After I finished with all the changes, I have uploaded the file to netfily. Click here to access my recipe card website.

Fig 2.3.17 Final Outcome for Recipe Card (JPEG), Week 7 (9/6/2024)

Fig 2.3.18 Final Outcome for Recipe Card (PDF), Week 7 (9/6/2024)

---

Feedback

Exercise 2- Web Replication

General Feedback:

We need to make sure all the images have been fully loaded out when taking the full size screenshot of the web page.

---

Reflection

These exercises are actually fun and interesting for me when I know nothing about interactive design. May be this is because I haven't learn about the coding things yet but until now it was still fun and enjoyable.

Before the first class of interactive design, I have no idea what interactive design teach about, only then I know it was about coding when mt friend told me and also when I attend the first class.

I hope that the following assignments are not so challenging as I completely blur and know nothing about coding. These exercises that only learn about the website layout are so friendly to me. I really have a lot of fun!