Interactive Design / Exercises

 22/04/2024 - //2024 (Week 1 - Week 4)

Isabel Tan Xen Wern/ 0355602/ Bachelors of design in creative media/ Taylors University

Interactive Design GCD 60904

Exercises

JUMPLINKS

Lecture

Introductions

Exercise 1

Exercise 2

Exercise 3

LECTURES

Back to the TOP

INTRODUCTIONS

Figure 1.1
MIB Interactive (23/04/24)

<iframe allow="autoplay" height="480" src="https://drive.google.com/file/d/1y8YnLuxXhtUT567YdwLign5qKKmYOg08/preview" width="640"></iframe>

Exercise 1:

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.

Exercise 2:

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

Exercise 3:
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.


EXERCISE 1: WEB ANALYSIS

Awwwards.com 
Figure 1.2
title (23/04/24)


Figure 1.3
navi (23/04/24)

Figure 1.4
last section (23/04/24)


The goal of this website is to showcase the nominees and the winners for the title site of the day for April 27th. The title is very large in size and easily catches the viewers attention first, and below the moving words also easily catches the viewers attention which is also important information. The website very clearly shows the winners and neatly arranges each website with the links so that it is easy for the viewer to take a look at the winner websites.

On the computer there is a navigation tab that stays on your screen so if needed to change sections or go back up, you can easily press the home button or the section you are interested in and it would take you directly to that particular section of the website.

Even on a different device, in this case a phone, the navigation tab still remains but the design has been made smaller to accommodate the smaller device but it is still clear and easy for viewers to use and navigate their way around the website.

At the very end of the website, there is a navigation section that shows how you can contact them and other information related to the company site.

The website loads fine as the pictures al show up quick but on the phone when you scroll all the way to the bottom, it takes the website a few seconds to load every winner and their websites and makes it hard for viewers to reach the bottom to the contact section.


The Webby awards. com

The webby awards aims to show the 28th annual webby awards winners. When first entering the website, the title is seen and is quite clear on computer however on my phone, the design and color of the title makes it hard to see clearly with the background picture chosen. On the bottom of the title they went straight to the point by giving a button to meet the winners


Figure 1.5
instructions (23/04/24)

whenever your mouse lands on a photo, there will be a sign showing near your mouse to what i assume are instructions on what to do to move on forward.

Figure 1.6
instructions (23/04/24)

Figure 1.7
Navi (23/04/24)


On the very top of the site there is a 2 line bar for phone and this —- for computer.

However this site takes slightly longer for the photos to load than the rest of the information 


Figure 1.8
winner info (23/04/24)

Figure 1.9
winner info (23/04/24)

In most of the winners profiles, at the bottom there is a link to their information however how some, there isn’t which isn’t consistent. 

They did include a search bar for the winners incase viewers are searching specifically for a particular winner 

And at the bottom they showed very clearly each platform to contact them from and the link to their accounts

The color of this website is mostly black and white without including the photos included which isn’t very eye-catching in my opinion, the website appears very professional and formal.

This website doesn’t have too much information and sections however everything is more straight to the point and doesn’t add too much words that makes the viewers get bored. 

The main points of the article are stated clearly.


EXERCISE 2: WEB REPLICATION
Figure 2.1
screengrab of website(13/05/24)

Figure 2.2
Replication (14/05/24)

Figure 2.3
screengrab of website(13/05/24)

Figure 2.4
Replication (14/05/24)


EXERCISE 3: RECIPE CARD


















Comments

Post a Comment

Popular posts from this blog

Sonic design / Exercises

Image
21/04/2025 - 18/05/2025 (Week 01 - Week 04) Isabel Tan Xen Wern / 0355602 / Bachelor(hons) in creative media / Taylors University Sonic Design / VSA60204 Exercises JUMPLINK Lectures Introduction Exercise 01 Exercise 02 Exercise 03 Reflection LECTURES Week 01 (21/04/25): Nature of Sound A vibration of air molecules that stimulates our eardrums. Figure 1.1 Stages of sound (21/04/25) Production: source the sound. Propagation: the medium in which the sound travels. Perception: how the sound is perceived. Human Ear Figure 1.2 Human Ear (21/04/25) The outer ear: The external, visible portion of the ear and the ear ...
Read more

Major Project / Task 01 : Proposal Development

Image
  03/02/25 - 19/02/25 (Week 01 - Week 03) Isabel Tan Xen Wern / 0355602 /   Bachelor(hons) in creative media / Taylors University Major Project I / PRJ64904 Task 01: Proposal Development JUMP-LINK Introduction Progression Final Submission Reflection INTRODUCTION Figure 1.1 Instructions (05/02/25) Progression For starters, we split the parts equally within our group members. I was in charge of the art direction and the overall narrative of the storyline. Figure 1.2 Story Idea (10/02/25) This storyline was to raise awareness of the recent ongoing forest fire. It shows the fire from the pers...
Read more

Motion Graphic and Compositing / Project 02: Channel Bumper

Image
16/06/25 - 20/06/25 (Week 6 - Week 9) Isabel Tan Xen Wern / 0355602 / Bachelor(Hons) in Creative media / Taylors University Motion Graphics and Compositing / DST60704 Project 02: Channel Bumper JUMPLINK Introduction Progression Submission Reflection INTRODUCTION Figure 1.1 MIB (16/06/25) Progression  Chosen Brand: Zus Coffee Figure 1.2 Task 1: Moodboard and reference (20/05/25) For Project 03, we had the idea to promote the capybara promo drinks. Figure 1.3 Storyboard (17/06/25) Figure 1.4 Storyboard (17/06/25) I decided on a simple composition using vector design. Using a mix of images and designs i created myself. Originally, I wanted to make the entire thing using the pen tool and illustration but sir adviced me not to do so. Figure 1.5 Zus logo (18/06/25) I could not find a Zus logo cutout online, so I trie...
Read more