Interactive Design - Exercises

on

Week 1 - Week 7
Jordan Matthew Susanto (0352661) BDCM
Interactive Design
Exercises
Instruction

Fig 1 Instruction

Exercises

Exercise 1

Brief:
You are required to create a web document based on the content given. Please follow exactly the format as in the document (Heading, Sub-Heading, Paragraph, list, including links). For a start, you need to create the document using Text Edit or Note Pad as shown in class. Kindly add a related image on top of the document. Remember to name the file as index.html and save the file in a folder Exercise One.

After you have completed the task, you are required to upload the web document to a web hosting (Netlify) and submit the link in Google Classroom. Please rename the netlify file name to exercise1_yourname from the change site name setting. Follow the Youtube video tutorial provided.

Content:

Fig 2.1 Content

Exercise 1 - Final Outcome

Fig 2.2 Exercise 1 - JPG


Exercise 2

Brief:
You are required to create a single HTML page that contains the document and images from the link provided. In each main section, you need to include an id attribute that will be later used as an anchor to be linked from the navigation. You are also required to change the font accordingly and format the text and link as shown in class. Use the appropriate CSS style to style the page. Kindly adjust the width of the page so the content doesn't fill up the entire screen. Upload the completed web page to Netlify. Make sure the name of the file is correct (index.html).

Content:

Fig 3.1 Content

Exercise 2 - Final Outcome



fig 3.2 Exercise 2 - JPG



Exercise 3

Brief:
We choose one website from the choices given and recreate the design of the entire main/landing page. This task is designed to help you see the nuances of website design and gain a better understanding of the layout. All websites listed are current web design trends. You may use images from any stock image site in place of the original images.
  • https://www.legalsuper.com.au/
  • https://www.jadesheng.studio/
  • https://www.statecreative.com/
  • https://www.worldwildlife.org/
I choose WWF

Exercise 3 - Final Outcome

fig 3.2 Exercise 3 - JPG


Exercise 4

Brief:
Your task is to create an interesting and clear layout based on the previous class. Use the content given in the link to complete the task. Your layout must have rows, columns, and a clear navigation system. Use all the given images to suit the layout. You could also look for related images if necessary.

Content:

fig 4.1 Excersice 4 - JPG

Exercise 4 - Final Outcome

Fig 4.2 Excersise 4 - JPG

Exercise 4 - The Ultimate Web Design Workspace for Photoshop

Reflection

Experiences
In this exercise we learned about all the basic of html and css. We learn from basic to more comlex think. Maybe, this will benefits me in the future

Observation
I observe that it's really important to formatting html and css file from this exercise. I also learn how a good web design should look like.

Findings
We learn about basic coding for css and html. I'm very interesting on this topic

Comments

Post a Comment