PBA Front-End

Using Contrast

Using Contrast

• The Gestalt Laws mainly deal with perception of ”similar” elements (similar appearance, similar position, etc.)

• How do we make something stand out, in order for the user to notice it?

• We can use contrast

Using Contrast

• What is contrast…?• The difference in visual properties that makes

an object (or its representation in an image) distinguishable from other objects and the background…

• or• Things which look different from one another!

Using Contrast

• Types of contrast– Color contrast– Size contrast– Shape contrast– Positional Contrast

Using Contrast

• Color contrast can be useful for clearly separating an area from the background

Using Contrast

• Another type of color contrast is between warm and cool colors

Using Contrast

• We can also use the tint/shade/tone of colors to create contrast– This is important!– This is normal– This is not so important…

Using Contrast

• Using a single color in a black/white graphic creates a strong contrast

Using Contrast

• Size contrast – size does matter!• We usually perceive a large object to be

more important than a small object

Using Contrast

• Size contrast is also extremely common in web typography

–This is important!– This is normal– This is not so important…

Using Contrast

• Size contrast is also extremely common in web typography

–This is important!– This is normal– This is not so important…

Using Contrast

• I wonder what they want us to do…?

Using Contrast

• Humans quickly identify a shape that is different than other, neighbouring shapes

• Can signify that e.g a button has a special function

Using Contrast

• Humans quickly notice if something is ”out of place”

• Similar to shape contrast – use it to signify that e.g. a button does something special

• Often used together with other types of contrast

Using Contrast