Interactive Design Task 1 - Exercises

on
22nd April - 19th May 2024 (Week 1- Week 4)

Sin Jun Ming 0364638

Interactive Design / Bachelor of Design in Creative Media / Taylor's University

Task 1 - Exercises



LECTURES

Week 1 - Usability: Designing Products for User Satisfaction 

In the first week, Mr. Shamsul conducted the lecture online and introduced Usability to us. Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.

Principle of Usability
  1. Consistency
  2. Simplicity
  3. Visibility
  4. Feedback
  5. Error Prevention
Common Usability Pitfalls and How to Avoid Them
  1. Complex interfaces
  2. Confusing navigation
  3. Poor feedback
  4. Inadequate error handling


Week 3 - Understanding Website Structure



Week 4 - The Web



Week 5 - HTML & CSS



Week 7 - CSS Selector



INSTRUCTIONS


Exercise 1 - Web Analysis

In the first week, introduction of the module had been conducted by Mr. Shamsul and the first exercise - Web Analysis is assigned. 

This exercise is to write a brief report about 2 websites in wise of its design, layout, content, and functionality. The objectives are to identify the strengths and weaknesses of the website, and consider how they impact the user experience.



This is a website of a web & software development company. As I opened the website, the homepage is clean and give a sense of simplicity. The hierarchy in the layout exists as there are differences in the size of text creating heading and subheading. There is a contact button as "mail" is animated to rotate and clickable. As I scrolled down the webpage, there are scroll animations which are smooth and creative. There is also an animated transition when I click on the interactive elements on the navigation bar.

Fig 1.1 homepage

Strengths
1. Clear goals from content
The main content on the homepage of this website is the portfolio which are some website design samples for their potential clients. The purpose of this website is to show their ability in web development to attract potential clients, hence the portfolio acts as a huge role here. The portfolio scroll is straight-forward and scrolling animation makes it more energetic. This is considered as one of the strengths of this website because users get to view the portfolio easily as they scroll down the homepage. 

Fig 1.2 Portfolio as content

2. Simplicity of visual design
Unlike any other websites that have fancy designs and layouts, this website appears to have a clean interface and white space is utilized to create simplicity. The purpose of the website is well stated, and users can know what this website is about efficiently. There are no distractions on the website as we scroll down it, the content is mainly focused on the middle with a plain white background. 

Fig 1.3 Simplicity

3. Consistency
The website has consistency in typography and color as the same font is used for webpages and the main color of the website is white. This is considered as user-friendly because it simplifies the process of reading the content and saves users' time from it.

Fig 1.4 Consistency

4. Functionality
Layout of this website is simple, and the navigation bar can be well seen on top of the homepage, showing the services they provide. Users can easily search for things using the navigation bar to lead them to webpages such as contact webpage, workshop webpage and many more. 

Fig 1.5 Navigation bar

5. Website's performance
The overall experience on the website is good, transitions are smooth and load time is fine. Iphone 14 pro is used to browse the website to test the compatibility with mobile device, only some transitions are gone due to the absence of laptop mouse, overall experience is quite the same with laptop.

Fig 1.6 website on Iphone 14 pro

The browser used is Microsoft Edge. In order to check the compatibility with another browser, Google Chrome is tested. After testing, the result is actually the same. nothing different using different browsers.


Weaknesses
1. Small texts
In order to create clean and utilize white space, the website sacrificed by decreasing the size of text. This is somewhat not user-friendly because it could be difficult for some people to read the content, or eyes may be tired after scrolling through the website for a while. 

Fig 1.7 Small texts

2. Text color
Some texts are in a color of grey that could be blended into the white background, plus the size of text is small, this may lead to hard readability and also lose attraction from users' eyes.

Fig 1.8 Inappropriate text color

3. Images
There are some images spotted on the portfolio part, the thing which is confusing is the images are not allowed to zoom in. This can be difficult for potential clients to see closely on the details and may lose interest to further scrolling on this website. 

Fig 1.9 Images not allowed to zoom in


Second website - 100 Years of Columbia Pictures | Sony Pictures (watson.la)

This is a website about a production company. The website starts with an animation of its well-known logo and followed by a three-options homepage. The homepage is clean with only three interactive elements - buttons and the color used is just a clean beige color. The "OUR HISTORY" and "CELEBRATE WITH US" buttons will lead to other websites, hence the "TAKE THE QUIZ" button is the one considered here.

Fig 2.1 Logo with animation

Fig 2.2 Homepage

Strengths
1. Clear purpose and goals
The "TAKE THE QUIZ" button will lead to another interface with animation moves from left to right. The purpose of this website is to rewind the users of past production projects by the company and discover the film matching with the user's personality through a quiz. This website allows the users to have an interactive experience which is taking a quiz to rewind the past film projects. 

2. Visual design
The starting background color used is light beige color and this color suits the website well as it can create a sense of retro vibe. When it comes to the quiz part, the background color will change to match the question. For instance, the background color will change to black when it comes to questions towards horror movies. The heading and subheading are clear with heading with bigger sized text and subheading as smaller sized text. The options are prepared with images and the thing very cool is images can be clicked and movie clips will be played within them. 

Fig 2.3 Starting background color

Fig 2.4 Background color changes to fit the theme

3. Functionality
The quiz part is filled with interactive elements where users can click and drag on the options to decide their answer, most of them are also filled with creative transitions. Since the answers are all images of movies for the user to choose, some people might forget what the movie is about, hence the function where the image is replaced by movie clips when the image is clicked is very user-friendly.
 
