INTERACTIVE DESIGN/ EXERCISES

 

28.08.2023 - 22.09.2023 (Week 1 - Week 8)
TAN JIE YING / 0353959 / BACHELOR IN DESIGN OF CREATIVE MEDIA
INTERACTIVE DESIGN
EXERCISES

Instruction


Exercises 01: Web Analysis
In this exercise, we need to choose two websites from CSS Winner and analyze them.

After review, write a maximum of 500 words short report, which may include some screenshots for further understanding of each section in Google Slide.


Exercise 02: Web Replication
Our task is to replicate two existing websites from the three given websites.

  • Full-screen screenshots of the selected websites
  • Artboard size
  • Similar fonts
  • Image (no need to be exactly, can be just related)

Progress

Website 01 
https://oceanhealthindex.org/?authuser=0

Initially, I established an artboard to match the precise dimensions of the screenshot, measuring 1098px by 2642px. I incorporated the text, employing Univers LT Std, Arial, and Jost fonts. Simultaneously, I applied kerning adjustments to ensure the letter spacing seamlessly aligned with the original text. Lastly, I searched the images online and added them inside.



Figure 1.1 - 1.3 Progress screenshot

Outline

Figure 1.4 Outline

Website 02 
https://banditrunning.com/

I followed the same procedures as those carried out in Web 01.

Artboard: 1080px X 2853.36px

Fonts: Kenit, Univers LT Std, and Mukta.


Figure 1.5 - 1.7 Progress screenshot


Outline

Figure 1.8 Outline


Final Web Replication

Website 01 

Figure 2.1 Final (web 01)

Compare

Figure 2.2 Compare (web 01)

Website 02 

Figure 2.3 Final (web 02)
Compare

Figure 2.4 Compare (web 02)

Exercise 03: HTML and CSS Document Development

Progress

I have selected a cheesecake recipe. Following the instructions given, I created a folder "Ex3 Recipe Card". In this folder, it will include one folder "image" and two files saved from Adobe Dreamweaver 'index.html' and 'style.css'

Figure 3.1 Progress screenshot



Next, I put in the information (recipe title, images, list of ingredients, instructions, and tips)


Figure 3.2 Progress screenshot

Last, in the CSS tab I added font family, border, margin, padding,  font color, and background color.


Figure 3.3 Progress screenshot

Attempt 01
Figure 3.4 01 attempt

After getting feedback from Mr. Shamsul Hamimi I added the width (body), padding (ul&ol), font size, and changed the font color.

Final HTML and CSS Document Development


Figure 4.4 Final recipe card

FEEDBACK

Week 7
Overall, it looks good, and all of the content is included. But can still be improved by adding width in the body and padding in ol and ul.

REFLECTIONS

These three exercises played a pivotal role in expanding my comprehension of website structure and enhancing my design skills. Concurrently, I acquired proficiency in crafting and styling websites through HTML and CSS coding. My journey involved consistent practice and meticulous review, leading to a deepening familiarity with the diverse coding components of HTML and CSS.

Comments

Post a Comment

Popular posts from this blog

DIGITAL PHOTOGRAPHY AND IMAGING - PROJECT 2

Image
Week 4 - Week 9 TAN JIE YING / 0353959 / BACHELOR IN DESIGN OF CREATIVE MEDIA DIGITAL PHOTOGRAPHY AND IMAGING PROJECT 2 Project 2A: Double Exposure Part 1 (Follow Tutorial) Figure 1.1 Part 1 Final Outcome Part 2 ( Own Portrait Double Exposure ) Figure 1.1 Part 2 Final Outcome Project 02B - Poster Design Final Poster: Figure 3.1 Maybank Final Poster Title: "Before The Storm" Summary: The concept of this poster draws inspiration from the yin-yang philosophy. Two tigers are positioned on opposite sides, locked in a captivating gaze, poised for battle at a moment's notice. The letter 'M' represents the sun. It was also the judge of this war. M= Maybank. The poster's composition, setting, and colors draw inspiration from the rich tapestry of Greek mythology. Reflection I have explored more layers, colors, and filters in this project to create a d ouble exposure. I 'm a changeable person. I consciously selected elements like clouds, rain, waves, and a grey backg...
Read more

INFORMATION DESIGN/ FINAL PROJECT

Image
    03.02.2025 - 23.03.2025 (Week 1 - Week 7) TAN JIE YING / 0353959 / BACHELOR IN DESIGN OF CREATIVE MEDIA INFORMATION DESIGN FINAL PROJECT INSTRUCTIONS Final Project: Infographic Video Animation In this group project, we have to create a basic video animation based on our FLIP research topic. Using a structured design framework, we aimed to present information engagingly to a target audience, focusing on one of three objectives : Creating awareness Explaining a process Defining a concept. Progress Week 1 - 3 We have grouped a team of 8 people.  Rachel Yeo Rong Qing (Group Leader) Jia Wen Bing Ruthlene Chua Zhen Si Liu Zi Yu Tan Jie Ying (Me) Isabel Tan Xen Wern Nadhrah Binti Abdul Razak Myra Elida Binti Abd Azis We came up with several topics, such as recycling, cybersecurity, women's safety, traffic safety, dengue fever, and more. After voting and receiving feedback from our lecturer, we finalized our FLIP topic as "Cybersecurity" . After confirming the topic, each of...
Read more

INFORMATION DESIGN/ PROJECT 1 & 2

Image
  18.02.2025 - 25.02.2025 (Week 3 - Week 4) TAN JIE YING / 0353959 / BACHELOR IN DESIGN OF CREATIVE MEDIA INFORMATION DESIGN PROJECT 1 INSTRUCTIONS Lecture Note Week 3 Miller’s Law states that the average person can hold 7 ± 2 items in their short-term memory at a time. I often apply Miller’s Law when I encounter words I don't know how to spell or complex words by breaking them into chunks to read and remember. For example: Unbelievable ( un - believe - able ) Week 4 Week 5 Tips for constructive workflow : 1. Understand the Question Clearly define what you are designing and its purpose. 2. Construct a Strategic Plan Gather data, analyze pros and cons, study case studies, and understand the workflow before proceeding. 3. Fill in the Blank Keep track of your progress by organizing, grouping, and labeling your work. 4. Get Some Inspiration and Ideas Explore references and insights to improve your design. 5. Set a Perimeter While ideas are limitless, focus on identifying strengths...
Read more