Interactive Design - Final Compilation and Reflection

-

12.06.2024 - 24.07.2024

Graciella Limpah / 0364517 
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylors University
Final Compilation and Reflection


INSTRUCTION

Task 1 : Exercises

Project 1 : Prototype Design

Project 2 : Working Web Page

Final Project : Website Design

SUBMISSIONS

Exercise 1 - Website Analysis

First Website : Ellesse 

Website Link : https://www.goldwin.co.jp/ellesse/ 

This website serves as a platform to introduce viewers to Ellesse, a renowned clothing brand originating from Japan, offering a diverse range of fashion items. Its primary objectives are to provide detailed insights into Ellesse products and facilitate seamless access to purchasing via their online store. Additionally, the website showcases various styling options for Ellesse clothing. The clear presentation and accessibility of information suggest that these objectives are effectively communicated to the audience. 

Layout, Purpose and Goals 
Upon arriving at the website, you are greeted by an animation play that show the fashion categories. The choice of colors and fonts employed throughout the website is particularly pleasing to the eye. Additionally, subtle design elements in the background enhance the overall aesthetic, creating an interactive experience as they respond to cursor movements. Guiding users to key sections such as the online store, about brand information, shop list, brand name, and search bar, all conveniently located at the top of the website. These animations not only enhance the visual appeal but also assist users in navigating the site efficiently. The goal of this website is to elevate the brand's popularity and increase awareness among potential customers. 
 
fig 1.1 Opening page

Functions 
Here are a couple of standout features on the website that caught my attention. Firstly, clicking the arrow icon (fig 1.2) seamlessly redirects us to the online store, making the browsing-to-purchase process simplified. Secondly, the 'microscope' feature allows for a closer look of the fashion items, enhancing the viewing experience with clear, detailed imagery. 

 
fig 1.2 Functions

 
fig 1.3 Online stores

 
fig 1.4 Functions

Quality and Relevance 
The website works really well in many ways. It keeps its product list updated so you always know what's available. The pictures and symbols all look good together and make the site easy to recognize. When you click on things, they change color smoothly, which is fun. Finding your way around is easy too, thanks to the clear categories. And everything is simple to use, so anyone can navigate the site without any trouble. Plus, the small details like circles or lines add extra charm. For example, the circles animation from the background follow our arrow wherever we go, making the website even more interesting to explore. Overall, the website does a great job making shopping online a breeze while also being enjoyable to use. 
 
fig 1.5 Quality and Relevance

 
fig 1.6 Quality and Relevance

The website's categories are exceptionally clear and thoughtfully organized, making it effortless for viewers to navigate. With clear divisions into various categories, users can quickly find what they're looking for. This organizational structure functions seamlessly, enhancing the user experience. 
 
fig 1.7 Quality and Relevance

 
fig 1.8 Categories

Website Performance 
Here's how the website appears on an iPhone. While some layouts may adjust, the information remains consistent. I find it easy to access the website on both my laptop and iPhone. The elements transition perfectly, adapting smoothly to the device's screen size and orientation. 
fig 1.9 view from iPhone
Strength and Weakness 
Strength : 
  • The website's color palette is remarkably appealing, attracting viewers and enhancing their desire to purchase products. 
  • The visual elements incorporated into the design are engaging and captivating, adding an entertaining dimension to the browsing experience. 
  • The clearly defined categories streamline navigation, significantly reducing the time required to locate specific items. 
Weakness : 
  • Navigating this website can pose challenges for non-Japanese speakers due to its predominantly Japanese language. 
  • Occasional interruptions occur when scrolling, as other websites may unexpectedly appear. 
  • Certain animations on the site tend to move very slow, causing viewers to be bored. To prevent this, consider replacing slow animations with static images. 
  • Some text is difficult to read due to poor contrast with the background color, make readability a little difficult.

Second Website : Poison

Website Link : https://www.poison.studio/studio 

"Poison" symbolizes a departure from conventional norms and standards, a willingness to challenge existing boundaries, and an embrace of innovation and creativity. It embodies the idea of daring to be different, going the extra mile, and questioning everything in pursuit of new horizons and possibilities in art, business, and the creative industry in general. In essence, "Poison" represents a bold and unconventional approach to creativity and innovation. 

Layout, Purpose and Goals 
Upon opening the website, I'm immediately drawn to the charming arrow design, resembling a hand and setting a playful tone. The predominant use of black colors gives a sleek feel. Additionally, the interactive color-changing feature upon clicking symbols adds an engaging element. However, there is room for improvement in the layout, particularly with regards to highlighting the introduction more prominently. Despite this, the website's main goal is clear: to help brands unlock their true potential, promising a platform for creative exploration and growth. 
 
fig 2.1 Opening page

 
fig 2.2 Layout

