Interactive Design : Exercises 1 & 2
Berlian Johanna / 0360054
Interactive Design/ Bachelor of Design in Creative Media (Hons)
Exercises
Exercise 1 Web Analysis
Instructions :
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.
Deliverables:
Write a brief report summarizing in not more than 500 words. You can include
a screen capture of each section or page of the website to explain. Make
sure that the formatting of the report is clear (heading/subheadings)
Fig 1.1 Screenshot of the website
Website 1
The website "Designing Science for Iris.ai"
Showcases a project by Dezea Digital for Iris.ai. We will evaluate this
website based on its design, layout, content, and functionality. The
strengths and weaknesses identified will be considered in terms of their
impact on the user experience.
Strength :
-
Design: The website has an elegant and modern design that aligns with
the subject matter, reflecting a scientific and tech-focused theme. The
use of high-quality images and graphics enhances visual appeal.
-
Layout: The layout is clean and well-structured, with a clear navigation
menu that makes it easy for users to explore the content. Content is
organized logically, with distinct sections that provide context and
information.
-
Content: The content is informative and effectively communicates the
project's goals and achievements.It uses a combination of text and
visuals, making it engaging and accessible. The case study format helps
users understand the project's real-world applications.
- Functionality: The website functions smoothly, with responsive design that adapts to different screen sizes and devices. Links and interactive elements work as expected, providing a seamless user experience. It loads quickly, ensuring users don't face long wait times.
Weaknesses:
-
Limited Interactivity: While the website effectively presents
information, it lacks interactive elements or features that could
further engage users. Incorporating multimedia or interactive elements
could enhance user interaction.
- Navigation: The navigation menu, although clear, could benefit from improved accessibility. It lacks a sticky menu that stays visible as users scroll down, making it easier to access different sections of the page.
Recommendations:
-
Enhance Interactivity: Introduce interactive elements such as
infographics, animations, or interactive graphs to make the content more
engaging and memorable.
-
Sticky Navigation: Implement a sticky navigation menu that remains
visible as users scroll down, ensuring easy access to all sections of
the website
-
Accessibility: Conduct an accessibility audit to ensure the website
meets web accessibility standards, making it more inclusive.
- Performance Optimization: Regularly monitor and optimize website performance to maintain fast load times and compatibility across various devices and browsers.
Fig 1.2 Screenshot of the website
Website 2
The website "Slingshot Intergalactic"
is evaluated based on its design, layout, content, and functionality.
We will identify its strengths and weaknesses and consider how they
impact the user experience.
Strengths:
-
Design: The website features a visually striking and unique design
that aligns with its creative and intergalactic theme. The use of
vibrant colors and dynamic animations adds an immersive and
captivating element.
-
Layout: The layout is unconventional yet intriguing, effectively
capturing the attention of visitors. Content is organized
creatively, encouraging users to explore further with a sense of
curiosity.
-
Content: The content is rich, offering a mix of multimedia,
including videos, images, and text. The storytelling approach
creates an engaging narrative, drawing users into the world of
Slingshot Intergalactic.
- Functionality: The website demonstrates solid functionality with responsive design for various devices. Navigation is intuitive, offering clear paths for users to explore different sections. Interactive elements, such as video playback, work smoothly.
Weaknesses:
-
Complexity: The unconventional design may confuse some users
initially, potentially impacting user-friendliness. Information
can be scattered, making it challenging for users to find specific
details or navigate with ease.
-
Load Times: The website's heavy use of animations and multimedia
may lead to longer load times, particularly for users with slower
internet connections.
- Impact on User Experience: The strengths of the website contribute to an immersive and visually stunning experience, engaging users with its unique design and storytelling. However, the complexity and potential slow load times may pose challenges for some users, particularly those seeking quick access to specific information.
Recommendations:
-
Simplify Navigation: Enhance the navigation system by providing
clearer pathways to essential sections or information, ensuring
users can easily find what they seek.
-
Optimize Performance: Optimize multimedia elements and animations
to improve load times, ensuring a seamless experience for all
users, including those on slower connections.
-
Accessibility: Conduct an accessibility audit to ensure the
website is accessible to all users, including those with
disabilities.
- User Guidance: Consider implementing tooltips or introductory elements to help users understand the unconventional design and how to navigate the website effectively.
Exercise 2 Web Replication
Instructions :
Your task is to replicate TWO (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. Follow the
dimensions of the existing website from the width and height. This
exercise will help you develop your design skills using software
such as Photoshop or Adobe Illustrator, and gain insights into web
design best practices. You can use any image from stock image or
free stock icon. The image that you will be using does not have to
be an exact image from the original website. You may replace it with
a similar image. Focus on the layout, type style, and color style.
To find similar typefaces/fonts, you can download fonts from Google
Fonts. You may need to screengrab the website and can begin to
replicate the page.
First Website : Ocean Health Index
2.1 Original and Replicate
2.2 Screenshot and PDF
Second Website : Morgan Stanley | Global Leader in Financial Services
2.3 Original and Replicate
2.4 Screenshot & PDF
All process and what I did in Exercise :
- Throughout the creative process, I strategically employed diverse shapes and sizes in each column to enhance visual appeal. This approach created an engaging and balanced layout. Shapes like rectangles, squares, and circles were thoughtfully integrated, breaking away from design norms to add variety while maintaining structure.
- Varying column sizes directed viewer attention, with larger ones emphasizing key content and smaller ones accommodating supplementary details. The inclusion of random images from the lecturer-recommended website added authenticity and relevance, elevating the user experience and aligning with the project's theme.
- Additionally, my careful font selection closely mirrored the chosen blog's style, ensuring a consistent and professional presentation. These design choices reflect my commitment to creating an engaging and authentic project, in harmony with the blog's aesthetics and goals.
Komentar
Posting Komentar