Interactive Design | Exercises 1
April 21,2025
ZHOU BOYING / 0369087
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. Lectures
2. Instructions
3. Exercises 1
4. Reflections
Lectures
In this week’s Interactive Design class, Shamsul introduced the course structure and project timeline, emphasizing the importance of user experience (UX) and performance evaluation in web design. He instructed us to identify three websites with potential for improvement (excluding e-commerce, news, or overly content-heavy sites) and select two for in-depth analysis as part of Exercise 1. He also outlined the three main projects: Project 1 involves a group proposal for website redesign; Project 2 focuses on developing prototypes based on the proposal; and the Final Project requires each student to individually develop a fully functional website with at least five pages. Additionally, he reminded us to prepare the necessary software tools and mentioned that he would demonstrate how to capture and analyze websites in the upcoming class.
No Physical Class (Public Holiday)
Due to the public holiday, there was no physical class in Week 2. However, we were instructed to work independently on Exercise 2: Web Replication. Following the analysis from Exercise 1, I selected two previously reviewed websites—DASS and Wemake—and started replicating their homepage layouts using Adobe Illustrator. I applied grid systems, replaced images with placeholders, and focused on recreating the original website structure, typography, and visual style as closely as possible. This independent task helped reinforce my understanding of layout design and strengthened my technical skills with Illustrator.
This week, Mr. Shamsul gave us a practical session to guide our progress in Exercise 2: Web Replication. He emphasized the importance of maintaining visual consistency throughout the replication process. During the physical class, he demonstrated how to create accurate block shapes and align elements based on the original website structure. I found this especially helpful when trying to match the layout proportions and spacing precisely. He also reminded us to use tools like Google Fonts and Pexels to find appropriate alternatives for fonts and images when the originals are not available. This hands-on session strengthened my understanding of digital layout construction and improved my technical precision in replication work.
Instructions
Exercises 1
Introduction
In this exercise, I selected five different types of websites for analysis, including creative platforms, art brands, biotechnology, interactive creative studios and architectural design companies. By observing the characteristics of these websites in terms of visual design, functionality, content arrangement and overall performance, I hope to better understand the strategies and styles of different fields in web design. During the analysis, I paid special attention to the color schemes, layout methods, interactive design and information presentation of the websites, aiming to learn how to effectively convey the brand image through design and improve the user experience.
Website 1: NITE RIOT
1. Purpose and Goals
NITE RIOT is a creative platform centered around trend culture, music and brand experience. The website is dedicated to conveying its innovative, independent and highly individual brand spirit to users through a strong visual style and highly immersive design. With a clear overall structure, it mainly showcases various projects and has successfully attracted young consumer groups and cultural enthusiasts interested in trend culture.
2. Visual Design and Layout
The overall NITE RIOT website adopts a minimalist style. It has a white background, paired with thick black fonts, supplemented by a large amount of dynamic video content, creating a strong visual impact. The font design is clear and powerful, with a sense of modernity; the page layout leaves ample white space, making the key content more prominent. Video and picture materials are presented in a rhythmic manner, highly consistent with the trendy brand image, and the overall visual coherence is excellent.
3. Functionality and Usability
The website adopts a top - level directly - displayed navigation (WORK, INSPIRED, INDEX, ABOUT, CONTACT), which replaces the traditional hamburger menu. The navigation layout is intuitive and concise, facilitating users to quickly find each section. The overall interaction is smooth, and the content is switched through sliding and paging, enhancing the sense of immersion in browsing. However, since the project display is mainly based on horizontal scrolling and video carousel, it may take a short time to adapt to the operation method when using it for the first time.
4. Content Quality
The content mainly focuses on showing the cooperation projects of different brands. Each project is equipped with high - quality videos, pictures and brief introduction texts. The information structure is clear and the visual guidance is natural, but the overall amount of text is relatively small, and more attention is paid to conveying information through visuals. The overall content style is unified and well meets the expectations of the audience on the trendy culture platform.
5. Performance
The loading speed of the NITE RIOT website on mainstream devices (PC side and mobile side) is good, and the scrolling and animation switching are smooth and natural. The page has a good responsive design and can automatically adapt to screens with different resolutions, and it also has good compatibility on mainstream browsers such as Chrome and Safari. However, because there is a lot of dynamic content on the page, there will be a short wait in some network environments during the first loading, but overall it will not affect the browsing experience.
Website 2: AMANATION
1. Purpose and Goals
AMANATION is a platform centered on artistic creation, brand expression and fashion cross - border cooperation. Through avant - garde and highly experimental visual expressions, the website shows the uniqueness, pioneer spirit and artistic exploration attitude of the brand. With the art experience as the center in its overall design, it attracts young groups and professional audiences who pursue aesthetics and have high creativity, allowing them to feel the strong personality of the brand in visual art.
2. Visual Design and Layout
3. Functionality and Usability
The interaction design of the AMANATION website is extremely minimalist. The pages are switched by sliding, and there is no traditional navigation bar set. There is only a small Menu button in the upper right corner. When visiting for the first time, users need to keep sliding to explore the content structure. This design increases the sense of exploration and artistic experience, but at the same time reduces practicality and information retrieval efficiency. Overall, the interaction response is smooth and the animation transition is natural, but for users who are not used to exploratory browsing, it may take some time to get used to.
4. Content Quality
The content of the website mainly focuses on art projects, cooperation plans and concept exhibitions. The copy is concise and artistic, and the visual materials are also exquisite, with a moderate update frequency. Each project is developed around the brand concept, but the information logic is relatively weak, and it mainly relies on visual cues to guide reading. The overall content style is unified and highly consistent with the brand's artistic positioning, but compared with ordinary websites, it lacks more detailed text descriptions.
5. Performance
Website 3: ALPBIO
1. Purpose and Goals
ALPBIO is a platform focused on biotechnology, health products and innovative research. The website showcases the professional image of the brand through a clear layout design and highly professional scientific visual effects, aiming to make users build trust in the brand. It mainly targets medical professionals, corporate clients, and consumers interested in health technology, ensuring that visitors can quickly understand ALPBIO's scientific research strength and market positioning.
2. Visual Design and Layout
The overall impression of the ALPBIO website is very natural and fresh. The page uses a large number of plant - related colors, such as green, yellow, beige and light gray - blue, while the background is in a dark color tone. Such a color scheme makes the whole picture look very vibrant and organic. A modern sans - serif font is selected, the typesetting is simple and clean, and the overall layout is also very smooth when scrolling. Through the contrast between the natural color system and the dark base, the website successfully highlights the unique temperament of the brand, leaving users with a first impression that is both modern and somewhat artistic.
3. Functionality and Usability
The website of ALPBIO uses a hidden - menu design. After users click on the small button in the upper - right corner, a complete navigation bar will pop up, and the columns include Platform, CLS, Proteins, Growers, About and News. The page jump and smooth scrolling experience are very smooth, and the navigation settings are also very simple. Even first - time visitors can quickly get started. The overall interactive design not only retains a sense of exploration but also takes into account ease - of - use, making the entire browsing process seem both professional and relaxing.
4. Content Quality
The content of the website mainly focuses on ALPBIO's technological advantages, cooperation models and scientific research achievements. Each section is equipped with professional illustrations, concise text introductions and clear flowcharts. The information is clearly expressed and the logic is very reasonable. The text language is direct and natural, the visual guidance is smooth, and the overall structure is very clear, successfully strengthening the brand's innovative and professional image in the biotechnology field.
5. Performance
The overall performance of the website is very good. The page loading speed is fast, and the smoothness of scrolling and animated elements is also very natural. The responsive design is well - done. Whether on the computer side or the mobile side, the layout can be self - adaptively adjusted to ensure a consistent browsing experience. Although there is a little delay when loading the dynamic background for the first time, it does not affect the overall use. The website can also be well - compatible with mainstream browsers such as Chrome, Safari and Edge.
Website 4: WeMake
1. Purpose and Goals
WeMake is a studio focusing on technology, brand experience and interactive creativity. The website showcases their creative ability and technical strength through strong visual effects and smooth animations. The overall aim is to attract corporate clients and brand partners who hope to create unique and modern digital experiences, allowing people to feel their professional level in digital innovation as soon as they enter the website.
2. Visual Design and Layout
Most of the time, the WeMake website uses dark blue and black as background colors. Meanwhile, a large number of white texts and white blocks are used to highlight important content, making the page have a sense of technology and maintaining a clear reading experience. The overall layout is very neat. The font is a modern and simple sans - serif typeface. Combined with the animated transitions when the page scrolls, the whole browsing process is both smooth and rhythmic, and overall gives a futuristic but not complicated visual impression.
3. Functionality and Usability
There is a fixed navigation bar at the top of the website. The classification is clear, and users can easily find sections such as Work, About, and News. When browsing, the page scrolls smoothly, and the feedback when clicking on links and buttons is also very smooth. Basically, even first - time visitors can quickly understand the website structure. However, because there are quite a lot of animations on the website, if the network speed is a little slow, it may take a few seconds to load for the first time, but overall it will not affect the user experience.
4. Content Quality
The content of the website mainly focuses on showing the projects they have done and the services they provide. Each project has large and clear pictures and concise and powerful text introductions. The overall content layout is reasonable, and the text expressions are also direct and natural, which well match the modern and creative atmosphere of the website, allowing users to quickly understand WeMake's professional fields and strength.
5. Performance
The overall loading speed of the WeMake website is fast, and the animation plays smoothly. The browsing experience is the same on the computer side and the mobile phone side, and the page can be automatically adjusted according to the screen size. Although there are more dynamic effects on the homepage, it needs to be loaded for a few seconds when opened for the first time, but the overall browsing experience is smooth and the compatibility is also very good, supporting mainstream browsers such as Chrome and Safari.
Website 5: Dass
1. Purpose and Goals
Dass is a company focusing on architectural design, innovative materials and sustainable technologies. Its official website displays their project cases and brand concepts through a simple and distinct design. The website is mainly for potential business clients, partners and those interested in sustainable architecture to understand their professional capabilities, while emphasizing their attention to future architectural trends and environmental protection concepts.
2. Visual Design and Layout
The overall website uses bright rose red as the main color tone, paired with a large number of white backgrounds, creating a very strong visual contrast, making the page look very impactful and highly recognizable. The large - area rose red mainly appears in the main titles, navigation texts and separator line areas. The main text content basically maintains black characters on a white background, ensuring the clarity of reading. The font has chosen a modern and simple sans - serif typeface. The layout is neat, the module division is clear, and when scrolling through, the page switching is natural and smooth, and the overall style looks professional with a sense of youth and vitality.
3. Functionality and Usability
The navigation of the Dass website adopts a full - screen expandable design. After users click the button in the upper - right corner, they will jump to a navigation page with bright rose - red fonts arranged on a white background. The columns include Culture, Portfolio, Journal, Approach and Contacts. The layout is free yet clearly classified, allowing users to quickly locate the desired content. Page jumps and smooth scrolling are very smooth. The overall interaction is intuitive, and it can be easily browsed almost without additional learning, which is suitable for professional visitors who need to quickly find information.
4. Content Quality
The content of the website mainly focuses on corporate culture, design cases, sustainable development concepts and contact information. Each part of the information is expressed concisely and clearly, without piling up complex terms. Combined with high - definition project pictures, the overall reading experience is both relaxing and professional. The content organization structure is clear, and the visual guidance is natural, which can not only highlight Dass's design strength, but also show the brand's attention to environmental protection and innovation trends, in line with the development direction of the modern construction industry.
5. Performance
The overall loading speed of the Dass website is fast, the animation effects are very restrained, the page scrolling and smooth jumps are fluent and natural, and the access experience is stable. On screens of different sizes, whether it is a computer or a mobile phone, the layout can adaptively adjust well to ensure a consistent browsing experience. Thanks to less interference from motion effects, the website compatibility is also very good. It can be successfully opened in mainstream browsers such as Chrome, Safari, Edge, etc., and the waiting time during the initial loading is very short.
Conclusion
Comments
Post a Comment