Interactive Design ( Sem 2 )

 Intercultural Design GCD 61304

WEEK 01 - WEEK 07 (06.02.2024 - 19.03.2024)

NAME: Chai Wei Yi

I.D: 0369561

COURSE: Intercultural Design / Bachelor of Design (Honors) in Creative Media

GROUP: Class 01 Sec 01

Intercultural Design

---

Introduction

---

Exercise 1

For our first exercise we need to choose TWO (2) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.

Write a brief report summarizing your findings and recommendations.

What To Have in The Analysis:

Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user. Evaluate the visual design and layout of the website, including its use of color, typography, and imagery. Consider the functionality and usability of the website, including its navigation, forms, and interactive elements. Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization. Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.

The First Website ( Hardy)  

1.Purpose and Goals

Hardy is Marek Charytonowicz's creative studio, specializing as a designer, tinkerer, and photographer. He collaborates with clients from all over Europe and beyond to create memorable digital experiences. The Hardy Agency articulates its purpose well as a provider of digital and branding services. Their motto, "Where artistry meets technology," aptly describes the blend of creative and technological services aimed at crafting significant digital presences for clients

2.Visual Design and Layout

Figure 1.1 Color Board of Hardy

The visual design of the Hardy Agency website is clean and modern, with a focus on usability and aesthetic appeal. The site primarily uses a dark color scheme, featuring various shades of gray to create a sleek, professional look. This is complemented by the use of white for main text and highlights to ensure good readability and focus on important content. The layout is structured to enhance user experience, with clear navigation and well-organized content sections. The design elements like buttons and icons are minimalistic, aligning with the overall sophisticated digital craft theme of the agency.

Typography

Figure 1.2 The font of Home Page 

Figure 1.3 The font of End Page

The typography on the Hardy Agency website is sleek and contemporary, primarily utilizing clean and straightforward sans-serif fonts. This choice enhances readability and aligns with the modern and minimalist design ethos of the site. The text is typically set in white against dark backgrounds, ensuring high contrast and easy legibility, which is effective for engaging viewers and guiding them through the content smoothly. The use of varying font sizes and weights helps to create a visual hierarchy, making the site both attractive and functional.

 

Imagery

Figure 1.4 Page showing products

Figure 1.5 Clear and Comfort design in Home Page

The imagery used on the Hardy Agency website is impactful and artistic, reflecting the creative nature of their work. The images are high-quality and thoughtfully integrated into the design, often used as full-background visuals that add depth and context to the content. These images showcase the agency's projects and design capabilities, effectively highlighting their attention to detail and aesthetic sensibility. The overall use of imagery helps to create a dynamic and visually engaging experience for visitors

Layout

Figure 1.5 Clear and Comfort design 

The layout design of the Hardy Agency website is highly structured and user-friendly, designed to optimize user experience. It features a clean, organized interface with a strong focus on easy navigation. The website utilizes a grid layout to systematically arrange content, making it visually appealing and easy to read. This layout effectively showcases the agency's portfolio and services through well-spaced sections, each dedicated to different aspects of their offerings, enhancing the overall functionality and aesthetic of the site

3) Functionality and Usability

The Hardy Agency website is designed to be very user-friendly. It's easy to move around the site and quickly find different sections like work portfolios, company information, and contact details. The website has simple menus and clear buttons to help users navigate. It also adjusts to fit different devices and screen sizes, making it easy and efficient for everyone to use

Navigation

Figure 1.7 The Page after navigated 

The Hardy Agency website features a straightforward navigation system. It uses a clear top menu with a two-line icon that opens to reveal sections like "Work", "About", and "Contact". Upon opening, there's a surprising shift in the page's style from primarily white to black, making the bright words "Work", "About", "Contact" stand out. This design change is novel and visually striking, enhancing navigation and making it easier for users to find what they need quickly. The layout helps users smoothly navigate the site on any device.

Forms

Figure 1.8 Clear and Easy Understand forms

The Hardy Agency website utilizes well-designed forms that are seamlessly integrated into the overall layout. These forms are straightforward and user-friendly, designed to ensure a smooth user interaction. They use minimalist design elements, aligning with the site’s modern aesthetic, and include clear labels and input fields, making it easy for visitors to provide information or get in touch with the agency.

