Interactive Design (Exercises)

22.4.2024 - 28.7.2024 / Week 1- Week 14
Aliah Farhana Binti Mohd Fauzi / 0357957
Interactive Design / Bachelor of Design (Honours) in Creative Media

Exercise

INSTRUCTIONS

LECTURES

EXERCISE

Task 1 : Web Analysis

We were given three websites to analyse and had to choose two websites to write a brief report about it.

First website report | CSS Winner

This was the first thing that was popped up when I opened the link for this website. Without any title and explanation I could not know the purpose of this website right away. Therefore, the purpose and goals for this site was not clearly stated.

I went to both 'Home and Profile' button in order to find the goals and purpose for this website but still couldn't find it.

But as I scrolled down, the purpose was stated down there all along. This format was a bit disappointed because of the unclear motif to the user.

Thus as stated there the purpose for this website was actually to showcase the uniqueness of global platform awarding and showcasing the best websites and promoting innovate web designers, developers and agencies.

The effectiveness for communication to the user for this website is excellent, upon seeing this website with so much information but with the help of the 'Category, Tag and colour' shortcut button has make the user to find things easily. But maybe they can still improve more on the shortcut button as I thought the buttons can select one per each buttons but it's actually the other way. We can only select one findings on one button at one time.

Despite all that, this website has offered to help the users to publish a website in their website, but in order to do that the user has to make a payment $9 USD equally to RM43 per submission.

The design and layout for the 'Home' button is neat but is too simple despite being a global website. The choices for the font is fine, is easy to read but I'm afraid there's a minor problem to the choices of font's colour. Instead of making it grey which is a really light colour and the background of the website also in white there's high chances that the users might missed out some of the informations and needs to reread which make it hassle.

The cover page of each of the websites is really interesting and colourful. The efficiency of the website also is very fast there's no lagging anywhere and all the buttons also are clickable and accessible.

Compilation of the website looks in a mobile phone, I would say this website is way more easier to access in laptop or pc compared to mobile phone. But it's not like there's any major problem with this website when accessing through mobile phone, everything works the same like in the laptop, its just my preference I like it better accessing this website in laptop cause the readability is easier compared to the mobile phone.

Second website report | Website Awards

As soon as I opened this website, it directed me to this page which is it has a good formative from the fonts, layout, choices of colours and the aesthetic itself is really eye catching. So far the first impressions of this website is really nice. The aesthetics does look like some professional website.

But as I scrolled down and looking for the purpose of this website is not really there, even though you maybe will get the slight ideas just by looking at the front page but it's not really nice formative.

Like the previous website, I have to scroll down and clicked on the 'About Us' button then I can see the purpose and goals for this website.

This website is a meeting point for the digital design professionals from across the globe to find an inspirations, impart knowledges and experiences, connects, and share constructive, respectful critique.

Too bad the efficiency for this website is really bad, it took a while for the image to load.

What I meant by I'm a bit disappointed with the previous website because of the choices for findings is very limited only one finding at one time. But this website has makes it things possible. Maybe it would be better if the efficiency of loading is fast so there's no lagging like the screenshots I have took.

On the left side is the payment for the website submission which is quite pricey compared to the previous website price. While on the right side this website has provide a membership plan with three different categories that we can choose.

This website also has provides the user with video tutorials but to access we have to become the member.

The cover page that was used is really colourful and interesting as well. The usage of fonts is a good one and is easy to read compared to the previous website. The layout as well is neat and clean.

Compilation of this website's while in mobile phone. Everything is almost the same thing there's nothing really different from when I viewed this website in laptop, but something has bothered me as I scrolled down and wanting to go to the 'About us' button which was located at the very end of the website it kept on loads the next page without me clicking on the next page button.

Therefore, it's going to be a little hard for the users to access this website in the mobile phone. And as much as problems that I got when I accessed this website in laptop, in mobile phone as well got the same problem which the website is really lagging and it takes sometimes to load.

Post review | strengths and weakness for both websites

First website : CSS Winner

Strenghts

Not lagging, Efficiency of the loading is very fast.
Subscription is cheaper and affordable
Good layout
Interesting cover pages
Mobile phone friendly
User friendly
A lot of information

Weakness

Too simple and basic
Wrong choices of the fonts colour

Second website : Websites awards

Strengths

Very interesting layout and aesthetics
A lot of information
Mobile phone friendly
User friendly
Fonts is readable

Weakness

Website is lagging
Subscription is too expensive

Exercise 2 - Web Replicate

In this task we have to replicate two websites that was given along with instructions in the google classroom. This task purpose is for us to understand the structure of the website. Thus, we also can choose to work on this exercise either through Photoshop or Illustrator, and I decided to use Illustrator for this task.

The websites:

The Process

1- Morgan Stanley

O.G website

Copied version

Close - up of the replicate website

2- Ocean Health Index

O.G website

Copied version

Close - up of the replicate website

Exercise 3 - The Web and Language

Warm -up

Process in TextEdit

https://aliah4zi.netlify.app/

Exercise 3 - Creating a Recipe Card

In this task we were asked to copy a recipe card in html and css format in Dreamweaver. We were told to choose any recipe in the provided link (this) or any other recipe that we want.

Thus I chose this recipe to be part of my exercise here

Process

Here are some of the screenshot that I've took during the process.

First look when I've finished copied every information from the recipe book