Fig 2.5 Interactive elements - Drag & Drop

Fig 2.6 Interactive elements - Click & Drag

4. Relevance of website's content
The main content is basically the quiz about movies produced by the company. It is a creative way to rewind the users of those movies using an interactive quiz to determine movies matching with the user's personality at the same time. 

5. Website's performance
The animation on this website is way smoother than the first website and the load time is fine as well. Iphone 14 pro is used to test the compatibility of mobile device on this website, the homepage design is different, but the functionality is still the same on laptop. 


Fig 2.7 Testing on mobile device 

Google Chrome is used as another browser to test the website. Same as the first website, the result is actually the same, using a different browser does not matter much. 


Weakness
1. Irreversible attempt on the quiz
When testing on the website was carried out, there are several times that I accidentally selected on answers that are not I wished for, but it could not be returned to the last question, the only way is to restart the quiz by refreshing the website. This is quite time wasting as the quiz must be started again from the beginning.

Fig 2.8 Irreversible to the last question



Exercise 2 - Web Replication

In week 3, Mr. Shamsul assigned a new exercise to us which is Web Replication. Our task is to choose two websites given by Mr. Shamsul to replicate the main pages of them. This exercise can give us a better understanding on the website structures. 

Requirements
-  Follow the dimensions of the existing website from the width and height.
- Can use any image from stock image or free stock icon.
- The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image.
- Focus on the layout, type style, and color style.

First website - morganstanley.com

First, we need to get the screen grab from the website. To do that, we need to go to the website -> right click -> Inspect -> Run command -> "Capture full size screen".

Fig 3.1 Screen grab of the first website (original)

I use Adobe Illustrator to replicate the website. First, I set the screen grab as template so I can easily place text and image on the position properly. I use Google Fonts to search for appropriate fonts similar to the original fonts. I also use the free image website -  https://www.pexels.com/ to search for similar images. 

Fig 3.2 Original website - 1

Fig 3.3 My replicated website - 1

I changed the image to an aesthetic tree image and most of the fonts are quite similar. 

Fig 3.4 Original website - 2

Fig 3.5 My replicated website - 2

Building image and person image is changed. Layout, colors and fonts are mostly the same.

Fig 3.6 Original website - 3

Fig 3.7 My replicated website - 3

Fig 3.8 Original website - 4

Fig 3.9 My replicated website - 4

For the icons on the bottom part, I used the website - https://www.freepik.com/ to get some free icon images. 

Fig 3.10 My full replicated website (JPG)

Fig 3.11 My full replicated website (PDF)


Second website - Ocean Health Index

Fig 4.1 Screen grab of the first website (original)

There is a difference between the Full Screen Capture and the actual website, that is the connecting part showing below is actually having a color gradient, instead of white color from the Full Screen Capture, hence I will proceed to follow the actual website for using color gradient at that part.

Fig 4.2 Actual website

Fig 4.3 Original website - 1

Fig 4.4 My replicated website - 1

I changed the background image to a similar image which is also about sea coral. For the logo on the top left upper part, I searched for the logo online and use Photoshop to mask it and change to white color.

Fig 4.5 Replicated logo

The original illustration on the content bar is needed to replace by my own illustration using pen tool. I also applied similar colors.

Fig 4.6 Original illustration

Fig 4.7 My illustration

Same as the last website I have done, I search for social media icon online and use photoshop to remove its background and use color overlay to change the color of the icons.

Fig 4.8 Original website - 2

Fig 4.9 My replicated website - 2

Fig 4.10 My full replicated website

Fig 4.11 My full replicated website (PDF)



Exercise 3 - Creating a Recipe Card

In this exercise, we 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. We need to choose one recipe from the link - https://www.101cookbooks.com/?authuser=0. 

Requirements:
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.


I chose a recipe of Harissa Spaghetti from the website given by Mr. Shamsul.


Fig 5.1 Head of the website

I designed the head part of this recipe website based on the rule of simplicity to give a brief introduction to the users, without much information that could be disturbing to them. I added a logo "LittleKitchen" on top above to indicate that this website is presented by a company named "LittleKitchen".

For the description of this dish, I added a low opacity gray background so that the text is clearly visible. The background color for this webpage is beige and an image of kitchen is added as my headpage background.

Fig 5.2 Ingredients

Scrolling down the page will lead to the ingredients part. I used unordered list to list down all the ingredients needed for this dish.

Fig 5.3 Step 1

Fig 5.4 Step 2

Fig 5.5 Step 3

Then, scrolling down the page will lead to the instructions part, where three steps are shown. One of the reasons why each step is occupying a whole screen size is because I want to make this recipe webpage elderly friendly. Hence, I used big font size which is 30px for the text so that the users can see the information clearly while preparing their dish, and I assumed there is quite a distance between the device and the user when preparing the dish in the kitchen. 

Fig 5.6 Footer of webpage

For the footer part, I used simple elements like boxes storing different info about this recipe by using the justify-content: space between and display: flex. A big "Good Luck" is written down below to wish users all the best in trying out this recipe.


Fig 5.7 HTML code

Fig 5.8 CSS code



Reflection

I think this is a pretty good start to this module, the web analysis process was fun, tons of websites have been browsed and some common patterns of web design is learnt and taken note. It feels great knowing that I could do awesome things like these designs in my future. The web replication exercise did help me a lot in knowing the structures of a website, I think this is going to be useful for me to create websites in the future.


Comments

Post a Comment