mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-24 05:14:06 -06:00
update quartz
This commit is contained in:
Jet Hughes
parent
f8d5fb58bb
commit
8df90a1ae8
@ -4,9 +4,9 @@ aliases:
|
||||
tags:
|
||||
- info201
|
||||
- lecture
|
||||
sr-due: 2022-05-05
|
||||
sr-interval: 20
|
||||
sr-ease: 250
|
||||
sr-due: 2022-07-23
|
||||
sr-interval: 75
|
||||
sr-ease: 270
|
||||
---
|
||||
|
||||
[class-diagrams](notes/class-diagrams.md)
|
||||
@ -10,5 +10,5 @@ sr-ease: 250
|
||||
---
|
||||
|
||||
- [representation-and-distributing-cognition](notes/representation-and-distributing-cognition.md)
|
||||
- [visual-design-typography](notes/visual-design-typography.md)]
|
||||
- [typography](notes/typography.md)]
|
||||
- [visual-design](notes/visual-design.md)
|
||||
@ -4,104 +4,16 @@ aliases:
|
||||
tags:
|
||||
- info203
|
||||
- lecture
|
||||
sr-due: 2022-05-06
|
||||
sr-interval: 3
|
||||
sr-due: 2022-05-20
|
||||
sr-interval: 11
|
||||
sr-ease: 250
|
||||
---
|
||||
|
||||
# Grouping
|
||||
Gestaltkriterien “Gestalt Principles” - Law of Proximity
|
||||
|
||||
Our brain is trying to help us understand the world. For example we look for eye contact. Our brain is looking with our eyes for contrast, parrallel lines, etc. Criteria that help us understand the world.
|
||||
|
||||
The Gestalt priciples have identified how our functions. One of these is the law of proximity. Things that a close to each other are grouped together by our brain.
|
||||
|
||||
[](https://i.imgur.com/m8lTltN.png)[](https://i.imgur.com/EMeV5Gg.png)
|
||||
- [layout](notes/layout.md)
|
||||
- [closure](notes/law-of-closure.md)
|
||||
- [grouping](notes/grouping.md)
|
||||
- [similarity](notes/law-of-similarity.md)
|
||||
- [color](notes/color.md)
|
||||
- [reading-and-navigating](notes/reading-and-navigating.md)
|
||||
|
||||
|
||||
Another law is the law of similarty. Things with similar appearance are grouped by our brains.
|
||||
[](https://i.imgur.com/lVlE1z8.png)
|
||||
[](https://i.imgur.com/8BhtgTa.png)
|
||||
|
||||
|
||||
Another law is the law of closure. Where our brain tries to "autocomplete" things
|
||||
[](https://i.imgur.com/1bcanTN.png)
|
||||
[](https://i.imgur.com/MW9r7PR.png)
|
||||
|
||||
|
||||
These techniques, similarity, proximity and (to a lesser extent) closure, can be used to organise and groupu our interfaces. Often the grouping and layout is done before the rest of the design.
|
||||
|
||||
Examples:
|
||||
- [](https://i.imgur.com/RfkC6Fq.png)
|
||||
- [](https://i.imgur.com/FjF8c98.png)
|
||||
- [](https://i.imgur.com/P1m9XH8.png)
|
||||
|
||||
This is relatively easy. However, when done badly it can quickly confuse the user.
|
||||
|
||||
|
||||
## Jan Tschichold and Bauhaus
|
||||
|
||||
There was a sudden change from the right images to the left. This was partly due to advances in technology. This change was made by the Bauhaus group/school which became a way of thinking. Their ideas were inspired by architecture. The style was simple, functional, well grouped. These elements are also present in their visual design.
|
||||
|
||||
Examples:
|
||||
- [](https://i.imgur.com/nbEzVeP.png)
|
||||
- [](https://i.imgur.com/MlP9Lra.png)
|
||||
- [](https://i.imgur.com/jOCvCkw.png)
|
||||
- [](https://i.imgur.com/LXsRpCb.png)
|
||||
|
||||
## In summary
|
||||
- alignment guides the eye and reduces clutter
|
||||
- avoid slight misalignments that undermine your ability to beacon organisation
|
||||
- we automatically notice patterns and deviations
|
||||
- when you deviate do so strategically
|
||||
- use visual proximity and scale to convey semantic information
|
||||
|
||||
## Uses of grouping
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# Color
|
||||
|
||||
- design grayscale first.
|
||||
- keep luminance values from grayscale when moving to color
|
||||
- use color harmonisers
|
||||
- [](https://i.imgur.com/KdwaNzi.png)
|
||||
- about 5-8% of men are colorblind (red-green, blue–yellow, total color blindness)
|
||||
|
||||
# Reading and navigating
|
||||
Information scent
|
||||
- how to represent things so people can find what they want
|
||||
- do they realize their options
|
||||
- can they figue out how to get what they want
|
||||
How to find Poor scent
|
||||
- flailing (loss of orientation, reported or observed)
|
||||
- low confidence (in what link with will do or where it will go) (measured before and after using a web link)
|
||||
- back button (count usage of back button)
|
||||
|
||||
Low scent navigation
|
||||
- unfamiliar terms
|
||||
- suprising categories
|
||||
- short links
|
||||
- hidden navigation
|
||||
- icons provide little information
|
||||
- generic icons rarely help
|
||||
- they help when
|
||||
- they facilitate repeat recognition
|
||||
- when you know what something looks like but not what its called
|
||||
- good redundant coding can help
|
||||
|
||||
improving scent
|
||||
- multiword links
|
||||
- specific recognisable terms
|
||||
- trigger words not "clever" terms
|
||||
- help accessibility
|
||||
- speaking block navigation
|
||||
- subheadings
|
||||
- explanations
|
||||
- design for glanceability
|
||||
- [](https://i.imgur.com/pMNYIUB.png)
|
||||
|
||||
@ -4,20 +4,9 @@ aliases:
|
||||
tags:
|
||||
- info203
|
||||
- lecture
|
||||
sr-due: 2022-05-07
|
||||
sr-interval: 3
|
||||
sr-ease: 250
|
||||
sr-due: 2022-05-25
|
||||
sr-interval: 16
|
||||
sr-ease: 270
|
||||
---
|
||||
|
||||
# Reading and navigation
|
||||
we have a tendency to focus on certain areas first. Usually the top left.
|
||||
|
||||
# Ethics
|
||||
steve mann example - too far?
|
||||
|
||||
hypocratic oath - do no harm
|
||||
|
||||
should there be one like this in computing?
|
||||
|
||||
should self driving cars protect the driver or pedestrians.
|
||||
|
||||
[hci-ethics](notes/hci-ethics.md)
|
||||
14
content/notes/color.md
Normal file
14
content/notes/color.md
Normal file
@ -0,0 +1,14 @@
|
||||
---
|
||||
title: "color"
|
||||
aliases: Colour, colour
|
||||
tags:
|
||||
- info203
|
||||
- visual-design
|
||||
---
|
||||
|
||||
# Color
|
||||
- design grayscale first.
|
||||
- keep luminance values from grayscale when moving to color
|
||||
- use color harmonisers
|
||||
- 
|
||||
- about 5-8% of men are colorblind (red-green, blue–yellow, total color blindness)
|
||||
16
content/notes/grouping.md
Normal file
16
content/notes/grouping.md
Normal file
@ -0,0 +1,16 @@
|
||||
---
|
||||
title: "grouping"
|
||||
aliases: Grouping
|
||||
tags:
|
||||
- info203
|
||||
- visual-design
|
||||
---
|
||||
|
||||
Gestaltkriterien “Gestalt Principles” - Law of Proximity
|
||||
|
||||
Our brain is trying to help us understand the world. For example we look for eye contact. Our brain is looking with our eyes for contrast, parrallel lines, etc. Criteria that help us understand the world.
|
||||
|
||||
The Gestalt priciples have identified how our functions. One of these is the law of proximity. Things that a close to each other are grouped together by our brain.
|
||||
|
||||
|
||||
|
||||
16
content/notes/hci-ethics.md
Normal file
16
content/notes/hci-ethics.md
Normal file
@ -0,0 +1,16 @@
|
||||
---
|
||||
title: "hci-ethics"
|
||||
aliases:
|
||||
tags:
|
||||
- info203
|
||||
---
|
||||
|
||||
# Ethics
|
||||
steve mann example - too far?
|
||||
|
||||
hypocratic oath - do no harm
|
||||
|
||||
should there be one like this in computing?
|
||||
|
||||
should self driving cars protect the driver or pedestrians.
|
||||
|
||||
@ -51,7 +51,14 @@ links:[_index](_index.md)
|
||||
- [mental-models](notes/mental-models.md)
|
||||
- [representation-and-distributing-cognition](notes/representation-and-distributing-cognition.md)
|
||||
- [visual-design](notes/visual-design.md)
|
||||
- [visual-design-typography](notes/visual-design-typography.md)
|
||||
- [typography](notes/typography.md)
|
||||
- [layout](notes/layout.md)
|
||||
- [closure](notes/law-of-closure.md)
|
||||
- [grouping](notes/grouping.md)
|
||||
- [similarity](notes/law-of-similarity.md)
|
||||
- [color](notes/color.md)
|
||||
- [reading-and-navigating](notes/reading-and-navigating.md)
|
||||
- [hci-ethics](notes/hci-ethics.md)
|
||||
|
||||
# Videos
|
||||
- [heuristic-evaluation](notes/heuristic-evaluation.md)
|
||||
|
||||
11
content/notes/law-of-closure.md
Normal file
11
content/notes/law-of-closure.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: "law-of-closure"
|
||||
aliases: closure
|
||||
tags:
|
||||
- info203
|
||||
- visual design
|
||||
---
|
||||
|
||||
Another law is the law of closure. Where our brain tries to "autocomplete" things
|
||||
|
||||
|
||||
12
content/notes/law-of-similarity.md
Normal file
12
content/notes/law-of-similarity.md
Normal file
@ -0,0 +1,12 @@
|
||||
---
|
||||
title: "law-of-similarity"
|
||||
aliases: similarity
|
||||
tags:
|
||||
- info203
|
||||
- visual-design
|
||||
---
|
||||
|
||||
Another law is the law of similarty. Things with similar appearance are grouped by our brains.
|
||||
|
||||
|
||||
|
||||
40
content/notes/layout.md
Normal file
40
content/notes/layout.md
Normal file
@ -0,0 +1,40 @@
|
||||
---
|
||||
title: "layout"
|
||||
aliases:
|
||||
tags:
|
||||
- info203
|
||||
- visual-design
|
||||
---
|
||||
|
||||
Techniques such as, [similarity](notes/law-of-similarity.md), [grouping](notes/grouping.md) and (to a lesser extent) [closure](notes/law-of-closure.md), can be used to organise and groupu our interfaces. Often the grouping and layout is done before the rest of the design.
|
||||
|
||||
Examples:
|
||||
|
||||
|
||||
|
||||
|
||||
This is relatively easy. However, when done badly it can quickly confuse the user.
|
||||
|
||||
**Summary**
|
||||
- alignment guides the eye and reduces clutter
|
||||
- avoid slight misalignments that undermine your ability to beacon organisation
|
||||
- we automatically notice patterns and deviations
|
||||
- when you deviate do so strategically
|
||||
- use visual proximity and scale to convey semantic information
|
||||
|
||||
# Examples
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# Jan Tschichold and Bauhaus
|
||||
There was a sudden change from the right images to the left. This was partly due to advances in technology. This change was made by the Bauhaus group/school which became a way of thinking. Their ideas were inspired by architecture. The style was simple, functional, well grouped. These elements are also present in their visual design.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
40
content/notes/reading-and-navigating.md
Normal file
40
content/notes/reading-and-navigating.md
Normal file
@ -0,0 +1,40 @@
|
||||
---
|
||||
title: "reading-and-navigating"
|
||||
aliases: reading, navigating
|
||||
tags:
|
||||
- info203
|
||||
- visual-design
|
||||
---
|
||||
|
||||
# Reading and navigating
|
||||
Information scent
|
||||
- how to represent things so people can find what they want
|
||||
- do they realize their options
|
||||
- can they figue out how to get what they want
|
||||
How to find Poor scent
|
||||
- flailing (loss of orientation, reported or observed)
|
||||
- low confidence (in what link with will do or where it will go) (measured before and after using a web link)
|
||||
- back button (count usage of back button)
|
||||
|
||||
Low scent navigation
|
||||
- unfamiliar terms
|
||||
- suprising categories
|
||||
- short links
|
||||
- hidden navigation
|
||||
- icons provide little information
|
||||
- generic icons rarely help
|
||||
- they help when
|
||||
- they facilitate repeat recognition
|
||||
- when you know what something looks like but not what its called
|
||||
- good redundant coding can help
|
||||
|
||||
improving scent
|
||||
- multiword links
|
||||
- specific recognisable terms
|
||||
- trigger words not "clever" terms
|
||||
- help accessibility
|
||||
- speaking block navigation
|
||||
- subheadings
|
||||
- explanations
|
||||
- design for glanceability
|
||||
- 
|
||||
@ -1,8 +1,9 @@
|
||||
---
|
||||
title: "visual-design-typography"
|
||||
title: "typography"
|
||||
aliases: Typography
|
||||
tags:
|
||||
- info203
|
||||
- visual-design
|
||||
---
|
||||
|
||||
most common fonts
|
||||
@ -3,6 +3,7 @@ title: "visual-design"
|
||||
aliases: Visual Design
|
||||
tags:
|
||||
- info203
|
||||
- visual-design
|
||||
---
|
||||
|
||||
combine text and graphics. how to represent?
|
||||
@ -19,6 +20,6 @@ three goals
|
||||
- message
|
||||
|
||||
Three tools
|
||||
- typography
|
||||
- layout
|
||||
- colour
|
||||
- [typography](notes/typography.md)
|
||||
- [layout](notes/layout.md)
|
||||
- [color](notes/color.md)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user