Intractive Design Exercise
October 10, 2024
week 1 - week 14
Hisham Rasheed / 0356691
Interactive Design / Bachelor of Design in Creative Media
Introduction
Exercises
・Exercise 1: Web Analysis
- Process
Fig 1.1
The purpose and goals of the website
This is a chocolate company website called simply chocolate. It is an online store with very fine and rich cocoa chocolates with all the nutrient aspects and details.
The visual design and layout
I really admire the popping pastel colors which are appetizing.
Fig 1.2
Fig 1.3
The home page brings us to a really engaging design where, as you scroll down, you can browse through each distinct chocolate taste while seeing an animation of that flavor in the backdrop.
Fig 1.4
The components of the home page are arranged in a really intriguing way; they are all arranged vertically, including the logo.
Fig 1.5
Fig 1.6
A call to action button that reads "Shop" is present on every page as well as at the bottom as you scroll down, and it appears when you pick any chocolate. This page is depicted in Fig. 1.5 and Fig 1.6.
Fig 1.7
While an isolated image of the chocolate always remains in the center of the screen, scrolling down brings you to the chocolate's specifics, including all of its nutritional information and what is within.
However, the isolation makes reading the essentials mildly difficult.
Fig 1.8
The shop button takes you to the shop page as shown in Fig 1.8.
Fig 1.9
Bottom of the page, write to their newsletter and other social media platforms of the company with the shop address and details.
2. 1917 Into the Trenches
Fig 2.1
The purpose and goals of the website
This is an interactive website portraying the movie 1917, a world war 1 movie in which the characters receive seemingly impossible orders in a race against time, they must cross over into the enemy territory to deliver a message that could potentially save 1,600 of their fellow comrades. On the website, there is a 3d walkthrough of the whole trench which educates the whole history and background of the movie and set.
The visual design and layout
Fig 2.2
Fig 2.1 is the home page when clicked the start button will take you to the 3d walkthrough as shown in Fig 2.2. There is a map button on the bottom right corner which shows the whole layout of the 4th Battalion Trench.
Fig 2.3
Fig 2.4
When you scroll through it will keep taking you to stops where you can find the history like chapter One shown in Fig 2.4 and storyboard as in Fig 2.5, as you keep going forward it takes you through all the chapters and details of the movies.
Fig 2.5
A visual 3d game relating experience throughout the website including all the details of the movie.
The colors as well give a very dramatic experience as shown in the movie.
Fig 2.6 End page
The functionality and usability of the website and the quality and relevance of the website's content
The website is quite straightforward and easy to use because you may scroll to see a walkthrough of the entire page. Although it does need a good internet connection to load up all the elements.
・Exercise 2: Replicating a Website
・Exercise 3: HTML and CSS Document Development
・Exercise 4: CSS Layout
Comments
Post a Comment