Interactive Elements

Figure 1.9 The Page which is interactive with user (before)

Figure 1.10 The Page which is interactive with user (after)

The Hardy Agency website showcases interactive design through elements like a streamlined, intuitive navigation menu that uses a two-line icon. This icon expands to reveal key sections, which when clicked, lead to a dynamic change in page background from white to black. This striking visual transition highlights the navigation options "Work", "About", and "Contact" in bright, bold text, providing a visually engaging and user-friendly experience. This approach not only captures user attention but also enhances the ease of navigation

 

4) Content Quality & Relevance

Figure 1.11 Page provide UI/UX service

Figure 1.12 Example of UI/UX Template 

The Hardy Agency website provides high-quality, relevant content that matches its brand and digital design services. It details services like UX/UI design and digital strategy, showing their expertise with examples of their work. The content is clear and targets specific audiences, explaining what the agency can do and its successes. There are also testimonials that show how credible and effective their work is.


5) Performance
The Hardy Agency website works well, offering a quick and smooth experience for users. It has clean, efficient coding that helps pages load fast and allows smooth transitions between them. The website is also made to work well on different devices and screen sizes, providing a consistent and easy-to-use experience everywhere. This good performance is important for keeping users happy and engaged

Conclusion
The overall website analysis of the Hardy Agency shows it is excellent example website specially for its effective use of white space.

Strengths

• Effective Use of White Space: Enhances readability and reduces visual clutter, making the content more digestible.
• Increases Attention: Strategically placed white space directs the viewer's focus to key elements such as CTAs (Call to Actions) and featured works.
• Elegant and Professional Look: The liberal use of white space contributes to a more sophisticated and professional website appearance.

Weakness

•  Limited Appeal: The straightforward design could be perceived as too basic, possibly not meeting the expectations of users looking for innovative or cutting-edge design features. . It may not resonate with all user preferences, especially those who seek more dynamic and detailed web experiences. 
• Risk of Overgeneralization: The clean and simple aesthetic might not effectively convey the unique characteristics and capabilities of the agency to a diverse audience

The Second Website ( Pixel Bakery)  

1.Purpose and Goals

Figure 2.0 Page showing Purpose 

Pixel Bakery is a production studio specializing in animation, motion design, and video production, dedicated to enhancing brand storytelling through immersive, high-quality content.

Figure 2.1 Page showing Goals 

Their core purpose revolves around creating impactful visual narratives that leave a lasting legacy, emphasizing strong relationships with clients, community, and their team. The studio's goals include pushing creative boundaries in motion design while ensuring client satisfaction and community engagement​ (Pixel Bakery Design Studio)​​ (Pixel Bakery Design Studio)​​ (Pixel Bakery Design Studio)​.

2.Visual Design and Layout

Figure 2.2 Home Page Design

Figure 2.3 Color Code that used

The visual design and layout of the Pixel Bakery website is modern and engaging, with a focus on bold visual elements and animations. The site uses a dark theme with vibrant accent colors. The layout is user-friendly, with clearly marked sections and smooth scrolling animations that enhance the user experience. Key features include a main menu, interactive elements, and sections for services, portfolio, and contact information

 

Typography

Figure 2.4 Introduction with clean Typography 

Figure 2.5 Menu with clean Typography 

The Pixel Bakery website has a modern, lively design with lots of bold colors and fun animations. These elements show their specialty in animation and video. The site is easy to use, with animations that are interesting but not too much. The fonts used are a mix of strong and light styles, which helps everything read clearly and keeps things interesting visually. This design suits their image as a creative and professional studio

Imagery

Figure 2.6 Animation background to get attention from user 

The visual design of the Pixel Bakery website is vibrant and engaging, using a combination of lively colors and playful imagery. It features creative animations that showcase their expertise in motion graphics. The imagery is bold and artistic, with a strong visual narrative that complements the text content. This design approach effectively highlights their capabilities in video and animation production, making the site visually appealing and reflective of their creative industry

Layout

Figure 2.7 Introduction of collaborate with Clean layout 

