Interactive Design

18.9.2023 - 1.10.2023 (Week 1 - Ending Week )
Tai Tong En / 0363164
Interactive Design / BDCM
Exercises

INSTRUCTIONS

Week 1 | Exercise 1

Choose TWO (2) websites from the link given. Review the website 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, load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:

Write a brief report summarizing in not more 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)

PROCESS

First I browse the website that the lecturer provided and choose any two websites I am interested in.

Then I used the Google slide and chose a template to finish this exercise.

FINAL OUTCOME

Week 2 | Exercise 2

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

I have chosen the "Ocean Health Index" and "Morgan Stanley".

Ocean Health Index

I drew the logo again by myself using the pen tool in AI.

I have changed all the fonts of the words that I think will be interesting and attractive.

I also changed the background image that I like and suitable for the website I chose.

Pictures that I have changed.

Morgan Stanley

I also changed all the fonts of the words in AI.

I used the rectangle tool and pen tool to complete these sections.

Pictures I have changed.

FINAL OUTCOME

Week 4 | In-class Exercise

Create a Personal Profile Webpage

Description: In this task, you will create a personal profile webpage that includes basic information about yourselves. This exercise will require them to apply the HTML skills they've learned.

Instructions:
HTML Structure:

Begin by creating a new HTML file and setting up the basic structure with <!DOCTYPE html>, <html>, <head>, and <body> elements.

Page Title:

Inside the <head> element, add a <title> element with a title for your webpage, like "My Profile."

Header Section:

In the <body> section, create a header section using the <header> element.
Add a main heading (<h1>) with your name.
Optionally, include a subheading (<h2>) with a brief tagline or description.

About Me:

Create a section for information about yourself.
Include a <h3> heading saying "About Me."
Add a couple of paragraphs (<p>) with a brief introduction of yourself.

My Interests:

Create another section to list your interests or hobbies.
Use an appropriate heading, such as <h3>: "My Interests."
Add an introduction for this section using <p>.
Create an unordered list (<ul>) and list some (more than 3) of your interests using <li> elements.

My Photo:

Insert an image of yourself using the <img> tag.
Specify the image source (src attribute) and provide a brief description using the alt attribute.

Contact Information:

Create a contact section with an appropriate heading.
Include your email address and optionally other contact details like your social media profiles or phone number using the list item.

Testing and Validation:

Test your webpage by opening it in a web browser to ensure everything displays correctly.
Use online HTML validators to check for any syntax errors and fix them if needed.

Publish Your Webpage:

If possible, publish your webpage online using a free web hosting service or GitHub Pages.

In the class, the lecturer taught me how to use the notepad key in the code to create a website.

First, we need to create a folder named index. In the index folder, we need to create more folders that save the images and the font that I want.

PROCESS

I chose an image to use in this exercise-My Profile.

I can change text-transform, text-align, color, text decoration, font family, word-spacing, letter-spacing to make my website more interesting.

After I have done all the things I save my work and go to Netlify to place my website link and change the link name.

This is the code that I follow the lecturer key in Notepad.

While I follow the lecturer key in all the code then I save all my works in the index folder. After this, I can just go to the index folder and click it. It will be a website.

FINAL OUTCOME

Link: https://taitongen-exercise.netlify.app/

Week 6 | Exercise 3

In this exercise, you 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.

Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions
Create an external CSS file named "style.css."
Apply CSS rules to style your recipe card.
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.

First, I keyed in the code in Notepad and named the file styles.

Then I use DW and key in the code about my recipe.

The information about my recipe can be found on the website: Swedish Meatballs - Ahead of Thyme

I just type my food ingredients in DW.

Then I put the image of my recipe in it.

FINAL OUTCOME

Link: taitongen-exercise3.netlify.app

Week 7 | In-Class Exercise

Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.

Index HTML Code