Interactive Design / Exercises 1, 2 & 3

October 09, 2024

Interactive Design / Exercises 1, 2 & 3

24 / 10 / 2024 — 12 / 12 / 2024 (Week 01 — Week 08)
JING KEYAO/ 0370732
GCD 60904 / Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Exercises 1 2 3

The website clearly offers private office space solutions for growing companies, as highlighted by the main header "Private Offices for Growing Teams." It effectively communicates key benefits such as flexible leases, customizable spaces, scalability, and affordability, making it clear how it meets the needs of diverse businesses.

2. Visual Design and Layout

- Color Scheme: The color palette is modern and professional, dominated by dark blue and white. The contrast between the background and text ensures readability, while accent colors (such as yellow for CTA buttons) effectively draw attention to key actions.

Fig.3a_02

- Typography: The typography is clean and consistent. Bold headings are paired with readable body text, making it easy for users to navigate through different sections. The hierarchy is well-established, helping to guide the user’s attention through the content.

- Imagery: The image mainly reflects the title of the website - "space", the picture uses the combination of modern and technology, with a sense of cosmic mystery.

3. Functionality and Usability

Fig.3a_02&03

- Navigation: The navigation is straightforward, with a clear menu at the top. The sections are well-labeled, making it easy for users to find relevant information about coworking spaces, pricing, and services.

- Forms and Interactive Elements: The booking forms are functional, but there is room for improvement in terms of interactivity. A more personalized and engaging experience (e.g., virtual tours or interactive floor plans) could enhance user involvement.

- Responsiveness: The site is fully responsive, adapting well to different screen sizes, including mobile devices.

4. Content Quality and Relevance

- Accuracy and Clarity: The content is clear and accurate, with no noticeable errors. It effectively informs the user about the services offered, but it could benefit from more engaging copy or customer testimonials to add a personal touch.

- Organization: Information is well-organized, with separate sections for coworking spaces, pricing, and contact information. However, a better balance between text and visuals could make the content more engaging.

5. Performance

- Load Times: The website loads relatively quickly, but performance could be further optimized, especially regarding high-quality images.

- Responsiveness and Compatibility: The site is responsive across various devices and works well on major browsers. However, compatibility testing across older browsers might be useful to ensure broader accessibility.

6. Recommendations:

- Improve visual energy and engagement through dynamic imagery and a more vibrant color palette.

- Add interactive features (e.g., virtual tours) to enhance user experience.

- Highlight community-building aspects and customer testimonials to strengthen emotional appeal.

Conclusion / Summary:

The Spaace website effectively communicates its purpose of offering private office space solutions for growing businesses. Its clean, modern design, with a professional color palette and straightforward layout, contributes to a cohesive user experience. The use of clear headings, well-organized content, and minimalistic imagery of sleek office spaces aligns well with its branding, positioning Spaace as a practical and flexible solution for companies in need of customizable work environments.

However, there is room for improvement. The lack of more engaging visual elements, such as people using the office spaces, slightly diminishes its relatability. The site’s navigation, though simple, could benefit from more interactive features like live chat or virtual tours to increase user engagement. Additionally, the site’s performance is solid, but the content could be further enhanced with testimonials to build trust. Overall, the Spaace website delivers a professional and focused experience, staying true to its purpose while maintaining clarity and functionality.

# Website 2：https://contra.com/project-rate-hiring-calculator/ created by Unseen-studio

Fig.3a_04

1. Purpose and Goal Achievement

- Purpose Clarity: The website’s goal is clear from the outset, providing a tool to calculate project rates for freelancers. The page immediately communicates its purpose with concise language and a prominent calculator interface.

- Goal Achievement: The website successfully fulfills its purpose by offering an intuitive, easy-to-use calculator that delivers quick results based on user input. It aligns well with Contra’s overall mission of empowering freelancers and clients.

2. Visual Design and Layout

- Color Scheme: The design uses a light, pastel color palette with soft pinks, purples, and dark blues, which reflects Contra’s modern and friendly branding. The soft hues create a clean and approachable interface, maintaining good readability.

Fig.3a_05&06

- Typography: The typography is well-balanced, with clear, modern fonts that provide good contrast against the background. Headings are bold and prominent, while body text is minimal yet informative.

Fig.3a_07

- Imagery and Animation: There are subtle, professional animations, such as smooth transitions when interacting with the calculator or hovering over buttons. These animations are minimalistic and enhance user engagement without distracting from the main content.

3. Functionality and Usability

- Navigation: The single-page layout eliminates complex navigation, making it easy for users to focus on the calculator. Clear buttons and a sticky header ensure users can always access other parts of the Contra website, like the sign-up page.

- Interactivity: The calculator offers a seamless experience with well-placed input fields and instant results based on the provided data. Interactivity is smooth, and the website provides immediate feedback without any lag.

4. Content Quality and Relevance

- Accuracy and Clarity: The content is minimal and to the point. It avoids jargon, making it accessible to a wide audience. The tool provides clear explanations for the inputs required, ensuring users understand what information to provide.

- Organization: The website is well-organized, with the calculator prominently featured and other supporting elements, like call-to-action buttons, subtly integrated without overshadowing the main function.

5. Performance

- Load Times: The site performs efficiently with fast load times. The use of lightweight animations and minimal media helps maintain smooth performance even on slower connections.

- Responsiveness and Compatibility: The website works seamlessly across various devices and browsers, ensuring a smooth and consistent user experience, regardless of platform.

6. Recommendations:

- Add tooltips or further guidance on how certain inputs influence the calculated rates to provide users with more context.

- Include downloadable or sharable rate results to enhance user retention and provide added convenience.

Conclusion / Summary:

In conclusion, the Contra Project Rate & Hiring Calculator provides a streamlined, user-friendly experience that effectively fulfills its purpose of helping users calculate freelance project rates. The minimalistic design, combined with smooth animations and a pastel color scheme, creates a visually appealing and professional interface. Its functionality is intuitive, with responsive inputs and instant feedback, ensuring a seamless experience across all devices. While the site performs well overall, adding additional guidance or interactive features could further enhance the user experience. Nonetheless, it is a well-executed tool that aligns perfectly with Contra's mission to support freelancers and clients alike.

Website Analysis_PDF

Exercise 2 Replicate a Website

- Website Replication 1 (Process)

First, according to the template, I found these corresponding pictures on the Internet.