Function 
I'm satisfied by the way our cursor changes into different hand shapes, reflecting what we're about to click. The interactive animations, including those we can interact with while scrolling, add an enjoyable dimension to exploring the website. Furthermore, the effortless usability of the member registration form enhances the website's functionality. Additionally, the animations provide a playful touch, almost resembling a game, ensuring visitors remain engaged and entertained each time they access the website. 
 
fig 2.3 Function

 
fig 2.4 Log in page

Quality and Relevance 
The website's categories are meticulously organized, allowing users to effortlessly navigate to their desired sections with just a click. Each category is clearly labeled and intuitively arranged, smoothen the browsing experience. Furthermore, all information provided is carefully maintained and regularly updated, ensuring that users have access to the latest and most accurate content. Keeping things well-organized and up-to-date makes users happy and helps them find what they need quickly, which makes the website better for everyone.
 
fig 2.5 Categories

Website Performance 
The website adapts well to iPhones, ensuring a smooth user experience. Despite occasional animation lag, it maintains a high standard. This adaptability reflects its commitment to accessibility and user-centric design, welcoming users across devices. While some delays may occur, they're minor compared to its overall performance across platforms, emphasizing its dedication to inclusivity.
fig 2.6 View on iPhone

Strength and Weakness 
Strength : 
  • The predominantly black and white color scheme of the website creates a striking contrast, making any additional colors stand out vividly. 
  • Certain animations and elements on the site are particularly captivating, enticing users to explore further by scrolling through the content. 
  • The well organized typography enhances the reading experience, obtaining a sense of satisfaction and engagement among visitors. 
Weakness : 
  • The website experiences occasional lagging due to excessive animations, which can impact its smooth performance. 
  • The presence of watermarks on the mobile version of the site can create a sense of unease for users. 
  • Placing the login page at the end of the website may lead to users overlooking it, resulting in decreased awareness of its existence. 
  • Certain animations positioned behind text elements can effect readability, making it challenging for users to engage with the content effectively.

Exercise 2 - Website Replication
Result of the first replication website :
 
fig 3.1 Replication of the first website 

Comparison :
 
fig 3.2 Comparison (left side is the real website, right side is the replication) 


The result of the second website :
fig 3.3 Replication of the second website 
Comparison with the real website :
 
fig 3.4 Comparison (left side is the real website, right side is the replication)

Exercise 3 - Creating a recipe card

Project 1 - Prototype Design

 
fig 4.1 Final Prototype Design (png)

fig 4.2 Final Prototype Design (pdf)

 
fig 4.3 (embed from figma)

Project 2 - Working Web Page

Project 3 - Website Design
 

REFLECTION

Overall, I think this module is such an exciting module, although I haven't learnt about coding before, but for me this is very interesting. Although some time might stressed me out because the code didn't work, but I think that's because I'm still new to coding. I feel really satisfied with all of the works I have done through this module.







Comments

Post a Comment

Popular posts from this blog

Publishing Design

-
Image
23.04.2025 Graciella Limpah / 0364517  Publishing Design / Bachelor of Design (Honours) in Creative Media / Taylors University  JUMPLINKS Lectures Instructions Exercises Book Final Layout LECTURES Publishing Design: Formats Types of Publications There are various types of publications, including books, newspapers, magazines, and digital publications. However, the primary focus is on books, due to their historical significance and influential role in the publishing industry. Designing Books Designing a book demands a deep understanding of typography, spatial awareness, an eye for detail, and proficiency in publishing software like Adobe InDesign. Key design considerations include target audience (e.g., children’s books), content type (e.g., visuals, diagrams), and physical factors (e.g., paper type, binding). Historical Context of Book Formats The course ...
Read more

Packaging & Merchandising Design - Project 1

-
Image
  14.05.2024 Graciella Limpah / 0364517  Packaging & Merchandising Design / Bachelor of Design (Honours) in Creative Media / Taylors University  Project 1 JUMPLINK Clip Box         Final Clip Box Brush Box         Final Brush Box INSTRUCTIONS Exercise - Packaging Product Analysis Practice in Class For in class practice, we have to make a packaging for a massage ball. I find inspiration from pinterest and then I found the packaging I like and I try to draw the guideline and cut it. Here is the result :  fig 1.1 Box for massage ball fig 1.2 Dieline for massage ball Next, in week 4, we have to bring 2 non-box products to make a box for the ...
Read more

Information Design - Exercises

-
Image
04.02.2025 Graciella Limpah / 0364517  Information Design / Bachelor of Design (Honours) in Creative Media / Taylors University  Exercises LECTURES Type of Infographics Infographics are effective to increase engagement and capturing audience’s attention. It is a powerful way of communicating ideas in a visual form. 8 types of infographics : List Infographics  Statistical Infographics  How-to Infographics  Timeline Infographics  Comparison Infographics  Map and location Infographics  Flowchart Infographics  Process description Infographics  1. List Infographics A list infographic is a visual way to present information using a written list. It combines text with design elements to make the content more engaging and easy to understand. By adding visuals, it grabs attention and helps people remember key points, especially when showing statistics.  2. Statistical Info...
Read more