Interactive Design / Exercises

24/2/2024 - / Week 1 -
Gloria Khaw Ping Sim / 0359142
Interactive Design / Bachelor of Design (Hons) in Creative Media
Exercises

EXERCISES

Exercise 1
We are to choose 2 websites from the links given in Google Classroom. We then have to review the website that we have 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. Write a brief report summarizing your findings and recommendations.

1st website : https://madeinhaus.com/

I was drawn to this site because of the colours and fonts. It looks fun to read through and really helps with my (extremely short) attention span. This website is for an agency named Haus to showcase their works and services for potential clients.

Visual Design and Layout

There is a lot to say about the visual design for this website. First of all, the text on the home screen changes every 8 seconds when idle or changes every time you click on it. It changes between 'born makers', 'born curious', 'born sunny' and 'born quirky'. With every text change, the background colour changes too (yellow, orange, green and purple). When moving your mouse, there will be a set of images following the cursor depending on which text it is at. For example, when its at 'Born Sunny', the set of images consists of a rainbow flag, a distorted smiley face, a bowl of oranges, etc.

Fig 1.1. set of images that show up when hovering (born sunny version)

Other than that, every letter has a different font with some animated elements too (not all the letters have animated elements! Only selected ones.). Like with 'born curious', both O's, U and S are animated. I find it really fun to look at and its really different from the usual stationary texts other websites have. When hovering over an image, it will provide a fun tagline for it; for example, when hovering over their Netflix partnership, it will say 'OUR LATEST BINGE'.

Functionality and Usability

With this site, you can scroll down the home page and click on which category interests you, or you could just click it from the header. Their categories consists of work, about, partnerships, careers and contact. For the sake of this analysis, we will focus on the 'about' category (the rest all work in similar ways). The sub categories are clearly stated and is easy to navigate. For example, they have Capabilities and Services as topics and under services, they have 4 sub topics, all with examples of their work under it. All in all, it does not require much thought to use this site and is fairly simple, as long as you know how websites work.

Quality and Relevance to content

For this website in particular, they have a lot of content to unpack. I read through most of it and I can say that it definitely relates to the website's main purpose, which is showcasing their works, and they even provide context and the purpose of their works in great detail. Like I stated before, the contents have all been thoroughly organized.

Website's Performance

When inspected, the website's load time is 11 seconds for the whole home page. The total time went up every time the home screen text changed, so its hard to tell the exact timing. As for the responsiveness, I used https://ui.dev/amiresponsive?url=https://madeinhaus.com/ to do a base-line check.

Fig 1.2. responsiveness check

It helps to show how responsive the website would be in 4 different types of devices. When scrolling on that website, the layout slightly changes with the phone and iPad. On laptop, on the home screen, you can scroll through their new projects without having to press any buttons. On mobile devices however, you would have to use a set of arrows or swipe left or right in order to view said projects. The header of categories are also gone in the mobile devices but they have just been minimized into the 'menu' button at the top right. I have been using Chrome and Microsoft Edge throughout this analysis and for some reason, they both seem to differ slightly from each other. Microsoft Edge shares a few features that the mobile devices do (such as the arrow thing stated before). Overall, that does not really change anything major and I can confidently say that it is compatible and responds well with the many devices.

(640 words)

I accidentally analyzed the wrong thing and I figured I'd leave them in so :

1st website : https://www.csswinner.com/winners

The first thing I took note of when entering that website was that it was pleasant to look at and it looks fairly simple to navigate. This website is about displaying impressive websites everyday (hence, 'site of the day (SOTD)') and rating them based on a bunch of different categories. Not only do they have site of the days, they also have site of the month (SOTM) where they show the highest rated site of that particular month. When hovering over a thumbnail of a site, it'll state what day it won :

Fig 1.1. screenshot from csswinners.com

Visual Design and Layout

The elements in this website are not cluttered and are very minimal, making it easy to navigate. There are not many graphical elements button-wise (as they are all straight to the point texts) but that just makes it easier to understand. The website has a main colour scheme which is a coral-like colour, or to be exact, hex code #e85454. That colour can be seen in the header and the footer of the site. However, since this website consists of websites made by other people too, it cant strictly adhere to a consistent colour palette; that makes some of the web designs clash, but its nothing too drastic. The font they use is a very simple, easy to read font; nothing fancy.

Functionality and Usability

Again, this website is really easy to navigate and can take you to its sub categories with just one click of a button. For example, in this case, the call to action button is the 'submit site' button (located at the top right of the site & also in the list of categories in the header.). When clicked on, it will state the terms and price to submit. You then have to fill in your details with provided guidance along the way. The texts and instructions are all straight to the point, clear and concise. Using this site does not require a lot of thinking, so therefore, really easy to use.

Quality and Relevance to content

I'd say it is pretty relevant to the main purpose of the website, which is showcasing people's works everyday. It shows the actual winners, nominees and even profiles of the people who have submitted their websites. If you click on any of the winning sites, it will provide a score of that particular site, including design, functionality, usability and content.

Fig 1.2. screenshot from csswinners.com #2

All the winning sites (and nominees!) are sorted by chronological order; meaning the latest one comes up first. I think that is pretty relevant to a site that's all about days. It makes it really easy for users to find which winner was on which day.

