Interactive Design - Exercises

-

28.08.2023 - 16.09.2023 / Week 01 - Week 08
Ilhan Rayan bin Khairul Anwar / 0361205
Interactive Design / Bachelor of Design (Honours) in Creative Media
Task 1 - Exercises

LECTURES


INSTRUCTIONS


PRACTICAL

Task 1: Web Analysis

For our first exercise task, we were instructed to take two websites from a provided website and analyse them based on their design, layout, content, functionality, strengths, weaknesses, and user experience. At the end of our analysis we had to give a 500 word report explaining our thoughts on the website. We were also provided with a guideline for our analysis on what we should include:
  • Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
  • Evaluate the visual design and layout of the website, including its use of colour, typography, and imagery.
  • Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
  • Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organisation.
  • Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
With all this in mind we created a slideshow containing our thoughts as well as screenshots from the website. It should also be noted that our 500 word analysis had to contain both websites, rather than one analysis for each website which I personally thought wasn't a smart decision as if we're expected to provide an in-depth analysis, we can't convey everything in 250 words. But that's a conversation for another time.


Task 2: Site Recreation

For our second task, we were give the assignment of replicating two existing main pages from a set of websites provided by our lecturer. I decided to do Bandit Running, a sports clothing company, and the Ocean Health Index which measures and keeps track of news related to the ocean. The first site that I decided to recreate was Bandit Running since I liked the style of the website so I wanted to work on it.

Original Website
Figure 1.1: Original Website, Week 2 (6/9/23)

The first thing that I noticed with the jpg that I downloaded of the main page was that there was a pop up explaining that the website used cookies and was asking me to accept. I already accepted the pop up and yet it still remained outside of my view. Because of this, I made the decision to remove it from my recreating as it occupied space and was something that shouldn't be there in my opinion.

First Site Recreation Final

Figure 1.2: My Site Recreation, Week 2 (6/9/23)

I gathered all of the images used on the website simply by opening the images in a new tab and screenshot them before pasting them back into my design. As for the image at the bottom, it was an animated gif on the website and I can't really copy that so I just used something close to it. After I finished working on Bandit Running, I moved onto the Ocean Health Index page.

Original Website
Figure 1.3: Original Website, Week 2 (8/9/23) 



Second Site Recreation Final
Figure 1.4: My Site Recreation, Week 2 (8/9/23)

For this one, I was unable to use all of the exact same images but I was able to find ones similar to it for my recreation.

Task 3: Recipe Card

For our third exercise, we were tasked with creating a recipe card using what we've learned, the goal is to design a very basic webpage that displays a recipe's ingredients and instructions in a simple format. For my recipe, I decided to do polpettes which are essentially Italian meatballs.

Figure 1.5: HTML Code Screenshot, Week 7 (9/10/23)

Once that was done, I used CSS to change the background colour to something that fit.

Recipe Website:



Comments

Post a Comment

Popular posts from this blog

Information Design - Exercises

-
Image
03.02.2025- 17.03.2025 / Week 01 - Week 07 Ilhan Rayan bin Khairul Anwar / 0361205 Information Design / Bachelor of Design (Honours) in Creative Media Exercises INSTRUCTIONS EXERCISES Exercise 1: Quantifiable Information For our first exercise, we had to  g ather a set of objects that can be organized through a quantifiable factor. We then have to present it in a layout or graph visually. Figure 1.1: Raw Data For the objects that I would use for this exercise, I decided to go with Lego Technic pieces since I have an entire drawer filled with them so it would be interesting to see what I could do with them. I went with three different pieces since I had a high quantity of them compared to other the other pieces in my storage. Figure 1.2: Data Sorted I sorted the data into three simple categories, which was colour. Figure 1.3: Data Arranged I then arranged them neatly in their respective categories and added in the names for the specific piece that I used.  Figure 1.4: Data Pres...
Read more

Major Project 1 - Task 1: Proposal Development

-
Image
04.02.2025 - 25.02.2025 / Week 01 - Week 04 Ilhan Rayan bin Khairul Anwar / 0361205 Major Project 1 / Bachelor of Design (Honours) in Creative Media Task 01 - Proposal Development INSTRUCTIONS PRACTICAL Major Project is split into two parts, Major Project 1 and Major Project 2. For Major Project 1 are tasked with forming a group of 4 students from the same specialization area and coming up with a large-scale project that we are to complete by the end of our third year. This module is meant to help us better understand industry training and it's workflow as well as having something substantial for our portfolio. For Task 1, we were required to brainstorm and develop a project proposal. The proposal would include a project overview (title, problem statement, proposed idea), project specifications (format, duration, genre, visual style), team roles, responsibilities, and a project delivery timeline. We started off by figuring out roles and responsibilities within the group  Director: ...
Read more

Design Research Dissertation - Task 1, 2,3 and Final Task Compilation

-
23.04.2024 - 04.08.2024 / Week 01 - Week 16 Ilhan Rayan bin Khairul Anwar / 0361205 Design Research Dissertation / Bachelor of Design (Honours) in Creative Media Task 1, 2, 3 and Final Task - Design Research Dissertation Compilation INSTRUCTIONS PRACTICAL Task 1: Dissertation Draft For our first task in this module, we had to write a minimum 7000 word dissertation about our topic and research that we conducted in Design Research Methodology. Figure 1: Dissertation Draft Task 2: Visual Design For the second task of this module, we had to create a visual design for our dissertation by turning it into a flipbook styled paper, on top of that the visual design and aesthetic has to match and share a similar theme with the dissertation's topic. Because my dissertation is on indigenous cultures and representation, I decided to try and create a design using elements that they would have used in the past to create books. I used buckskin as the cover and parchment for the pages so that it wou...
Read more