Interactive Design Exercises

-

 

23/Apr/2024

ZHANG HANYUAN/0363727/Bachelor of Design (Honors) in Creative Media

Interactive Design /Taylors University

Task Exercise 1-4

INSTRUCTIONS


LECTURES
WEEK 1
During the first week we were given a brief overview of the module and the assignments we would be given throughout the semester. Our first assignment was to carry out a web analysis of two websites based on different asp's.Mr Shamsul gave us a brief introduction to usability in design, highlighting that a core aspect of design lies in its discoverability and how well they adapt to the needs of the user and the environment.


EXERCISES

Exercise 1 - Web Analysis

Requirements:

1. A brief report in Google Slides
2. Not more than 500 words for 2 analysis
3. Include a screen capture of each section or page of the website
4. Format should be clear (heading/subheadings)

What To Have in The Analysis:

1. Purpose and goals of the website - communication with the user
2. Visual design and layout of the website, including its use of color, typography, and imagery.
3. Functionality and usability of the website, including its navigation, forms, and interactive elements.
4. Quality and relevance of the website's content, including its accuracy, clarity, and organization.
5. Website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.




Exercise 2






 HTML and CSS  Class Exercise 





Exercise 3 - Creating a Recipe Card


In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. Choose ONE Recipe from the link below

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.

Use your creativity to make the page look appealing and interesting








https://zhanghanyuanexercise3.netlify.app/





































Comments

Post a Comment

Popular posts from this blog

Advanced Interactive Design - Task 1: Thematic Interactive Website Proposal

-
Image
22/4/2025 - 13/5/2025- WEEK1-WEEK4 ZHANG HANYUAN / 0363727 Information Design / Bachelor of Design (Hons) in Creative Media Task 1: Thematic Interactive Website Proposal List LECTURES INSTRUCTIONS FEEDBACK REFLECTION LECTURES ： Week 2: Adobe Animate (Exercise 1) In our Week 2 lesson, we learned how to draw with Adobe Animate. We were trained on how to utilize several tools, including the form tool, selection tool, and paint bucket tool. After the tutorial, Mr. Shamsul asked us to draw a boat for practice purposes. Week 3: Adobe Animate (Exercise 2) Week 4: Adobe Animate (Exercise 3) INSTRUCTIONS: Task 1  Description Thematic Interactive Website Proposal for Brand Engagement. A thematic interactive website is a website that focuses on a specific theme or concept with the aim of incorporating interactive elements to interact with users. Most such websites utilize multimedia such as videos, animations, interactive graphics displayed on the page, or other clickable elements which ...
Read more

Advanced Typography/Task 1

-
Image
  25/Sep/2024- 11/Oct/2024 (week 1-week 4) ZHANG HANYUAN/0363727/Bachelor of Design (Honors) in Creative Media Advanced Typography/Taylors University Task 1: Exercise - Typesetting Systems and Finding Types LECTURES SUMMARY: WEEK 1  LECTURES : In week 1, Vinod introduced us to the module requirements and semester assignments! During this week, we had to complete eight printing systems Axial Radial Extended Random Grid Modular Transition Bilateral 1-Axial System All elements are aligned to the left or right of a single axis, which can be curved fig .1,1  Axial System 2-Radial System All elements extend from a single focus and can have multiple focuses. fig .1.2 Radial System 3-Dilatational System All elements expand in a circular manner from a central point, and with a layered approach  can use multiple circles with messages fig.1.3 Dilatational System 4-Random System Elements don't have a specific pattern or relationship, but there is a method in the chaos of cr...
Read more

Information Design - PROJECT 1

-
Image
Information Design -  Project 1 02.17.2025 - 03.03.2025 / Week 3 - Week 5 ZHANG HANYUAN / 0363727 Information Design / Bachelor of Design (Hons) in Creative Media Project 1 -Part 1&2 LIST Instructions Lectures Part 1: Infographic poster Part 2: Minimal animated infographic Feedback Reflection INSTRUCTIONS Lectures week 3 week 4 week 5 lecture link PART 1:--Infographic poster Require： Choose 1 infographic poster reference from Internet (Please consult before proceed) Redesign the poster into A4 size. Sketch the idea and process Redesign and simplify the poster based on visual hierarchy & typography Simplify the poster's design based on color, shape & pattern Attach your final poster on E-Portfolio with explanation and reflective writing Inspiration &  Concept (initial ideas and drafts) I found a poster reference on the Internet (Pinterst) and made a preliminary idea proposal. After showing it to Mr. Fauzi, he said that this one had been refined and suggested tha...
Read more