Interactive Design: Exercises
17/4/2024 - 12/6/2024 / Week 1 - Week 8
Tee Jia Ern / 0348512
Interactive Design / Bachelor of Design in Creative Media
Exercises
LECTURES
WEEK 1: Usability
Usability refers to the effectiveness and success of an user utilising a product or design
Principle of Usability
1. Consistency: Patterns to be noticed and learned by users
2. Simplicity: Apply symbols and terminology to make an obvious interface
3. Visibility: Inform users their options and the ways to access after looking at an interface
4. Feedback: Communicates the outcome of any interactions, notifies to the user the completion of a task or lack thereof
5. Error Prevention: Alerting users when an error is made, especially when humans are prone to mistakes
WEEK 3: Understanding Website Structure
- The basis of an accessible and user-friendly website is its structure.
- Generally, websites consist of three main components:
1. Header: Users may quickly access navigation and important information from the header.
2. Body: Text, pictures, movies, and other multimedia are all included.
3. Footer: Usually, it contains contact information, links to relevant pages, and copyright information.
Organizing Content: Make use of headings (H1, H2, H3, etc.) to establish a hierarchy.
Navigation Menus: User navigation on websites is facilitated by navigation menus.
WEEK 4: Web Standards
The methods via which people access the Web these days are far more varied.
Hardware and software issue:
- variety of browsers: Microsoft Internet Explorer, Firefox, Google Chrome
- variety of operating systems: Windows, Mac OS
- variety of screen resolutions: from 640 x 480 pixels to 1680 x 1050 pixels and beyond.
- Web standards must be followed in order to ensure that websites function on all devices and setups.
- The World Wide Web Consortium (W3C) is the principal body in charge of developing and upholding online standards.
- Standard markup languages include HTML and CSS.
- To locate the web server, your browser will initially establish a connection with a Domain Name System (DNS) server.
WEEK 5: ID and Class attribute
ID attribute
- Any HTML element is capable of having the ID attribute.
- It distinguishes this element from other items on the page in a unique way.
Extra Markup
- A class attribute can also be attached to any HTML element.
- There will be instances when you'll need a method to distinguish certain elements on the page from the others.
ID and Class attribute
Only if there is a CSS rule stating that it should be displayed differently will it alter their appearance.
Block elements
- Certain components in the browser window will always begin on a new line.
- Example: <h1>, <p>, <ul> and <li>
Inline elements
- Certain elements will consistently seem to continue in the same direction as their adjacent elements.
- Example: <b>, <i>, <em>, <a> and <img>
CSS Style Rules with HTML Elements
- A CSS rule contains two parts: a selector and a declaration.
- Selectors show which element to which the rule is applicable. The same guideline can be used for multiple elements if you divide the element names apart using commas.
- Declarations specify the styling for the elements that the selector refers to. A colon separates the two halves of a declaration, which are a property and a value.
- Property of an element indicates the aspects that you wish to modify. For instance, the border, colour, width, height, and font
- Values indicate the preferences you would like to apply to the selected characteristics. For instance, if you wish to define a colour property, the value for the components should be the desired colour.
Using External CSS
<link>
It should have three attributes: href, type, rel.
Using Internal CSS
<style>
- CSS colour, background, text formatting, fonts.
WEEK 7: CSS Selectors
Selectors are used to specify which elements colors, typefaces, spacing, and other styles should have particular styles applied to them.
Universal Selector: All items on the page are selected
The symbol for it is an asterisk (*). Take care when using it, as it can impact every element and result in ineffective CSS.
* {
padding:0;
margin:0;
}
Element Selector: HTML elements are selected using their tag name, which is the most basic kind of selector.
p {
text-align:left;
}
ID Selector: Element that has a particular id property. IDs in HTML documents have to be distinct. In order to pick an element with a particular ID, use the ID name and the # sign.
#my-element {
display:inline;
}
Class Selector: Focuses on components that have a particular class property. The same class may be shared by several items. To choose components with a particular.
.my-class {
margin:auto;
}
Descendant Selector: Chooses an element that comes from another element. A hierarchy of components to target can be specified.
.container a {
color:red;
text-decoration:none;
}
Attribute Selector: Chooses components based on a particular property value. It is employed to style elements like form inputs according to their characteristics.
input[type="text"] {
border: 1px solid blue;
}
Child Selector: Chooses elements that are offspring of another element directly.
ul > li {
list-style:none;
}
Pseudo-class Selector: Chooses elements according to how they are or where they are in relation to other elements. Common pseudo-classes include :hover, :active, :visited, :link, :focus and :nth-child(n)
a:hover {
color: red;
}
Pseudo-element Selector: Prefers to choose certain portions of an element than the element altogether. Common pseudo-elements include ::before and ::after.
p::first-line {
font-weight: bold;
}
Adjacent Sibling Selector: Syntax: element + adjacent. Chooses an element that comes right before a given element. Styling a component that comes just after a particular component.
h1 + p {
margin-top: 0;
}
General Sibling Selector: Syntax: element ~ siblings. Picks every element that is a sibling of the given element. putting a certain element's sister elements' style first.
h1 ~ p {
color: blue;
}
Complex Selectors: (n) Selects the nth child element.
ul li:nth-child(odd) {
background-color: lightgray;
}
INSTRUCTIONS
CLASS EXERCISE
WEEK 1: Surveying the Possibilities
Exercise 1: Website Analysis
Exercise 2: Website Replication
I chose Bandit Running as my first website replication. I used pictures from https://www.pexels.com/. I also added varying text sizes.
-01.png)
Fig 2.1 & Fig 2.2: Website Replication 1
Fig 2.3 & Fig 2.4: Website Replication 2
HTML and CSS Document Development
https://teejiaern-html.netlify.app
Fig 3.1: Webpage
tjemylife.netlify.app
Fig 3.2: Webpage 2
Exercise 3
Reference: https://www.101cookbooks.com/best-chocolate-cookies/
Website: https://tjerecipebook.netlify.app/
Exercise 4
https://tjecookies.netlify.app/
Fig 3.4: Webpage 4
Exercise 5
https://tjeweek10.netlify.app/
FEEDBACK
WEEK 2: Usability
General Feedback: There are a lot of nuances in web design. It is good to read more bout related topics, so we can better identify principles that are used.Specific Feedback: Add buttons that are intuitive to use, it's better the user can know immediately at one glace. Add more feedback buttons so the user can interact with it.
REFLECTION
Experience: I learned about web replication using adobe illustrator. I also learned a lot about web colour.
Observations: I am well versed in Adobe Illustrator, I did replicate illustrations in my free time.
Findings: Proficiency of the software used can aid the process smoothly.
Comments
Post a Comment