Website's Performance

When inspected, the load time for this website is 5.35 seconds total. Also for the responsiveness, I used https://ui.dev/amiresponsive?url=https://www.csswinner.com/winners to do a base-line check.

Fig 1.3. responsive check

It helps to show how responsive the website would be in 4 different types of devices (all Apple though. No android :( ). On the iPad and phone, the categories at the top have been minimized into the 3 lines at the top right. On the iPad, the posts have reduced to 2 posts per row and on the phone, 1 post per row. I then tried to check the responsiveness on my own phone (which is an Android) and it seems the same. All in all, the website is responsive to different types of devices and screens. I have also been using that website on both Chrome and Microsoft Edge throughout this analysis and I can say that it seems compatible with both.

(595 words)

2nd website : https://www.awwwards.com/

Upon entering the website, I could tell that it was easy on the eyes and pleasant to look at. The main purpose of this one is also about showcasing sites made by others everyday, A.K.A. site of the day (which you can see right when you click on that link.). Also just like the previous one, they also have site of the month (SOTM). This website, however, has way more elements and categories than the previous website I had analyzed.

Visual Design and Layout

This website mainly uses grayscale (off-white and black mostly) with a slight splash of muted colours here and there. In my opinion, that is the main reason it is so pleasing to look at. The font they used for this is a simple, easy to read font. These kinds of fonts are perfect for most sites as it makes it accessible to everyone. (also, I really want to know what font that is. Its really good.) When scrolling, you can see a bunch of different thumbnails for different things such as websites and videos that catches your attention.

Functionality and Usability

This website may be slightly more complicated to navigate than the last one as this one has more content. This website works by scrolling through the categories rather than clicking on the category. It is not just strictly scrolling though. You could click on the buttons on the bottom and it will automatically scroll to that specific section for you.

Fig 1.4. navigation

They also have a 'scroll back to top' arrow sign at the bottom left for you to go back to the top without having to manually scroll. However, by only relying on the navigation at the bottom, you might miss out on some things like the 'Element of the day' for example. For almost every element you can interact with, it will do something when hovering over it (which I find really satisfying.).

Quality and Relevance to Content

It is pretty relevant to its main purpose : showcasing websites. However, this time, they have a bunch of other stuff like element of the day, tutorial videos and so on. Those things are more for people learning how to create a website of their own and is coming here for inspiration rather than showcasing people's works. Even then, I could still argue that, in a way, its showcasing people's skillsets. This website may be less straight to the point than the previous website, but I think it is still clear. Certain parts may be overwhelming to look at at first glance, but upon further inspection it is pretty easy to understand.

Website's Performance

When inspected, the website's load time is 18.85 seconds in total. This is way more than the last one, mostly because this has more elements. As for the responsiveness, I used the same site I did for the previous one. The layout is mostly the same for all devices except for the phone, where the elements at the top and in the navigation bar have been minimized. Other than that, there are no major changes in any of the four devices. I also tried loading it on my phone and it is pretty much the same thing.

Fig 1.5. responsiveness check

All in all, the website works and responds well to all the devices as above. Again, I tried opening the website on both Chrome and Microsoft Edge and it seems compatible to both. I also tried zooming in on Chrome to see if it responds accordingly and it pretty much does, but it becomes a little weird when zooming in too much.

(594 words)

Exercise 2

For this exercise, we are to replicate TWO (2) existing main pages of the websites given in the link in the Google Classroom to gain a better understanding of their structure.

BANDIT - Bandit Running

Fig 2.1. Screenshot of the actual website

Fig 2.2. side by side comparison

Fig 2.3. skeleton

Fig 2.4. Final product - BANDIT

Fig 2.5. Final Bandit PDF

Used font/typeface : Coolvetica and Univers LT Std

All images are from Pexels.

Ocean Health Index - Ocean Health Index

Fig 2.6. Screenshot of website

Fig 2.7. Side by side comparison

Fig 2.8. skeleton of it

Fig 2.9. Final product - OHI

Fig 2.10 Final OHI PDF

Fonts/Typeface used : Arial
All images were taken from the website itself using the inspect tool.

Exercise 3

In this exercise, we were to 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. We had to choose ONE recipe from the link in Google Classroom.

Getting Inspiration

I went ahead and searched for recipe cards online (but if you were to ask me which ones I referenced on most the list would be too long). From the link, I ultimately I chose the homemade pesto recipe. Theres no solid reason why I did, I just like pesto.

Progress

Since we had to separate the index and css style for this exercise, it was a little confusing for me at first. I didn't sketch this time because I wanted to go with the flow. I know sketching is good practice, but I just wanted to be honest...

So, I started with the main index file and sorted the information based on what I thought was more important. Also, I used a TON of class and id attributes. I had alot of trouble trying to make the header image not squished

As for the CSS style, I decided to go simple (since I have very limited coding knowledge). I tried using as many things I learnt in our previous exercises in this. I wasn't sure what to screenshot as progress because its all in the code...

Final Recipe Card - Homemade Pesto Recipe (recipe-card-pesto.netlify.app)

Fig 3.1. index HTML code

Fig 3.2. CSS style code

Gloria Khaw Ping Sim (0359142)

Search This Blog