Interactive Design - Weekly Post & Exercises
26/09/2024 - 02/01/2025/ Week 1 - Week 14
GUAN YAXIN / 0370687
Interactive Design / Bachelor of Design (Hons) in Creative Media
LECTURES
WEEK 1
we have no class on week 1
WEEK 2 - Usability: Designing Products for User Satisfaction
The Concept of Usability
1.Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.
2.It is a part of User Experience (UX) Design. It is the second level of UX Design
3.A design’s usability depends on how well its features accommodate users’ needs and contexts.
Key Principle of Usability
1.Consistency
（1）Consistency is a key factor in web design for both visual elements and functionality.
（2）Consistency ensures that your website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars.
（3）Consistent design is intuitive design.
（4）It includes consistent navigation system, page layout and menu structure, fonts and typography and branding in web design
（5）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. For example, if a website’s buttons are protruding boxes with labels on them, then all of the website’s buttons should look like that. Similarly, if a backward arrow denotes the back button, then it should not be changed to something else because that would be inconsistent with what the user has learned.
Example of Consistency in design:
Apple.com
Sime Darby.com.my
153joombas.com
2.Simplicity
（1）The principle that user interfaces should be “simple” for users.
（2）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.
（3）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.Users should know, just by looking at an interface, what their options are and how to access them.
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.An example of feedback is when you’re on desktops or laptops, when you hover over navigation items, you expect them to change color or load a submenu.
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.
WEEK 3 - Usability: Understanding Website Structure
The Reason Website Structure Matters
1.Website structure is the foundation of a user-friendly and accessible website.
2.It affects user experience, SEO, and overall website performance.
3.A well-structured website helps users find information easily and keeps them engaged.
The Three Key Elements
1.Header
（1）The header is the top section of a webpage.
（2）It usually contains the website's logo, navigation menu, and contact information.
（3）The header provides users with quick access to essential information and navigation.
3.Footer
（1）The footer is located at the bottom of a webpage.
（2）It typically includes copyright information, links to important pages, and contact details.
（3）The footer provides closure to the webpage and additional navigation options.
WEEK 4 - The Web and Language
Why Web Standards?
1.To make internet a better place, for both developers and visitors, it is important that both browsers and Web developers follow the Web standards.
2.When developers follow the Web standards, the development is simplified, since it is easier for a developer to understand another's coding.
3.Using Web standards will ensure that all browsers will display your Web site properly, without time-consuming rewrites.
How The Web Work
1.When you connect to the web, you do so via an ISP.You type a domain name or web address into your browser to visit a site;
eg: www.google.com, www.bbc.co.uk
2.Your computer contacts a network of servers called DNS servers. These act like phone book; they tell your computer the IP address associated with the requested domain name.Every device on the web has a unique IP address;it’s like the telephone number for that computer
3.The unique number that the DNS server returns to your computer allows your browser to contact the web server that hosts the website you requested. A web server is a computer that is constantly connected to the web, and is set up especially to send web pages to users
4.The web server then sends the page you requested back to your web browser
HTML
1.The HTML code is made up of characters that live inside angled brackets <>.These are called HTML elements
2.Elements are usually made up of two tags: an opening tag and a closing tag.
Example：<element>Information</element>
Each element tells the browser something about the information that sits between its opening and closing tags
Attributes
1.Attributes provide additional information about the contents of an element.
2.They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.
Body, Head & Title
1.<body>
You met the <body> element in the first example created.Everything inside this element is shown inside the main browser window.
2.<head>
Before the <body> element you will often see a <head> element. This contain information about the page.You will usually find a <title> element inside the <head> element
3.<title>
The contents of the <title> element are either shown in the top of the browser (tab bar)
Headings
HTML has six levels of headings:
<h1> main headings
<h2> subheadings
If there are further sections under the subheadings then the <h3> element is used and so on..
Paragraph
To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag
Bold & Italic
1.<b>
By enclosing words in the tags <b> and </b> we can make characters appear bold.
The <b> element also represents a section of text that would be presented in a visually different way (for example key word in a paragraph) although the use of <b> element does not imply any additional meaning.
2.<i>
By enclosing words in the tags <i> and </i> we can make characters appear italic
The <i> element also represents a section of text that would be said in a different way from surrounding content- such as technical terms,names of ships, foreign words,thoughts, or other terms that would usually be italicised
Lists
1.<ol>+<li>
（1）<ol>
The ordered list is created with the <ol> element
（2）<li>
Each item in the lis is placed between and opening <li> tag and a closing </li> tag(the li stands for list item.)Browser indent list by default
2.<ul>+<li>
（1）<ul>
The unordered list is created with the <ul> element
（2）<li>
Each item in the lis is placed between and opening<li> tag and a closing </li> tag (the li stands for list item.)Browser indent list by default
Links
Links are the defining features of the web because they allow you to move from one web page to another
Commonly type of links:
• Links from one website to another
• Links to one page to another on the same website
• Links from part of a web page to another part of the same page
• Links that open in a new browser window (tab)
1.Writing Links
Links are created using the <a> element
User can click on anything between the opening<a>tag and the closing </a> tag
Specify which page to link using the href attribute
2.Linking To Other Sites
（1）<a>
Links are created using the <a> element which has an attribute called href
The value of the href attributes is the page that you want user to go to when they click on the link
When you link to a different website, the value of the href attribute will be the full web address for the site, also know as an absolute URL
Browsers show links in blue with an underline by default
（2）<img>
The <img> HTML tag serves the purpose of incorporating images into a web page.
In the context of web design, it's important to note that images are not physically inserted within a
web page; instead, they are linked to it. The <img> tag essentially establishes a designated space
for displaying the referenced image.
It's worth mentioning that the <img> tag itself is void of content and is solely comprised of
attributes, eliminating the need for a closing tag.
When using the <img> tag, two essential attributes must be included:
src - This attribute specifies the path to the image.
alt - This attribute provides alternative text for the image, which is essential for accessibility
Title - This attribute provides tool tip of the image in the browser
WEEK 5 - HTML&CSS
Extra Markup
1.ID attribute
• Every HTML element can carry the ID attribute
• It is used to uniquely identify the element from other elements on the page
• It is important that no two elements have the same value for their ID attributes (otherwise the value is no longer unique)
• Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page
• Eg: you might want to assign one paragraph within the page a different style from all of the other paragraphs
2.Class attribute
• Every HTML element can also carry a class attribute.
• Sometimes you will want a way to identify several elements as being different from the other elements on the page
• For example, you might have some paragraph of the that contain information that is more important than others and want to distinguish between these elements
• The class attribute on any elements can share the same value or name
3.ID and Class attribute
• By default, using these attributes does not affect the presentation of an element.
• It will only change their appearance if there is a CSS rule that indicates it should be displayed differently
4.Block elements
• Some elements will always appear to start on a new line in the browser window
• It is know as block level elements
• Example: <h1>, <p>, <ul> and <li>
5.Inline elements
• Some elements will always appear to continue on the same line as their neighbouring elements
• It is know as inline elements
• Example: <b>, <i>, <em>, <a> and <img>
Introducing CSS
• 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
CSS Style Rules with HTML Elements
CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed.
A CSS rule contains two parts: a selector and a declaration
CSS Properties Affect how Elements are Displayed
CSS declaration sit inside curly brackets and each is made up of two parts; a property and a value,separated by a colon.
You can specify several properties in one declarations each separated by a semi-colon
Method to Employ CSS
1.<link>
• The <link> element can be used in an HTML document to tell the browser where to find the CSS file used to style the page
• It is an empty element and it lives inside the <head>element
• It should use three attributes:
• href; To specify the path to the CSS file
• type; This attribute specifies the type of document being linked to. The value should be text/css
• rel; Specifies the relationship between the HTML page and the file linked to. The value should be stylesheet when linking to a CSS file
• An HTML page can use more than one CSS style sheet.
• To do this it could have a <link> element for every CSS file it uses
• For example, one authors use one CSS to control the presentation (fonts and colors) and a second to control the layout
2.<style>
• You can also include CSS rules within an HTML page by placing them inside a <style> element, which usually sits inside the <head> element of the page
• The <style> element should use the type attribute to indicate that the styles are specified in CSS
• The value should be text/css
• When building a site with more than one page, you should use an external CSS style sheet. This:
• Allow all pages to use the same style rules (rather than repeating them in each page)
• Keeps the content separate from how the page looks
• Means you can change the styles used across all pages by altering just one file (rather than each individual page)
WEEK 7 - CSS Selectors
CSS Selectors
• CSS (Cascading Style Sheets) selectors are a fundamental part of CSS that allow you to target and style HTML elements on a web page.
• Selectors are used to define which elements should receive specific styles, such as colors,fonts, spacing, and more.
• They are a crucial part of web development because they enable you to control the presentation and layout of your web pages.
1.Universal Selector: Selects all elements on the page.
It's represented by an asterisk (*). Use it with caution,as it can affect all elements and lead to inefficient CSS.
* {
padding:0;
margin:0;
}
2.Element Selector: The simplest type of selector, it targets HTML elements by their tag name.
p {
text-align:left;
}
3.ID Selector: Targets an element with a specific id attribute. IDs must be unique within an HTML document. To select an element with a specific ID,use a # symbol followed by the ID name.
#my-element {
display:inline;
}
4.Class Selector: Targets elements with a specific class attribute. Multiple elements can share the same class. To select elements with a specific class, use a . symbol followed by the class name.
.my-class {
margin:auto;
}
5.Descendant Selector: Selects an element that is a descendant of another element. You can specify a hierarchy of elements to target. For example, to style all <a> elements inside a <div> with class "container,"
.container a {
color:red;
text-decoration:none;
}
6.Attribute Selector: Selects elements with a specific attribute value. It is used to styling elements based on their attributes, such as form inputs.
Syntax: [attribute=value]
Example:
input[type="text"] {
border: 1px solid blue;
}
7.Child Selector: Selects elements that are direct
children of another element. To select only the
immediate <li> children of an <ul>, you can use:
ul > li {
list-style:none;
}
8.Pseudo-class Selector: Selects elements based on their state or position in relation to other elements.
Common pseudo-classes
include :hover, :active, :visited, :link, :focus,
and :nth-child(n)
a:hover {
color: red;
}
9.Pseudo-element Selector: Selects parts of an element rather than the element itself. Common pseudo-elements include ::before and ::after, which are used to add content before or after an element.
p::first-line {
font-weight: bold;
}
10.Adjacent Sibling Selector:
Syntax: element + adjacent.
Selects an element that is immediately preceded by aspecified element. Styling an element that directly follows another specific element.
Example:
h1 + p {
margin-top: 0;
}
11.General Sibling Selector:
Syntax: element ~ siblings. Selects all elements that are siblings of a specified element. Styling all sibling elements that follow a specified element.
Example:
h1 ~ p {
color: blue;
}
12.Complex Selectors
(n): Selects the nth child element.
Example:
ul li:nth-child(odd) {
background-color: lightgray;
}
(n): Selects the nth child of a specific type among its siblings.
Example:
p:nth-of-type(2) {
font-size: 18px;
}
Why There Are Many Selectors
• CSS provides a variety of selectors to offer flexibility and granularity when targeting HTML elements for styling.
• The reason for having many different selectors is to give web developers the ability to precisely target and style specific elements or groups of elements based on their structure, attributes, state, or position within the document.
• Here are some key reasons why there are so many selectors in CSS:
1.Specificity:
Different situations may require different levels of specificity when selecting elements.
For instance, you may want to style a specific element with an ID differently from other
elements with the same class.
The availability of various selectors allows you to define the specificity you need.
2.Structure:
Web pages often have complex structures with nested elements.
Selectors like descendant selectors (parent element > child element) and sibling selectors (element + adjacent element) enable you to target elements within specific structural contexts.
3.Attribute-Based Selection:
You may want to style elements based on their attributes or attribute values.
Attribute selectors like [attribute="value"] allow you to do this.
4.Pseudo-Classes and Pseudo-Elements:
These selectors help you style elements based on their state or position within the document.
For example, you can style links differently when they are hovered over (:hover) or style the first letter of a paragraph (::first-letter) differently.
5.Responsive Design:
Media queries, a type of selector, enable you to apply different styles to elements based on the user's device characteristics, such as screen size, orientation, or resolution.
This is essential for creating responsive web designs.
6.Stateful Interactions:
Selectors like :focus, :active, and :checked allow you to style elements based on user interactions.
For example, you can style a button differently when it's clicked (:active) or style form elements when they are in focus (:focus).
7.Cross-Browser Compatibility:
Different web browsers may interpret and apply CSS rules differently.
Having a variety of selectors allows developers to use techniques that work consistently across different browsers.
8.Ease of Maintenance:
Depending on the structure and requirements of a web page, certain selectors may make CSS easier to maintain.
For example, using class selectors can make it simpler to update styles consistently for multiple elements.
9.Accessibility:
Properly structured and labeled HTML elements can be targeted and styled using CSS selectors to improve accessibility by providing styles that enhance readability and usability for individuals with disabilities.
WEEK 9 - Box Model-Layout in CSS
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.
1.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.
2.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.
Box Model inCSS
• The following illustration shows the various layers in the box model:
• The size of each of the layers in the box model can be specified using the usual CSS units of measure (em, %, and px).
• For example, consider the following <p>, which is wrapped inside a <div>:We can apply the following CSS to the paragraph tag in order to control the size of the padding, border, and margin of the paragraph:
1.div {
background-color: red;
padding: 0;
border: 1px solid black;
margin: 0;
}
2.p {
background-color: white;
padding: 1em;
border-width: 10px;
border-style: solid;
border-color: blue;
margin: 10px !important;
}
WEEK 10 - Position Property
What is the CSS position property?
The position property in CSS is used to control the positioning of an element within its containing element. It determines how an element is displayed in relation to other elements on a web page. The position property has several possible values, each of which affects the element's behavior differently:
Static (default): Elements with position: static; are positioned in the normal flow of the document. They are not affected by the top, right, bottom, or left properties. This is the default behavior for most HTML elements
Position: Static (default)
Elements with position: static; are positioned in the normal flow of the document. They are not affected by the top, right, bottom, or left properties.
This is the default behavior for most HTML elements.
.static-element {
position: static;
}
Position: Relative
When an element has position: relative;, you can use the top, right, bottom, and left properties to move it relative to its normal position in the document flow. Other elements on the page will still occupy the original space of the element.
.relative-element {
position: relative;
top: 20px;
left: 10px;
}
Position: Absolute
Elements with position: absolute; are positioned relative to the nearest ancestor with a position value other than static (usually relative, absolute, or fixed). If no such ancestor exists, the element is positioned relative to the initial containing block (typically the viewport).
.absolute-element {
position: absolute;
top: 50px;
left: 100px;
}
Position: Fixed
Elements with position: fixed; are positioned relative to the viewport, and they do not move when the page is scrolled. They stay in the same position even if the user scrolls up or down.
.fixed-element {
position: fixed;
top: 10px;
right: 20px;
}
Position: Sticky
Elements with position: sticky; are initially positioned according to the normal flow of the document. However, when the element reaches a specified scroll position (defined by top, right, bottom, or left), it becomes "sticky" and remains fixed at that position while the user continues scrolling.
.sticky-element {
position: sticky;
top: 20px;
}
INTRODUCTION
EXERCISE
Exercise 1: Website Analysis
We need to choose two websites from the links given by the teacher and write a short report. The requirements are
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.
The two websites I chose are https://orkenworld.com/ and https://www.pbs.org/wnet/americanmasters/
I want to analyze https://orkenworld.com/ first.
1. Purpose and Goals: The website aims to promote a fantasy universe primarily through novels and crowdfunding activities. Its approach to promotion is relatively novel; however, it may only attract fantasy enthusiasts, limiting broader interest. This narrow audience can hinder the site's long-term growth.
2. Visual Design and Layout: The overall design features a dark color scheme that aligns with the fantasy theme, creating a visually appealing layout. However, the complexity of the design, particularly the use of certain graphics, can lead to visual fatigue. Navigation is convoluted and not immediately clear, negatively impacting user experience.
3. Functionality and Usability: The loading speed is generally slow, and interactions between different modules require manual operations, lacking smooth transitions. While the navigation design is innovative, it isn't prominent enough for users to locate it quickly, which can deter interest. The interactive elements, such as buttons, are quite basic and lack standout design.
4. Content Quality and Relevance: The content is high quality, with themes and styles that appeal to fantasy enthusiasts. However, the content across sections lacks coherence and can feel fragmented, with weak logical connections. The design limitations also alienate potential users who may not be interested in fantasy elements.
5. Performance: Loading times for different modules are long, and responsiveness is not particularly strong. This diminishes the user experience and can diminish patience and curiosity. Compatibility varies across different devices, indicating a need for improvement.
The website aims to attract users through its fantasy-themed content and innovative design, but its audience is limited due to the niche subject matter. While the visual design is engaging and of high quality, unclear navigation, complex layout, and fragmented content hinder the user experience. The creative team needs to improve performance, content coherence, and device compatibility to expand its audience and increase traffic.
The next website I want to analyze https://www.pbs.org/wnet/americanmasters/
1. Purpose and Goals: The website aims to showcase American arts and culture through social platforms, offering high-quality content that introduces notable artists and their works, broadening people's perspectives. However, the limited focus on art may only appeal to art enthusiasts, restricting the audience.
2. Visual Design and Layout: It uses a predominantly dark color scheme with large, vivid images to attract attention. The layout is neat, with large fonts for easy reading, but overall lacks impact and doesn't fully reflect its artistic focus.
3. Functionality and Usability: The navigation is simple and user-friendly, with well-designed interactive elements. Users can quickly find what they need.
4. Content Quality and Relevance: The content is of high quality and aligns well with the site's theme. It's particularly appealing to art and culture enthusiasts due to its professional tone. However, this specialization may deter users uninterested in the arts, limiting diversity.
5. Performance: The website loads quickly, responds well, and is compatible across devices. However, multimedia elements could load faster, and improvements in this area would enhance the user experience.
In conclusion, the website effectively promotes American arts and culture with quality content, easy navigation, and good performance. However, it could benefit from more creative design to better reflect its artistic theme and from making the content more accessible to a broader audience, potentially increasing its appeal.
Exercise 2: Web Replication
We need to copy two websites from the three links given by the teacher, which can help us better understand the structure of the web page. We can use the exact image of the original website, replace it with similar images, pay attention to the layout font style and color style, and find similar fonts
The two websites I chose are https://www.oceanhealthindex.org/?authuser=0 and https://www.morganstanley.com/
This is a screenshot of the original website
final website（1）
final website（2）
Experience
During this period of study, I came into contact with a lot of knowledge about interaction design. With the help of practice, I applied what I learned, such as analyzing websites and creating a simple web page.
Observation
Interaction design needs to balance functionality and aesthetics, which is a very important skill.
Findings
When designing a website, responsive design should be focused on.
评论
发表评论