Interactive Design - Exercise

28/8/2023-//2023 Week 1 - Week 4
Ng Jia Ern 0363033
Bachelor of Design (Honours) in Creative Media
Interactive Design / Exercise

EXERCISE 1: Websites Analysis

WEEK 1

We are to choose TWO websites from CSS Winner and analyse the chosen websites from all aspects. We have to identify the strengths and weaknesses of the websites and consider the impacts on user experience. We should write a brief report to summarize our findings and recommendations.

Report requirements:

• Format: Google Docs / Google Slides
• Word count: not more than 500 words for TWO websites
• May include screenshots of the webpage as support evidence to explain

Aspects to be analysed:

• Purpose and goals
• Visual design and layout - use of colour, typography, imagery
• Functionality and usability - navigation, forms, interactive elements
• Quality and relevance of content - accuracy, clarity, organisation
• Website performance - loading times, responsiveness, compatibility with different devices and browsers

Web Analysis Report:

EXERCISE 2: Websites Replication

WEEK 2

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.
• Follow the dimensions of the existing website from the width and height.
• This exercise will help us develop our design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices.
• We can use any image from stock image or free stock icon.
• The image that we will be using does not have to be an exact image from the original website. We may replace it with a similar image.
• Focus on the layout, type style, and colour style.
• To find similar typefaces/fonts, we can download fonts from Google Fonts.
• We 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:
1. https://www.morganstanley.com/?authuser=2
2. https://banditrunning.com/?authuser=2
3. https://www.oceanhealthindex.org/?authuser=2

Web Replication 1: 
BRANDIT

replication process in Adobe Illustrator

Outline view of Web Replication 1

Original vs Replicated

Analysis of colour and type style for bandit website

Web Replication 2:
OCEAN HEALTH INDEX

process in Adobe Illustrator

Outline view of Web Replication 2

Original vs Replicated

Analysis of colour and type style for Ocean Health Index website

Exercise 3 - Creating a Recipe Card

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.

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

1. Content

I prepared content that I would like to include on the website

This is the recipe I usually use.

2. Sketch

First, I sketched my idea on paper

Then I digitalised my sketch in Figma.

2. Html Code

https://exercise-3-ng-jia-ern.netlify.app/

REFLECTION

I think this exercise is quite fun but takes a very long time. I realize that there are many details that didn't expect such as the logo, social media logo, some icons, and arrows that need to be drawn by Pentool.