Intractive Design

 April 09, 2023

5/4/2023 - 25/4/2023 / week 1 - week 14

Hisham Rasheed / 0356691

Interactive Design / Bachelor of Design in Creative Media

Introduction



Exercises

・Exercise 1: Web Analysis

- Process

1. Simply Chocolate 

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

Popular posts from this blog

Typography / Final Compilation

Image
 29/08/2022 - 28/12/2022  /  week 1 - week 14 Hisham Rasheed / 0356691 Typography / Creative Media / Taylor's Design School Task Task 1:  Exercises-Type Expression and Text Formatting Task 2:  Typographic Exploration and Communication (Text Formatting and Expression) Task 3:  Type Design and Communication Submissions Task 1: Exercise 1 - Type Expression 29/8/2022 - 19/9/2022 / Week 1 - Week 5 Fig 1.1 - Final Type Expression - JPEG, Week 4 (17/9/2022)   Fig 1.2 - Final Type Expression - PDF, Week 4 (17/9/2022) Fig. 1.3 Final Animated Type Expression "Tired" - GIF, Week 4 (19/9/2022) Task 1: Exercise 2 - Text Formatting 19/9/2022 - 3/10/2022 / Week 4 - Week 6 Fig. 1.4 Final Text Formatting - JPEG, Week 5 (29/9/2022) Fig. 1.5 Final Text Formatting - PDF, Week 5 (29/9/2022)
Read more

Advanced Typography / Task 1 / Exercises: Typographic Systems & Type & Play

Image
  05/04/2022 - 0/04/2022 / Week 1 - Week 2 Hisham Rasheed / 0356691 Typography  / Creative Media / Taylor's Design School EXERCISE Task 1 / Exercise: Typographic Systems Task 1 / Exercise: Type & Play LECTURES AdTypo_1_Typographic Systems Axial - all elements are organized to the left or right of a single axis. Axis doesn’t have to be straight. Radial - all elements are extended from a point of focus. Like a sun? Dilatational - all elements expanded from a central point in a circular fashion. Like a ring? Random -appear to have no specific pattern or relationship  RANDOM Grid -A system of vertical and horizontal divisions. Regular books Transitional - an informal system of layered banding Modular   -a series of non-objective elements that are constructed as standardized units. Bilateral -All text is arranged symmetrically on
Read more

Sonic Design: Final Project

Image
Hisham Rasheed / 0356691 / BDCM Sonic Design Final project: Game audio Task For this project, we are tasked with selecting one of five gameplay videos and creating our own sounds to sync with the video. Every interactive and background element in the video must be audible. The sounds cannot be taken from elsewhere; they must be created by me.  Audio list and storyboard  Fig 1.1 Chosen video: Hollow Nights Fig 1.2 Audio List I chose a 1-minute gameplay video called Hollow Knight because it appears to be the most captivating to me. I began by watching the video several times and noting what kinds of sounds are required.  Audio Recording https://drive.google.com/drive/folders/18A3hs3AO_vzp-XKDTVYsZHPuabnmy5z3?usp=sharing I planned and recorded all the audio needed for the project with my iPad at home. I cut down the whole audio tracks into 11 tracks required for the video, then di
Read more