Interactive Design-EXERCISE 1&2

Interactive Design- Exercise 1

23/4/2023- 2023（week1-week ）

Wu Ziyang/0369288

Interactive Design / Bachelor of Design (Honours) in Creative Media

Exercise 1 - Web Analysis

---

TABLE OF CONTENTS 

1. Instructions

2. Lectures 

3. Exercises 

---

Instructions

---

Lectures

Week1

The teacher asked us to choose two websites we want to analyze among the given links.

• 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.

Week 3

Key Elements of a website:
Header
Body
Footer

 Elements that should be including in the website:

• CTA Button (Call to action) - encourages the users to take a certain action, ex. Signup button.
  
  
• Hero Section - The pre-scroll area on top of the webpage that presents a strong visual hook.
  
  
• Footer - lower (bottom) part of the webpage, usually provides useful links and data users may find interesting.
  
• Slider - interactive element to present different products, offers, etc.Breadcrumbs - navigation elements that helps users be aware of where they are on the website.
• Form - interactive element that allows users to send information to the server or system.
  
• Cards - layout elements that help arrange different content in an easy-use way together.
  
• Video - could be important as it keeps engagement in a website, it may also be found embedded in the background.
  
• Progress Indicator - element that helps users the current point they are in within the set of actions.
  
• Favicon - URL icon or bookmark icon, symbol that represents the brand.
  

Week 4

HTML elements

HTML code is made up of characters that live inside angled brackets <>, called HTML elements. Elements are usually made up of two tags: opening and closing tag.
Ex.
<element>Information</element>

The element tells the browser something about the information.

Open tag: <p>
Closing tag: </p> 

Enclosing words in the tags <b> and </b> makes characters appear bold.
Enclosing words in the tags <i> and </i> makes characters appear italic.

Ordered list starts with <ol>
Unordered list starts with <ul>

---

Exercise

Week 1

Website 1:https://www.csswinner.com/details/12wave-interactive-studio/17979

Purpose and Goals

Through the title and colorful colors in the center of the website, we know that the website is an interesting, small game website for children, and there are other three platform accounts of the website in the lower right corner, which can let users better understand the experience and pass on more information.

Visual design and Layout

The cover of this website is mainly warm orange, bringing us the visual effect is very happy, in addition, the designer also made a dynamic effect, a paper plane flying in the sky, behind a long white tail, and a cartoon lovely rocket flying, the lower left corner has been a cartoon crab in the activity, the lamb is playing games. When the user opens the sound of the website, there will be cheerful drum music, the user will be immersed in it, the layout is clear and neat, there will not be too much text, so that the user does not want to read the feeling, the text and images are just right.

Loading time

The loading speed is very fast, so that the user's experience is greatly improved

Functionality and usability

The website designed a small game, the astronaut lamb under the control of the mouse, jump on the steps, and the user needs to keep the lamb safe in the moving steps, can not fall down, jump more steps, the higher the score of the user. In this page, we can also see the scores and names of the top ten users.

Compatibility across devices and browsers

The site worked well on different devices, like phones and computers, but when I switched from Google Chrome to edge, the site struggled to load

285 words

Website 2: KidSuper World - CSS Winner

Purpose and Goals

Through the watercolor painting on the home page, and the title of the children's Super world next to it, users can clearly understand that this is a watercolor painting depicting an imaginary company that specializes in serving children.

Visual design and Layout

By clicking on the screen of the home page, the website will jump to another page, first a draft, then a hand that can be moved with the mouse will appear, the hand moves back and forth on the screen similar to watercolor paper, you will find that the screen is constantly filled with color with the movement of the hand, like a layer of fog enveloping the glass of the window, and the bed is this fantasy world. The role of the user is to push away this fog, through the clear glass, see a good, beautiful world.

Loading time

The site is a bit slow to load, especially at 99% to 100%, which is something that needs improvement

Functionality and usability

The function of this website is to give children, including children who grow up, a wonderful, virtual world, in this company, the scenery is beautiful, there is no crowded high-rise buildings, children can do anything they want to do in it, so that users have unlimited imagination space. When I opened this website, I was so surprised to see such a design form for the first time, which made my eyes light up, I loved every aspect of this website, and every time I loaded, I looked forward to entering such a wonderful world of fantasy.

Week 2

Mr. Shamsul Hamimi Ab. Rahman gave us some A4 paper and asked us to design a web page prototype for one of the four scenarios in class.

So my group unanimously chose the 4th scenario.

Our group used Haidilao ↓ Hotpot Restaurant as a visual reference.

Then the following is the prototype ↓ draft drawn by our group.

Then our group showed the completed prototype draft to other groups for an interactive demonstration.
Then that group gave our group a generally good evaluation, but some details need to be updated, such as the large map location display and order history, etc.

Week3

Exercise 2: Website Copy
Our assignment this week is to copy two (2) existing homepages of the website given in the link below to better understand its structure. Choose any two from the given links. Follow the dimensions of your existing website in terms of width and height.

Free image:
https://www.pexels.com/

Google Fonts link:
https://fonts.google.com/

Morgan Stanley | Global Leader in Financial Services
https://www.morganstanley.com/

Bandit Running
https://banditrunning.com/

Ocean Health Index
https://www.oceanhealthindex.org/?authus

Website copy 1:https://www.oceanhealthindex.org/?authuser=0

Website copy 2: https://banditrunning.com/

Exercise 3

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

html

css

Website link:https://comfy-druid-4aa559.netlify.app/

This stage of programming is actually a little difficult for me, because there is more <div> than the previous programming element, I in order to prevent different <div> cross-fusion of a lot of effort. At the same time, you also need to check the performance of your code on different sizes of screens, which is very troublesome to modify at this stage.

When I first started coding, I became very frustrated because there were often areas where I got mixed up.But after I became familiar with how to operate it, I also felt the joy of editing code. I felt a great sense of accomplishment when I completed this assignment.

Reflection
At this stage of study, I came into contact with programming for the first time. At first, I couldn't use the <div> element well. It often happened that each <div> could not correspond to </div>, which made my programming difficult. very confusing.But after I solved this problem, the subsequent programming went very smoothly, which also made me interested in programming.