Interactive Design Exercise

April 02, 2023

Interactive Design Exercise

Week 1- Week 4
Justin Averill Prasetya / 0355048
GCD 60904 / BDCM / The Design School
Exercise

LECTURES:

Week 1: In 1st week we need to present our analysis of the good and bad websites, after researching we come up with 6 websites 3 good and 3 bad according to our analysis about the website

Week 2: we making a prototype of a design with group

Week 3: Colour lectures

Week 4: -

INSTRUCTIONS

Exercise 1/ Week 1

Web analysts

We present our analysis of 2 websites provided by mr sam from the placement to the color What To Have in The Analysis According to Mr Sam:

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.

here's my analysis

Fig 2.1.1

Exercise 2 / Week 2

Web replication

In order to better understand how existing websites are structured, your objective is to duplicate TWO of them. These websites are provided in the link below. Select two from the provided link.

From the width and height, match the dimensions of the current webpage. You may learn more about web design best practises as well as how to improve your design abilities using programmes like Photoshop or Adobe Illustrator by completing this activity. Any stock picture or free stock icon may be used.

It is not necessary for the image you use to be an exact copy. You might use a comparable picture in its stead. Pay attention to the design, typeface, and colour scheme. You may download fonts from Google Fonts to discover comparable typefaces or fonts.

First step of replicating website was knowing what's the size and details in the web, for the first web i use luno.com and the second one was ocean health index

by using F12 or INSPECT you can open the inspect elements sections in chrome

Fig 2.2.1

Fig 2.2.2

you can screen shoot the entire page with command shift and p and search for full screen screenshot

Fig 2.2.3

I use a different size and not 1441 x 1440

By using inspect elements you can see all of the code and elements that used in the web

I took my picture from inspect elements -> application you can see all the elements from the font and image

Fig 2.2.4

Luno:

Fig 2.3.1

Ocean Health

Fig 2.3.2

Some picture that i took from web

and for the font i use that i found on the website

Fracktif regular and semobold (Luno)
Monserat regular, bold, book and semobold
Helvetica
Arial (Ocean health index)

For the image that there aren't in the applications i copy the html code and inspect in the html inspector and save it as pdf and convert it to jpeg such as the logo and another tiny object