Interactive Design Exercises

-

April 21,2025

YANGYANG / 0363575

21/04/2025 - 12/05/2024(Week 1 - Week 3)

Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University 

Interactive Design：Exercise

LIST

1. Instructions

2. Exercises

3. Reflections


Instructions:



Exercises:


The site starts by using a number of images that float around to grab the viewer's attention, with smooth animation and vivid images that make the viewer want to explore even more.

Simple but clear categorisation makes for a cleaner look and organises the information in a way that doesn't confuse the viewer's mind with an influx of clutter, which saves the viewer time and wasted energy until they get to the information they really need.


In this interface, instead of the previous white background, the background is set to black, and the fonts and rotating spheres are in white, a change that adds to the layered look of the site itself. This change can increase the sense of hierarchy of the website itself, so that when the viewer is tired of the white background, the visual impact can be re-induced by the large colour reversal, thus attracting the attention of the viewer again. At the same time, simple and atmospheric fonts and a certain amount of white space on the screen also gives the screen a breathing space, not too much or too dense information into the viewer's field of vision, in the concise and at the same time can also emphasise the key information.（203 words）



The opening cover of this website caught my eye right away, with large black and white images and appropriate animation to allow the viewer to get the key information at the first glance, and immediately have a general concept of the word site, while the large black and white contrast can reduce the distraction caused by the colours, so that the viewer can focus more on the information that the producer wants to express. At the same time, the editing and layout of the headline fonts are also simple and clear, and the white space on the screen can also help to concise the information.

The site does a great job of gathering information and highlighting key information. The information that needs to be highlighted in a paragraph is marked in red, which is a very prominent colour on a site that has a black-and-white overall colour palette, so it is a good way of quickly catching the viewer's eye.


The producers have presented the statistics of the information in a very simple and easy to understand way, without making the picture cumbersome or complex because of the boring data, the large colour blocks and the clear colour changes can unify and simplify the picture. To a certain extent, this move lowers the viewing threshold for the viewer.（217 words）



This site is certainly one of the most innovative sites I've ever seen, it starts with an animation of a room model, and when I thought it was just an animation, the makers surprised me by making some of the items in the screen interactive! This is certainly a strong attraction for the viewer, and the origin points that appear on the corresponding items can also indicate which items are interactive, thus reducing the viewer's time spent on tedious explorations.

What surprises me more is that the viewer can also change the material of the carpet, curtains or sofa. In relation to the content of this website, this kind of replacement can make the viewers get the information they want more easily and clearly, and also have more intuitive feelings and concepts about the appearance of the items, which can also stimulate the purchasing desire of the viewers to a certain extent, and this kind of design can greatly save the viewers' hesitation time, and also make the viewers feel the positive emotions of pleasure and fun because of the immediate visual feedback. Therefore, the attractiveness of the website itself should be relatively high.

The website itself does not have a cover design that ignores the communication of information. After clicking into the real browsing page, the producer still maintains the design style with more pictures, but the colour of the pictures and the concise statement of the information reduces the clutter that would otherwise be generated by the picture, and on the contrary, it is able to organize and express the information in a clear manner and at the same time, strengthen the viewer's impression of the information in the pictures.（282 words）



This site is different from the average website in that it uses a large area of rose red as the main colour of the site. This strong and vibrant colour would normally be too impactful to be viewed for long periods of time, but the producer has used black lines and fonts to reduce the impact of the colour itself, while at the same time allowing the font to convey the message more prominently, and still retaining the attractiveness and impact of the rose red. The lines on the cover, which change with the movement of the mouse, add some interactivity to the site itself, and the smooth animation also serves the purpose of arousing the interest of the viewer.

The website maker's idea of constructing a wrap-around visual effect through the curved perspective of fonts and images as well as the back-and-forth shading relationship of background fonts and images is certainly very creative and excellent.

The producers used a strong perspective font and guiding black lines to form a bit of perspective relationship, in an otherwise flat browsing site to build an excellent 3D effect, and clean and strong colour background does not because of such an animation layout and the first picture clutter, but rather it is precisely because of the simplicity of the background to make the site's information as well as the visual effect of the more efficient. It's clear that the site is closer to a discovery process than the concept of the site itself, and it's this interest that can greatly enhance the viewer's interest in the site's information.（265 words）