The Pixel Bakery website features a vibrant, modern design with an emphasis on motion and interactivity, appropriate for a creative studio specializing in animation. It has a neat, organized layout that uses space effectively, allowing the colorful and dynamic visuals to stand out. The design cleverly integrates motion graphics into the layout, enhancing the user experience and reflecting the studio's expertise in animation. The overall aesthetic is playful yet professional, making the site both appealing and easy to navigate.

3) Functionality and Usability

The Pixel Bakery website is highly functional and user-friendly, designed to offer a smooth and engaging experience. It has a responsive layout that adapts well to different devices, ensuring accessibility across desktops, tablets, and smartphones. Navigation is intuitive, with a clear menu structure that allows users to easily find information.

Navigation

Figure 2.8 Attractive Navigation to other function

Figure 2.9 Attractive Navigation to other function

The Pixel Bakery at has an engaging navigation system that enhances user interaction. The menu dynamically drops down from the top of the page when navigating between sections, which not only captures the user's attention but also keeps the navigation options readily accessible and visually prominent. This design choice effectively contributes to a smooth user experience by blending aesthetic appeal with functionality, making the site both attractive and easy to use

Forms

Figure 2.10 Attractive Animation Forms

The visual design of the Pixel Bakery website is vibrant and engaging, with a strong focus on motion graphics that reflect its specialization in animation and video production. The use of forms on the site is minimalistic yet functional, enhancing the user experience without overwhelming the visual elements. Forms are designed with a clear structure, making it easy for users to interact, whether they're starting a project or contacting the studio. The overall design effectively showcases the studio's creative capabilities while ensuring user interactions are straightforward and pleasant.

Interactive Elements

Figure 2.11 Interactive Element of Home Page (before)

Figure 2.12 Interactive Element of Home Page (after)

The Pixel Bakery website features a visually rich and playful design that aligns with its focus on animation and video production. A notable interactive element on the homepage is the progressive animation of a production line." As users stay longer on the page, the initially empty background gradually fills up with cute, animated icons. This interactive backdrop not only entertains but also visually engages visitors, enhancing the browsing experience by dynamically showcasing the studio's creative prowess in animation. This element specifically attracted you, adding a unique touch that differentiates the site from others.

4) Content Quality & Relevance

Figure 2.13 Clean introduction capabilities to users

The visual design of the Pixel Bakery website is both dynamic and illustrative, enhancing the content's quality and relevance. The website effectively uses detailed case studies and examples of past projects to convey their expertise in video and animation production. Each project is presented with rich visuals and concise descriptions, providing clear insights into their creative process and final outcomes. This presentation not only demonstrates their professional capabilities but also ensures that the content is directly relevant to potential clients in creative industries


5) Performance
The Pixel Bakery website is optimized for performance, ensuring fast load times and a smooth user experience, which is critical for a site heavy in multimedia content like animations and videos. The design is responsive, providing a consistent experience across different devices and screen sizes. Additionally, the use of modern web technologies likely contributes to its high performance, ensuring that even complex animations and interactive elements load efficiently. This focus on performance not only enhances user satisfaction but also supports SEO best practices. You can check out their website here for more detailed observations


Conclusion
After a careful analysis of the entire website, I found that the website has some very outstanding advantages, but of course, there are also some areas that could be improved


Strengths

• Vibrant Design: The entire website adopts a lively color scheme. The designers effectively use emotional design, where appropriate color combinations easily capture attention.
• Dynamic Animations: The use of numerous dynamic animations not only fulfills the desire to watch them completely but also enhances the overall attractiveness of the website.

Weakness

Waiting time : Given the heavy use of dynamic animations, the site might experience longer load times, which could affect user experience, particularly on slower internet connections.

 
Information Overload: The vibrant and dynamic content, while engaging, could overwhelm some users, making it hard to focus on specific information.

---

Exercise 2 

During Week 03, Mr Shamsul instructed as to complete our Exercise 02, which is replicate 2 existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given.

Choosen website: 1.  Ocean Health Index     2.  Bandit Runnning   

Through this exercise, we should follow the dimensions of the existing website from the width and height. This exercise is use to develop our design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices.

<iframe src="https://drive.google.com/file/d/1SEJzyK-xI1ANq1mLtM4j0LeUv0aMEEdz/preview" width="640" height="480" allow="autoplay"></iframe>

---