Interactive Design | Exercises 1 : Web Analysis

22.04.25 - 30.04.25 / week 1 - week 2
Subhana Salim / 0375936
Interactive Design/ Bachelor's of Design (Honours) in Creative Media / Taylor's University
Exercises 1 : Web Analysis

1. Lectures

2. Instructions

3. Exercise 1 : Web Analysis

4. Reflection

LECTURES

WEEK 1 :

Week 1 was focused on briefing the MIB and talking about the what we will learn in this module. We were also assigned our first task. We spend the rest of the class to select 5 good websites and 3 bad websites, and have it approved by our lecturer.

INSTRUCTIONS

Exercises
We are required to do some exercises to get us started with this module and familiarize
ourselves with web designing. There are 2 exercises under this section.
1. Web Analysis - This exercise requires us to analyze 5 already existing website and identify areas for improvement.
2. Replicate Websites - This exercise requires us to replicate 2 of these websites using Photoshop, Illustrator or Figma.

EXCERCISES 1 : WEB ANALYSIS

Website 1 :- Hook

1. Design and Layout

The design has a minimal color palette using blacks and whites which makes it look chic and modern. The layout is simple and clear, making information easy to read and understand. The images used in the site is of great quality and grabs your attention very quickly. The typography used is legible and simple. Overall I can say the layout and the design of the website does a good job at captivating the user's attention.

2. Content

The home page does a good job at providing the necessary information for first time users visiting their website, who are interested in their work. The opening video sequence in the starting of the website does a good job at giving the viewers the visual representation of their work.

They also provide with information about their purpose and works in the home page for the user to familiarize themselves with the company. The menu provides the user with different categories of information for them to refer and check themselves. However I would recommended them to have a home option in the menu instead of making the title 'Hook' act as the home option.

3. Functionability and Usability

The navigation of the website is a simple scroll down format. This makes its easy for the user to navigate the page and receive the necessary information in an easy way. There is also a menu and contact bar on the top of the website which also allows the viewers to access extra information if they are interested. At the bottom of the page, provides us the option contact them and join their newsletter.

In the examples of their previous projects, we can click on each of them in order to read more about their collaborations.

4. Strengths & Weaknesses

Strengths

Simple and readable layout and typeface
Very easy to navigate
Chic and attractive design
Information provided is easy to understand

Weakness

The design of the website is too simple and uses a very minimal color palette which may seem boring to some people
The menu option in the website doesnt have home button for people to navigate back (It uses title 'Hook' as the home button, which may be confusing to some people)
Not many interactive elements to keep viewers interested

Website 2 :- Praxis Leandra Isler

1. Design and Layout

This website uses a minimal and muted color palette which fits the overall aesthetics of their brand. The images used are of good quality. The typography is legible and simple, which is important for readability.

2. Content

The content is easy to read and understand for the viewers. The homepage does a good job at providing all the relevant information for the users, in order to understand the person's services. However I would critique that there should be more of an explanation on the terms 'Atlasology' and 'Naturopathy' in the homepage as first time users may not understand the meaning of these terms.

3. Functionability and Usability

The website is very easy to navigate. Users can get all the relevant information just by scrolling down in the home page. The menu is also very organized and descriptive which allows the user to select specific topics they are interested in. I especially loved the interactive moving image elements used here as you scroll down.

4. Strengths & Weaknesses

Strengths

Beautiful Color palette and design
Easy Navigation
Easy to understand information
Simple Typography
Fast Loading

Weakness

Not much description about the terms 'Atlasology' and 'Naturopathy' as some users may not understand the meaning of these words

It could have more images

Text in some of the places could be a little smaller+

Website 3 :- 21TSI

1. Design and Layout

It has a Chic Design and uses vibrant and good quality images. Each slide uses images with its own monochrome color palette but still feels cohesive. The typography here is simple and easy to understand. Each slide does a good job at balancing image vs text, to make sure the design is interesting and easy for the users to read.

2. Content

The content is short and easy to understand, which allows the users to easily grab the information they need in order to understand their work. The amount of text in each slide is minimal which doesn't overwhelm the user. There is enough hierarchy between the title and the body allowing the user to easily distinguish between the both.

I would argue that there is a lot of scrolling in order for the viewer to get the information they need (which may drive away a lot of users).

3. Functionability and Usability

The navigation is easy and simple by scrolling through. All the important information is in the home page. The menu bar provide the user with different time stamps for the user to jump through different sections without having to scroll down a lot.

The top progress bar does a good job and letting the users know how much is left.

I love how the image moves as move my mouse over it. A lot of the images have moving elements to keep the user entertained.

4. Strengths & Weaknesses

Strengths

Good hierarchy of text, heading and image
Use of beautiful and attractive but also cohesive images
Use of progress bar allows the users to know how much more there is to scroll down
Simple navigation
All the information is provided within the homepage itself

Weakness

To much to scroll down
Can reduced the image animations, to reduce the amount the viewer has to scroll
Would prefer more clickable items, than just scrolling

Website 4 :- KODE

1. Design and Layout

Overall layout of the website is well designed. The title page has an looped video compilation of some of their work to give users an idea as well as keeps them entertained. I also love the beautiful placement and design of the site title.

The text used in this site is legible, simple and all caps. The moving text in this section is especially interesting.

2. Content

The content is this site is mostly visual and has little text. The lack of 'About Us' section in this site makes it difficult for the user to get a grasp of what it is about. The organization of text is done really well, for the user to be able to distinguish between the different sections.

3. Functionability and Usability

Navigation around this website is easy, involving easy scrolling and clicking. However they may be too much clicking for a first time user, who is trying to get a quick look at this site.

I would also say there is isn't enough relevant information for the viewer to understand about the purpose of this website.

4. Strengths & Weaknesses

Strengths

Good distinction between different categories of text
Good design and layout
Good Visibility of elements

Weakness

Not enough relevant information in home page
Lack of 'About Us' section
Too much clicking of elements required during navigation

Website 5 :- Tomoya Okada

1. Design and Layout

The design of this website is simplistic but refined. I especially love the title page where is image moves as my cursor hovers over it.

The layout is well thought out and typography is legible and in all caps which is a beautiful look. I like the black and white color palette of the website.

2. Content

The content is simple and easy to understand. It gives a good idea on what the site is about. The hierarchy of text and title is easily visible.

However in this section, I would prefer if the different sections had its own page without overlapping the 'About' text.

3. Functionability and Usability

The navigation around the website is easy, through scrolling. Extra information can be accessed by clicking on the different sections on the menu. The menu would look better if there was more distinct demarcations between the sections, instead of being separated by only commas. It makes its look like the different sections is one unanimous section.

It would be much better, if there was an option for the scroll bar.

4. Strengths & Weaknesses

Strengths

Beautiful design and layout
Use of good pictures
Well written content
Legible typography

Weakness

Better demarcation between the different sections in the menu
Need a scroll bar
Sometimes takes too long to load

REFLECTIONS

This exercise is an easy way to start of the module. It allowed me to think about websites and web design with a design perspective and in a critical way. By reviewing the different websites I learned what elements and aesthetics of a website makes it appealing as well as user friendly. Elements such as typography, color and layout all play an important role in the user experience. A good web design requires striking a balance between aesthetics and functionality. I also learned that even well designed websites have their own flaws that require improvements. This exercise helped me get a clearer idea of what to prioritize and take into consideration when creating my own websites moving forward.

Search This Blog

Subhana Salim (0375936)