Interactive Design: Exercise

-

Simon Ko Jing Liang
0364359
Bachlor of Design (Honours) in Creative Media
Interactive Design Exercise

INSTRUCTION




Exercise

We gonna to analysis the website by given.

Choose TWO (2) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.

Below is my final web analysis.



Web Analysis Google Slides-PDF


Week 2

We learnt about Usability: Designing Products for User Satisfaction.
Key Principle of Usability
  1. Consistency
  2. Simplicity
  3. Visibility
  4. Feedback
  5. Error Prevention

After finished the lecture, the class divided into groups and started our class activity. Our group is to redesign a school's online learning management system.

The individual exercise is to replicate the website given by the link.

Progress in AI


Fig 1 
Web Replicate 1



Fig 2
Web Replicate 2


Outline of web replicate 1 & 2


Fig 3
For the images, I use PINTEREST to find them. The font style is FUTURA STD and some icons found from flaticon.com. The big change is the layout, like the section before inbox section, I put the image in the middle and the other things beside it. Last, the main two colors I used are red and green.


Fig 4
The images also searched from PINTEREST and the font style is Abril Fatface and adobe calson pro. The overall colors I used are dark blue and white ( follow the original). The other hand, the news section, I changed the shape of images from rectangle to circle.

Final 


Fig 5


Fig 6





Fig 7
WEB REPLICATE 1



Fig 8
WEB REPLICATE 2


Design a recipe card

After watched the recorded lecture, I started to design a recipe card. I also went to do some research before starting it.

Below is the coding section:


|Fig 9
I started from the basic things that must have such as head, body and content.

Fig 10
After that I added the CSS inside and the style. Anyway, just follow the instructions given. I changed recipe name's color from black to pink. For the DESCRIPTION I make the words bold and italic. Also adjusted the font size of recipe name and description.

Fig 11
To make it like a card, I made the card below has shadow and the website background color from white to light green so can easily to know the different.



Final 


This is the LINK to the web page.


Fig 12
Recipe Card- Avocado Salad


Fig 13
Recipe Card- Avocado Salad (PDF)