Interactive Design Exercises1

Interactive Design Exercises1

April 28, 2025

22/04/2025 - 29/04/2024 / Week 1 - Week 2

LONG BOJIANG /0375362

GCD61004 / Interactive design / Bachelor of Design (Honours) in Creative Media 

Exercise


INSTRUCTIONS


Exercise 1
Write your report in e-portfolio

Select five websites from the provided links for analysis. Review the design, layout, content and functions of the selected website, clarify its strengths and weaknesses, and explore the impact of these factors on the user experience. The report should cover the following contents: Evaluate whether the website has successfully conveyed the goals; Analyze the effectiveness of visual design and layout (color matching, font typesetting and image application); Evaluate functionality and usability (the ease of use of navigation structure, form design and interactive elements); Examine the quality and relevance of the content (information accuracy, expression clarity and logical organization); Evaluate the performance (loading speed, response capability, and cross-device and browser compatibility).


Website 1
Prometheus Fuels




Purpose

Prometheus Fuels is a technology developed to capture carbon dioxide from the air and convert it into zero-carbon fuel. The website presents their technology and goals more intuitively.

The website is directly presented in the form of a car, allowing readers to have a more intuitive understanding that this website is related to internal combustion engines. The content will be displayed one by one as the cursor slides. This will be very attractive to people who are interested in internal combustion engines or fuels.

Layout

The images on the website are presented in a yellowish-brown setting and accompanied by an American muscle car, which more intuitively indicates that Prometheus Fuels is an American fuel company.

In addition, the interlaced fonts of white and black correspond to the background.

Use 3D technology to show us the product manufacturing process of their brand and the related technologies applied.

It more intuitively demonstrates their advantages and purposes, using new energy fuels to keep internal combustion engines in step with the progress of The Times.

Functionality

The website ingeniously uses 3D models and the form of cursor sliding to present all the content, which is simple and elegant.

The access method is simple and public.

Content quality and expression

With less text and mostly in the form of pictures, it presents a detailed introduction from the production of fuel to the fields it is applied to.

Website 2
Charles Leclerc(CL16)



Purpose

Charles Leclerc (CL16) is a Monaco racing driver who plays for the F1 Ferrari team. His racing car number is 16. Charles Leclerc was born on October 16th, 1997. He has an outstanding performance in the field of racing and joined the Ferrari team in 2019. In 2022, he claimed the runner-up position in the F1 World Drivers' Championship. In F1 races, he achieved 8 victories, 26 pole positions, 10 fastest laps and 43 podium finishes. The website showcases his passion for racing since childhood and his outstanding achievements.

Layout

Because he is one of the members of Ferrari, a large amount of red and white was adopted. The background video featuring his glorious moments is inspiring.

The website uses black characters on a white background to highlight the information.


Functionality

The website was made for him alone and there are no complicated forms on it. The contact information page offers users a simple way to get in touch with the team, which is convenient and practical. Picture library and video playback function. Users can click to view more details, which increases the interactivity and fun of the website.

Content quality and expression

The website introduces Leclerc's racing career data and important events. A description of his training and preparation process. The website is simple and clear, using plain language to introduce complex racing-related content, which is convenient for users to understand.

Website 3
ICG Galleries



Purpose

This website presents products to users with high-quality pictures and clear descriptions. The page layout logic is clear, the classification is definite, and both search and browsing are very convenient. Interactive functions such as picture zooming and Angle switching also enhance the user experience.

This website presents ceramic flooring products very well. The details of design, color and texture are all very clear, allowing users to easily understand the product selection.

Layout

The website uses neutral color schemes, mainly white and gray, which makes it look simple and professional. The colors of the product pictures are very bright and realistic, which can make the goods stand out particularly and catch the users' eyes at once.

The font is simple and concise, directly describing the key points and highlighting the effective information.

Functionality

The site’s navigation is easy to follow and makes sense right away, which really helps users enjoy their time there. The main menu up at the top lets you hop between different product sections without any hassle. Plus, there’s a “Back to Top” button down at the bottom that makes it super simple to get back to the start of the page.

Content quality and expression

The content on the website is both accurate and error-free, providing comprehensive and precise information about ceramic floor products. This includes detailed product specifications, high-quality materials and professional installation methods.

Website 4
IGLOO


Purpose

Igloo mainly helps enterprises build digital workspaces, making teamwork more efficient and employees more involved. Their website showcases various functions, customer stories and product highlights, clearly demonstrating their goal of helping enterprises achieve digital collaboration.

Layout

The website uses a really nice color scheme, with white as the main color, along with blue and gray.  These colors help highlight important info and buttons, so users know where to look.  The fonts are easy to read, and they use bigger, bolder text for titles and key details to grab your attention.

Functionality

The navigation bar at the top of the page includes important sections like "Solutions," "Products," "Customer Cases," "Resources," and "About Us." This setup helps users move around easily and find what they need without any hassle. The website also has a search feature that makes it faster for users to track down specific content. Plus, interactive elements keep users engaged by encouraging them to participate and interact more.

Content quality and expression

The content is expressed very clearly, using simple but accurate language, and is accompanied by many examples, charts and supplementary explanations. This can help users understand complex concepts and functions more easily. For instance, when introducing the product features, a complete operation guide and instructions will be provided to enable users to get started as soon as possible.

Website 5
Dropbox


Purpose

The main purpose of the website is to showcase Dropbox's brand image and assets, while conveying the brand's guiding principles, values, visual style and usage norms, enabling users (such as employees, partners and designers, etc.) to better understand and apply them.

Layout

Using Dropbox's signature blue as the main color, complemented by white and gray, the colors look particularly simple and bright, giving people a professional and modern feeling. Blue itself represents trust, reliability and also has a touch of technological sense. The font design is quite simple and clear, and it is very comfortable to read. Moreover, the title, subtitle and main text, through the differences in size and style, reflect the sense of hierarchy of the information. Some high-quality pictures and ICONS have also been added to the website, which can make the brand content more attractive.

Functionality

The website doesn't have complex forms, but it does have some interesting interactive elements, such as expandable content areas and image hover effects. These designs enhance the interactivity between users and the page and make the information display more rich and vivid. In addition, if you want to learn about Dropbox's brand norms, the website also provides a display of brand visual elements and downloadable logo files, which are convenient for practical work use.

Content quality and expression

The website provides a detailed introduction to Dropbox's brand information, including the logo design concept and specific color values. The content is accurate and clear. Brand norms emphasize accuracy, while content is reasonably classified and displayed by category, with clear logic. Each part of visual identity and language style has a clear theme and specific content.

Comments

Popular posts from this blog

Advanced Typography-task2