Interactive Design - Exercise
28.8.2023 - 27.11.2023(Week1- Week 14)
Low Li Vern/ 0362678
Interactive Design / Bachelor of Design (Honours) in Creative Media
Exercise
- Principle of Usability
1. Consistency
2. Simplicity
3. Visibility
4. Feedback
5. Error Prevention
Interactive Design / Bachelor of Design (Honours) in Creative Media
Exercise
LECTURES
Week 2
Introduction to Usability
- What is usability?
Usability: Designing Products for User Satisfaction
Usability refers to how effectively, efficiently, and successfully a
particular user can utilise a product or design in a certain situation.
It is a part of User Experience (UX) Design. It is the second level of UX
Design
A design’s usability depends on how well its features accommodate users’
needs and contexts.
1. Consistency
2. Simplicity
3. Visibility
4. Feedback
5. Error Prevention
1. Consistency
- Consistency is a key factor in web design for both visual elements and
functionality.
- Consistency
ensures that your website looks coherent and works
harmoniously
across all its different elements, such as headers, footers, sidebars
and navigation bars.
- Consistency is key for these patterns to be recognized and learned by
users. If similar-looking things do not produce a similar output, the
user is bound to become frustrated.
Example : Apple.com, Sime Darby.com.my, 153joombas.com.
2. Simplicity
- The principle that user interfaces should be
“simple” for users.
- Simplicity is used loosely to refer to the need to
minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as
possible, and to make it difficult to make mistakes.
- Incorporating simplicity in a designs will help design better user
interfaces by
helping the users achieve their goals faster and more
efficiently,
all while enjoying a great user experience.
3. Visibility
- Visibility is the basic principle that the
more visible an element is, the more likely users will know about them
and how to use them.
Equally important is the opposite: when something is out of sight, it’s
difficult to know about and use.
4. Feedback
- Feedback
communicates the results
of any interaction, making it both visible and understandable. Its job is
to give the user a signal that they (or the product) have succeeded or
failed at performing a task.
5. Error Prevention
- It involves
alerting a user when they’re making an error, with the intention to make it easy for them to do whatever it is they
are doing without making a mistake. The main reason this principle of
error prevention is important is that we humans are prone to- and will
always make mistakes.
Common Usability Pitfalls and How to Avoid Them
-Complex interfaces
-Confusing navigation
-Poor feedback
-Inadequate error handling
Week 3
Understand Website Structure
-Why Website Structure Matters?
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 find information easily and keeps them engaged.
-Websites are typically divided into three key elements:
1 .Header
2. Body
3. Footer
1. Header
The header is the
top section of a webpage.
It usually contains the website's logo, navigation menu, and contact
information.
The header provides users with quick access to essential information and
navigation.
2. Body
The body is the
main content area of a webpage.
It contains text, images, videos, and other multimedia elements.
Proper organization of content within the body is crucial for
readability.
3. Footer
The footer is
located at the bottom of a webpage.
It typically includes copyright information, links to important pages,
and contact details.
The footer provides closure to the webpage and additional navigation
options.
Week 4
Introduction to CSS ( Cascading Style Sheet )
• CSS allows you to create rules that specify how
the content of an element should appear
• Example, you can set the background of the
page is cream, all paragraphs should appear in
gray using the Arial typeface, or that all level
header should be in a blue, italic, Helvetica
typeface
Week 7/ Box Model in CSS
The Display Property
Display is CSS's most important property for controlling layout.
Every element has a default display value depending on what type of element it is.
The default for most elements is usually block or inline.
a. Block-level element
<div> is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can.
b. Inline Element
<span> is the standard inline element. An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph.
c. Other Display Properties
Inline-block
Flex
Grid
Box Model in CSS
Most HTML elements are containers. Consider some of the HTML elements we've used so far: body, p, h1, h2, div, ul, ol, li.
Each of these is a container, or box.
Each box has three layers that surround its content. The layers are, in order from inside to outside:
1.Padding
2.Border
3.Margin
INSTRUCTIONS
Exercises
Week 1
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)
This is the
WEBSITE LINK
Website that I have chosen :
I chose the first website because I appreciate its innovative approach
to designing 3D animations. The creative use of animation on this
website effectively conveys information about the sea in an interactive
manner, allowing users to control their exploration.
Regarding the second website, I'm drawn to its layout and color scheme.
The design creates a visually pleasing and comfortable effect, effectively
capturing the user's attention and facilitating a focused engagement with
the website's information.
Week 2
Our 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.
Websites Link :
I have choose Morgan Stanley and Ocean Health Index to replicate. First I
take a long screenshot of the website.
.png)
I spread three artboard for Morgan Stanley and two artboard for Ocean
Health Index as Mr Shamsul says that if I use only one artboard the
picture exported will be to long.
Progress in Adobe Illustrator :
Final Task Morgan Stanley
Week 4 | In-class Exercise
Create a Personal Profile Webpage
Description: In this task, create a personal profile webpage that
includes basic information about yourselves. This exercise will require
to apply the HTML skills we've learned.
Instructions:
HTML Structure:
Begin by creating a new HTML file and setting up the basic structure
with <!DOCTYPE html>, <html>, <head>, and <body>
elements.
Page Title:
Inside the <head> element, add a <title> element with a
title for your webpage, like "My Profile."
Header Section:
In the <body> section, create a header section using the
<header> element.
Add a main heading (<h1>) with your name.
Optionally, include a subheading (<h2>) with a brief tagline or
description.
About Me:
Create a section for information about yourself.
Include a <h3> heading saying "About Me."
Add a couple of paragraphs (<p>) with a brief introduction of
yourself.
My Interests:
Create another section to list your interests or hobbies.
Use an appropriate heading, such as <h3>: "My Interests."
Add an introduction for this section using <p>.
Create an unordered list (<ul>) and list some (more than 3) of
your interests using <li> elements.
My Photo:
Insert an image of yourself using the <img> tag.
Specify the image source (src attribute) and provide a brief
description using the alt attribute.
Contact Information:
Create a contact section with an appropriate heading.
Include your email address and optionally other contact details like
your social media profiles or phone number using the list item.
Testing and Validation:
Test your webpage by opening it in a web browser to ensure everything
displays correctly.
Use online HTML validators to check for any syntax errors and fix them
if needed.
Publish Your Webpage:
If possible, publish your webpage online using a free web hosting
service or GitHub Pages.
Photo used :
Final Link of my webpage : https://lowlivern-exercise.netlify.app/
Week 6
In this exercise, we 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.
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.
I've decided to create a recipe card for my favorite dessert, the lemon
cheese tart. To begin, I watched a lecture and tutorial video to gain a
deeper understanding of CSS. Following that, I conducted research on
Google to gather information about the ingredients and step-by-step
instructions for making a lemon cheese tart. Armed with this knowledge,
I proceeded to write the HTML code for the recipe card.
Research on Lemon Cheese Tart Information :
https://nourishedendeavors.com/lemon-cheesecake-tart/
INGREDIENTS :
FOR THE CRUST
1½ cups/190 grams all-purpose flour
½ cup/50 grams confectioners’ sugar
½ teaspoon fine salt
Finely grated zest of 1 lemon
10 tablespoons/142 grams unsalted butter, cold and cut into cubes, plus
more for greasing the pan
1 egg yolk
FOR THE FILLING
16ounces/450 grams cream cheese, softened to room temperature
½ cup/100 grams granulated sugar
Finely grated zest of 2 lemons plus ¼ cup freshly squeezed juice
Pinch fine salt
2large eggs
PREPARATION :
Lemon cheesecake filling
In the bowl of a stand mixer with the whisk attachment whip the cream
with powdered sugar to soft peaks – set aside.
In a separate bowl, combine cream cheese, lemon curd, and vanilla
extract – combine well making sure there are no lumps.
Pro tip – I like to use a whisk to ensure there are no lumps. You can
also place it in the mixer bowl with the whisk attachment.
Save 1/4 cup whipped cream for the top and fold the rest of the
whipped cream in the lemon curd and cream cheese mixture.
Pro tip – Taste and adjust for sweetness and tang. If necessary add
one or 2 tbsp of powdered sugar and 1 to 2 tsp of lemon juice to your
liking.
Assemble
Transfer filling to a piping bag and pipe a generous amount into each
2-inch tart shell.
Pro tip – you can also do this with a spoon but the piping bag makes
it easy
Garnish each tart with a little whipped cream, lemon curd, and a slice
of lemon. Chill the tarts in the fridge for at least 2 hours or until
ready to serve.
Pro tip – I like to dust them powdered sugar just before servings.
I incorporate hyperlinks to direct users to specific sections of the
webpage which is Ingredients and Preparations of the lemon cheese
tart, ensuring easy access to the information they seek.
Following that, I establish a link between the HTML webpage and a CSS file named "style.css." Using CSS selectors, I customize various aspects of the card, including font color, font size, and the background image.
The chosen color scheme for the webpage consists of purple and yellow.
I opt for using purple for headings and yellow for the background.
Initially, I contemplate switching to a different font; however, in
the end, I opt to retain the current font as it appears well-balanced.
I adjust the font size of the headings to 15pt to enhance
readability.
Final Link of Recipe card webpage : https://recipe0362678.netlify.app/
THE END
Comments
Post a Comment