PBA Front-End 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