Intractive Design Exercise

October 1, 2025

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.

3. Letude



Letude Group presents itself as a modern creative studio combining design, art, and technology. The website clearly focuses on showcasing creative projects and building a strong brand identity.

Strengths:

The site has a clean and minimal layout with a premium, artistic feel. Visuals are strong and immediately highlight the studio’s creative direction. Navigation is simple with clear sections like “Work” and “Contact.” The short, confident text matches the studio’s high-end tone and aesthetic.

Weaknesses:

Some visuals are heavy, which may slow down loading. The content is limited it lacks detailed descriptions, case studies, or client examples. Certain text areas have low contrast, and the artistic language might be too vague for business visitors.

Add short project details or case studies to build credibility, and include clear service information. Improve loading speed through image optimization and increase text contrast for better readability. Adding client logos or testimonials could make the site feel more trustworthy.

Overall, Letude.group looks visually impressive and creative but would benefit from more practical information and performance improvements for a smoother user experience.


4. Nitex



Nitex.com presents itself as a modern fashion-tech platform connecting brands, designers, and manufacturers. The website’s purpose is clear, showing how Nitex powers real time fashion with ready-to-buy designs.

Strengths:

The site has a clean, modern look with good use of white space and high-quality visuals that reflect the brand’s creative and professional tone. Navigation is simple, and content is neatly organized into sections like “What We Do” and “How We Help.” The language is concise and confident, effectively describing services.

Weaknesses:

Some images are heavy, leading to slower loading times. Certain text areas have low contrast, affecting readability. Calls to action such as “Get Started” could be clearer about what users will receive. The site also lacks real case studies, testimonials, or examples to build trust.

Improve loading speed through image optimization, enhance text contrast for better visibility, and add specific CTAs to guide users. Include success stories or client examples for credibility. A sticky navigation bar and smoother transitions could further improve the browsing experience.

Overall, Nitex.com delivers a stylish, professional impression but could be more engaging and performance-optimized for better user experience.


5. More nutrition


More-Nutrition’s website promotes a modern matcha and protein drink with a clean, trendy design that feels fresh and energetic. The purpose is clear to highlight the product’s benefits and encourage quick purchases.

Strengths:
The design is visually appealing with strong imagery and bold typography. Key messages like “Matcha meets Protein” instantly show the brand’s concept. Sections explaining benefits and customer testimonials build trust. Navigation is simple, and the “Buy Now” buttons are easy to find.

Weaknesses:
Large visuals may slow down loading, especially on mobile. Some text has low contrast, affecting readability. The site lacks detailed product information such as ingredients or process transparency. Linking to an external store for purchases slightly disrupts the flow.


Optimize images to improve performance and ensure text is clearly readable. Add more details about ingredients and brand story for credibility. Keeping the shopping experience on the same site would make it smoother.

Overall, More-Nutrition delivers a stylish and attractive first impression but could be more informative and performance-optimized for better user engagement.





・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

Design Exploration

Image
(Week 1 - Week 14) Hisham Rasheed / 0356691 / Design in Creative Media Design Exploration  Instruction Project Proposal At first, my idea was to make a 3d ad for a table from Ikea, after consultation with the sir  He asked me to change to something with features to display, so I went with Ugreen Headphones. I have been using this model for a while, and I feel it is very underrated for the price and features. I started modeling the headphones and the blender. It was tricky since I was overcoming a lot of new issues. After modeling, I proceeded with detailing and texturing the materials. Rendering sessions were blasting my laptop's fans. I divided my sequence into parts, scenes, and rendered them individually and stitched them in Premiere Pro. At the same time, a few effects and text motions were done on After Effects and made the whole timeline on Premiere. I was inspired by the movie the substance for text placements and layout, and decided to ...
Read more

Minor Project

Image
  04/22/2024 - //2023 / Week 1 - Week 14 Hisham Rasheed / 0356691 Advanced Animation / Bachelor of Design in Creative Media  Empathy walk (Group 8) Instructions Planning Mr. Mike gave a brief overview of the module. He provided videos on brainstorming and creative thinking to complement his explanation of the design thinking tenets. Twelve possible clients were shown to us, and after giving it some thought, I decided on Taylor's University for our project. The idea was to create an empathy map for an augmented reality app that would help parents and new students get around campus.After the project was chosen, our first assignment was to choose our respective groups, and I ended up in group 8. We explored various concepts for the AR app and mapped out our ideas using Miro, an online collaborative whiteboard tool. This was an essential step in comprehending the app's possible features and functionali...
Read more