Interactive Design

-

 (Week 1 - Week 8)

Harpreet Singh A/L Harcharan Singh (0352668)
Interactive Design
Exercise


28/03/2022

INSTRUCTIONS

-  EXERCISE WEEK 1

LECTURE NOTES


Week 1
In our first ever lesson, we were introduced to our lecturer Mr Shamsul. Mr Shamsul briefed us on what are we to expect for this module and what our future assignments would be like. After completing the small briefing, He went on with topic for this weeks lecture which is What is a Website?. 



Instructions


Task 1

With the lecture that Mr Shamsul gave, he gave us a task to complete. In this task, we are required to look for 3 good websites and 3 bad websites and explain why they are good or bad with the use of the websites below:


My work




Week 2 - 4. April 2022 – 8. April 2022

week 2 we learn about WEB DESIGN AND NEW MEDIA  

  • web standards
  • how the web works
  • structure of a web page
  • how pages uses structures
  • HTML describes the structure of the pages
  • a closer look at tags and elements
  • links


EXERCISE


Week 2 | Exercise 1 Brief:

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

















After we have completed the task, we are required to upload the web document to a web hosting (Netlify).

Exercise one :




Week 3 | Exercise 

Adding images in html
  • img tag with source attribute: <img src="img_flowers.jpg">
  • alt attribute describes the image <img src="img_flowers.jpg" alt="Flowers in Denmark">
  • width and height format can be added to define size: <img src="img_flowers.jpg" alt="Flowers in Denmark" width="500" height="350">
  • Three common image formats: jpg, png, gif


Week 4 | Exercise  

Today we got started with CSS. We learned how to style elements on a website with it. Check out my first steps using HTML and CSS together in Task 03.


Week 5 | Exercise  

Work on css work and getting use to the use of css



Week 7 | Exercise 


Week 7 we learn to use <div> and create a layout as shown the image below



Instructions



Exercise 1 : The good the bad and the dirty

Make a List of three good and three bad websites found on awwwards.com or webbyawards.com



Exercise 2 : HTML SITE / style with css


Use HTML to create a web document about a given triathlon article.
and style with css







Exercise 3 : css layout







Week 8 | Project 1 & 2 Brief

Landing Page Design

A landing page is a distinct page on your website that's built for one single conversion objective. A landing page should be designed, written and developed with one business goal in mind. You are required to create a static landing page of a microsite from any topic of your choice. Please do your own research about microsite.

Please indicate the topic of your choice by this week in the comment section and start to do the wireframe/sketches of the landing page. You need to show the sketches by next week during class. A minimum of 5 sketches are required.

We will extend the project for Final Project as we do not have enough time.

5 sketches done:













sketch chosen '



Week 9 | Announcement


Project 1 (static prototype)





week10-week11

Project 2 - Working Landing Page






Comments

Post a Comment

Popular posts from this blog

Information Design

-
Image
  Start from 22.4.2025 Harpreet Singh / 0352668 Information Design / Bachelor of Design (Hons) in Creative Media  Week 01 – Week 05 Exercise 1 & 2 MIB Week 1/ Introduction &  Type of Infographics We began the semester with an online lecture in the first week with briefing ,  Mr. Fauzi introduced the MIB for this module. They also outlined the initial exercise, instructing us to bring materials to class for the upcoming tutorial. Mr Fauzi explained to us about  types of infographics which included: Week 2 / Exercise 1: Quantifiable Information (10%) – Quantify raw data and visualize information as a photograph Quantify raw data and visualize information as a photograph A is a visual representation of numerical data that allows for easy interpretation and analysis.  Instruction: Gather a set of objects and separate it into category such as color, shape, pattern, and other quantifiable factor. Example: 1. Box of Lego 2. Jar of button 3. Jar of mar...
Read more
-
Image
  Infomation Design final project   30/06/2025--26/07/2025(Week 11--Week 14) Harpreet Singh / 0352668 Information Design / Bachelor of Design (Hons) in Creative Media  Final Project INSTRUCTIONS ESCRIPTION:  Using a processed design framework, you will now produce an infographic report to present the given information to a ‘target audience’ with the purpose of: 1. Creating awareness (such as Global Warming, Recycle, etc.) 2. Explaining a process (such as "how to" video) 3. Defining a concept (such as "What is Fast Fashion", "What is Color Wheel", etc.) Any time based media and software using photography, vector imagery. Design Considerations: ● Organization Principles – LATCH and Content Organization ● Aesthetic Principles – Animation principles ● Cognitive Principles – Principles of visualization Output Expectation: The presentation must be deliberated on, consider each assessment rubric of sorts to your final outcome: ● Show causality ● Multivariate ...
Read more

Collaborative Design Practice Task 3

-
Image
(Week 7 -Week 10) Harpreet/0352668 Collaborative Design Practice/ Bachelor of Design in Creative Media Task 3  Produce rapid prototypes, test and  iterative designs After all our artwork we have done in task 1 and task 2 and get feedbacks. Task 3 is to finalizze it and create a better outlook , below is all the work that our team has done and the chnages. What we plan to do Brand Guideline We designed the overall look for KitaKeto's brand. From logo to colour palettes, we make them fit to the vision of the brand. We also have prepared a guideline on how to use certain assets for future references. Packaging Design With an effort to keep things sustainable and safer for the planet, we opted for an eco-friendly packaging and design. Social Media Content Social media is an easy way to promote and keep the audience engaged to the brand. With Instagram as the main platform, we designed posts, stories and reels to be as engaging as possible. Promotional Content We designed multiple ...
Read more