Interactive Design: Exercises
02.10.2024
Kiew Ting Yi (Nicole) / 0361143 / Bachelor of Design (Honours) in Creative MediaInteractive Design
Exercises
EXERCISE 1: Web Analysis
Website Analysis Report: Webby Awards & Awwwards
Introduction
This report provides an analysis of two prominent websites: The Webby Awards and Awwwards. The analysis focuses on various aspects of each website, including design, layout, content, functionality, and user experience (UX). The review identifies the strengths and weaknesses of each site and offers recommendations for improvement.
1. The Webby Awards (https://www.webbyawards.com/)
Purpose and Goals
The Webby Awards is a well-known platform dedicated to recognizing excellence across various digital domains such as websites, apps, online advertising, and videos. The main objective of the site is to celebrate and encourage innovation and creativity in the digital space by highlighting standout work.
Design and Layout
The design is minimalistic, relying on neutral colors like black, white, and gray, with touches of gold to represent achievements and recognition. The typography is modern and straightforward, using sans-serif fonts to create a polished and professional look.
However, the visual elements are somewhat lacking. The website doesn’t make extensive use of rich images or dynamic visuals, which could make the user experience more engaging, particularly given the creative audience it serves.
Strengths:
- Sleek and professional design: The clean layout conveys authority and professionalism.
- Strong brand presence: The design effectively reflects the prestige associated with The Webby Awards.
- Easy-to-navigate layout: Important sections, such as past winners and submission guidelines, are easy to locate.
Weaknesses:
- Minimal use of visuals: More dynamic imagery or videos could enhance the overall engagement for users.
- Text-heavy layout: The homepage could be more visually balanced with a better mix of text and images.
Functionality and Usability
The site is well-organized, with a straightforward top navigation menu. Sections like “Submit Your Work” and “Past Winners” are clearly labeled and easy to access, allowing for a seamless browsing experience.
It is optimized for mobile, scaling well across different devices. However, there’s room for improvement in terms of adding more interactive features to boost user engagement, especially in the sections showcasing winners.
Strengths:
- Mobile-friendly: The website is responsive, providing a smooth experience across different devices.
- Clear navigation: The structure is user-friendly, allowing visitors to find information easily.
- Quick load times: The website performs well in terms of speed, enhancing the browsing experience.
Weaknesses:
- Limited interactivity: The site lacks engaging interactive features that could make it more dynamic.
Content
The Webby Awards provides detailed and comprehensive information, particularly in its categories, submission rules, and past winners sections. The content is well-written, but the website could benefit from breaking up some of the heavier text sections with more visual content to make it easier to digest.
Strengths:
- Informative content: The site provides detailed, well-organized information relevant to its audience.
- High-quality writing: The tone is professional and aligns with the website’s prestigious branding.
Weaknesses:
- Text-heavy: Some sections could benefit from more visual content, like infographics or short videos, to complement the information presented.
Recommendations
1. Incorporate more dynamic visuals, such as images or animations, to enhance user engagement.
2. Introduce more interactive features to make the user experience more immersive.
3. Break up long sections of text with visual elements to improve readability.
2. Awwwards (https://www.awwwards.com/)
Purpose and Goals
Awwwards serves as a platform to showcase and celebrate innovative web design. Its primary objective is to inspire web designers and developers by featuring award-winning websites and highlighting the latest web design trends.
Design and Layout
Awwwards has a visually striking design, using large images and interactive elements that create a dynamic browsing experience. The layout is modern and engaging, utilizing a grid system to display award-winning websites, making it visually stimulating for its audience.
The site uses black and white as its base colors, accentuated by vibrant imagery from the websites it features. The typography is clean and contemporary, matching the creative focus of its audience.
Strengths:
- Visually compelling: The use of large, bold imagery immediately grabs attention and draws users in.
- Interactive design: Dynamic animations and transitions add a modern touch and make the site more engaging.
- Creative alignment: The design effectively captures the spirit of the creative professionals it targets.
Weaknesses:
- Overwhelming design: The heavy use of animations and visuals can be distracting for some users.
- Cluttered sections: At times, the grid system can make certain areas feel cluttered, especially when a large number of visuals are presented.
Functionality and Usability
The navigation on Awwwards is user-friendly and intuitive. The sections are clearly organized into categories like “Nominees,” “Winners,” and “Submit Your Site,” making it easy for users to find what they need.
While the site’s interactive elements enhance the user experience, they can sometimes impact performance, particularly for users with slower internet connections.
Strengths:
- Highly interactive: The use of hover effects and transitions provides a more engaging browsing experience.
- Mobile responsiveness: The website maintains its design integrity across various devices, providing a consistent experience.
- Engaging user journey: The interactive features encourage exploration and interaction.
Weaknesses:
- Performance issues: The heavy use of interactive elements can slow down the site’s performance on less powerful devices.
- Complex for non-technical users: The dynamic design might be overwhelming for users unfamiliar with interactive web layouts.
Content
Awwwards delivers content that is highly relevant to its target audience of web designers and developers. The focus on showcasing top-tier web design provides inspiration and insight into industry trends. The content is well-balanced between text, images, and videos, providing a rich, engaging experience.
Strengths:
- Inspirational content: The site’s emphasis on showcasing the best web designs is valuable for designers and developers seeking inspiration.
- Varied content formats: The use of visuals, text, and video creates a balanced and engaging user experience.
Weaknesses:
- Visual overload: In some instances, the heavy reliance on visuals can overshadow the actual written content or explanations.
Recommendations
1. Optimize load times by reducing the impact of interactive elements on performance.
2. Simplify the user experience for less tech-savvy visitors by offering more guidance or tutorials.
3. Ensure consistency in the layout to avoid overcrowding in certain sections.
Conclusion
The Webby Awards and Awwwards offer strong user experiences in
different ways. While The Webby Awards focuses on professionalism and
clarity, Awwwards pushes the boundaries of interactive and creative
web design. Both websites have room for improvement, with The Webby
Awards needing more engaging visuals and interactivity, and Awwwards
needing better performance optimization and simplification for broader
audiences.
2nd Page: Ocean Health Index
I used my knowledge of kerning and spacing from Typography to achieve this.
Here is my replication:
I actually regretted using ChatGPT on this project because I find that it tends to generate the same type of code and it creates this "blocky-wide" type of design that isn't really to my liking. I also saw my peers coding from scratch and it showed exactly like an A4 CV, which I would like to improve on coding to make it better.
