Interactive Design - Exercises
Week 1 - Week 14
JIN RONG / 0361701Interactive Design / Bachelor of Design (Hons) in Creative Media
Task 1 - Exercises
LECTURES
WEEK1
Usability: Designing Products for User Satisfaction
Introduction to Usability:
Usability is a component of User Experience (UX) that focuses on the
effectiveness, efficiency, and satisfaction with which a user can utilize
a product in specific contexts.
High usability helps users navigate and achieve their objectives without
expert knowledge, directing them through the simplest route to accomplish
tasks.
Principles of Usability:
Consistency: Ensuring visual and functional coherence across all
elements like navigation bars, page layouts, and fonts. It helps in
learning and recognizing interface patterns.
Simplicity: Reducing the number of steps in a process and using
clear symbols and terminology to minimize errors and enhance the user
interface.
Visibility: Making elements visible enough so that users are aware
of their options and how to use them.
Feedback: Providing clear and understandable responses to user
interactions, like changing colors of navigation items on hover.
Error Prevention: Designing interfaces to alert users about
potential errors, making it easier for them to operate without making
mistakes.
Common Usability Pitfalls:
Issues like complex interfaces, confusing navigation, poor feedback, and
inadequate error handling are highlighted as common obstacles to
usability.
WEEK 2 | Group Activity: Prototyping
During week 2 class, we learned about website usability. We were given
four scenarios for designing website interfaces by prototyping to solve
a particular problem or meet the user's needs. Then, each group is
tested on the usability of the website by another group.
The scenario assigned to our group:
WEEK3 Understanding Website Structure
Website structure is the foundation of a user-friendly and accessible
website.It affects user experience, SEO, and overall website performance.A
well-structured website helps users fnd information easily and keeps
themengaged.
Websites are typically divided into three key elements:
Header：The header, the top section of a webpage, typically includes the website's logo, navigation menu, and contact information, offering quick access to essential information and navigation.
Body：The main body of a webpage is the main content area, which includes multimedia elements such as text, images, and videos. Its content organization is crucial for readability.
Footer:The footer, located at the bottom of a webpage, typically includes copyright information, important page links, and contact details, offering closure and additional navigation options.
WEEK4 The Web and Language
in Class exercise
WEEK6
in Class exercise
INSTRUCTIONS
Exercise 1 Web Analysis
We have to choose two websites from the given link and review it, taking
notes of its design, layout, content, and functionality as well as the
strengths and weaknesses of the website, and consider how they impact
user experience. We have to also write a brief report summarizing our
findings and recommendations.
What to have in the analysis:
- Purpose and goals of the website, evaluate are they effectively
communicated
- Consider the functionality and usability of the website (navigation,
forms, and interactive elements)
- Evaluate the quality and relevance of the website's content (accuracy,
clarity, and organization)
- Consider website performance (load times, responsiveness and
compatibility with different devices and browsers)
Deliverables:
Write a brief report summarizing in not less 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).
Exercise 1:
Exercise 2:
Our task is to copy the login pages of two websites from the three
provided by the instructor. Through this exercise, we can understand how
grid systems are applied to website interface design.
Bandit Running https://banditrunning.com/
Ocean Health Index
https://www.oceanhealthindex.org/
Copied web page
exercise3
In this exercise, you will create a recipe card using HTML and CSS. The
goal is to design a basic webpage that displays a recipe's ingredients
and instructions in a visually appealing format. Choose ONE Recipe from the link below
Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions
Create an external CSS file named "style.css."
Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g.,.recipe-title,.ingredient-list), and ID selectors (e.g.,#instructions) to style different parts of the card.
Create an HTML file named "index.html."
Create a section that displays the following information:
Recipe title
Include necessary images for the page
List of ingredients
Step-by-step cooking instructions
Create an external CSS file named "style.css."
Apply CSS rules to style your recipe card.
Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g.,.recipe-title,.ingredient-list), and ID selectors (e.g.,#instructions) to style different parts of the card.
HTML
CSS
REFLECTION
EXERCISE 1:Through website analysis exercises, I realized that a
high-quality website should have a clear purpose, navigation, engaging
interactive elements, beautiful visual design, high-quality content, and
optimized web performance.
EXERCISE 2:Through website replication exercises, I have gained an
understanding of login page design and the elements included in login
pages, such as logos, navigation bars, and footers. I also observed that
the layout of website design is arranged based on a grid system. Before
this, I had never worked on a similar project, which was a very novel one.
He spent a lot of time trying to make it.
评论
发表评论