The overall style of the site is very unified and innovative, the jellyfish as an important element present in the cover is carried out at the beginning, as the jellyfish swim and the background screen changes will bring a very luxurious visual experience, because the movement of the jellyfish is essentially associated with the viewer's mouse scrolling, this interactivity will make as a viewer will be very easily by the attraction of the flowing water hooked interest! Even for me alone, I would be more than willing to repeatedly control the jellyfish as it ‘swims’ across the page. The crystal-like texture of the jellyfish and the background also reduces the clutter that the elements can cause, instead making them as clear as ice.


In addition to the beautiful and excellent art design, the website designer has not given up on the requirement of conveying and categorising information, and the clear separation of categories can help visitors to find the key information more quickly instead of getting lost in the mere art design. At the same time, the producers did not add too many elements in the background, this behaviour can avoid the image looks cluttered, but also can help the viewer quickly focus on the few elements in the image, which also represents a certain degree of emphasis on the information.（221 words）





Reflections:

In this exercise I broke the concept of the website, in my impression of the website is often just a carrier of information, mostly functional and boring, but in this exercise I broadened my horizons, and gradually realised that the website design itself is also a kind of art carrier, in the mouse sliding the scroll wheel is not necessarily just the information sliding, but also may be accompanied by subtle and exquisite animation, and in these Browsing information on these websites is undoubtedly a journey of exploration and enjoyment. It also gave me a different way of thinking and understanding about the website design projects I will face next.

Comments

Post a Comment

Popular posts from this blog

Design Principles Project 2 (2025/02/17)

-
Image
 17 /02 /2025  - 17/02/ 2025 (Week 3 - Week 5) YANGYANG/ 0363575 Design Principles / Bachelor of Design (Honours) in Creative Media  / Taylor's University Task 2  Visual analysis and Ideation LISTS - Lectures - Instructions - Design - Feedback - Reflections Lectures W4：Harmony & Unity Harmony -  Harmony means choosing elements that share common characteristics. Harmony means that all elements of the design work together, they may fit into the same theme, colour palette, aesthetic style or mood. alwaysforlove Painter Unity -  is the repeated use of certain elements, such as colours, shapes or materials, in a design to make the whole look more harmonious and coherent. Jade illustrates Painter Scale refers to the size of an element in relation to the whole or its environment, affecting the visual hierarchy and sense of space. Proportion is concerned with the relationship of size within an element to ensure harmony and aesthetics in a design. Proper use of ...
Read more

Advanced Typography | Task 2 : Key Artwork and Collateral

-
Image
April 21,2025 12/05 /2025  - 12 /05 /202 4 (Week 3 - Week ) YANGYANG / 0363575 Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University  Task 2 : Key Artwork and Collateral  LIST 1. Lectures 2. Instructions 3.Task 2 : Key Artwork and Collateral  4. Feedback 5. Reflections 6. Further Reading Lectures  Week 4 : AdTypo_4_Designing Type Two Core Purposes of Typeface Design Social Responsibility Typeface design should enhance legibility to improve communication in society. Artistic Expression Type design is not only functional but also a form of personal or artistic exploration. Typography balances functionality and creativity—it's both practical and expressive. Case Studies: Function-Driven Typeface Design Frutiger (1968) Purpose : Designed for Charles de Gaulle Airport to ensure clear readability from both near and far. Features : Clean, highly legible, and suitable for public signage. Adaptation : Frutiger Arab...
Read more

Design Principles Project 3 (2025/03/3)

-
Image
03/03 /2025  - 17 /03 /2025 (Week 5 - Week 7) YANG YANG/ 0363575 Design Principles / Bachelor of Design (Honours) in Creative Media  / Taylor's University Task 3 Development & Dsign LISTS - Lectures - Instructions - Design - Feedback - Reflections Instructions Design: I chose this draft as a sketch for my final product. I started by refining the forms and expressions of the characters even more from the original, carving out the original rough outlines in more detail. At this stage I redrew some details on top of the original line drawing, I changed the expression of the snake wrapped around the protagonist's hand to be more ferocious, and made the protagonist's facial expression more grim, so as to emphasise the impact of the picture. I finished the base colours based on the harmony of the image and subjectivity. Feedback： Mr Anwar provided me with a very efficient evaluation of my work and very professional advice on how to improve the direction of this piece of work,...
Read more