Common Fate
In the following image you can clearly see the similarity represented in bulleted text. This is used to show that they're all representing the same type of information. In this case, each bullet is there to provide the user a link to the various different colleges offered at Tarleton State University.
I would say the use of common fate is very good. It allows the used to quickly see that these are all the same sort of thing, and upon closer inspection, to see that they're all different colleges within Tarleton State University.
Division
Division is the use of some sort of visual to clearly delineate the difference between sections.
I would say that in the above image Steam does a very good job of this, it clearly seperates the various categories within the games tab with the use of thing lines. I believe what it is in particular that they did well, is that the lines aren't overpowering. They aren't something that the user is going to see upon first glance, and won't divert their attention away from the main point, being the various sections within the games tab.
Proximity
Proximity is the use of varying sizes of white space to separate visual elements into groups, such as columns, or rows.
In this case, Newegg has provided a fair amount of space between the various categories here horizontally, making the various pieces of text appear to be more in a column format as opposed to in rows.
Focal Point
A focal point is something in a visual that catches your eye, and as such, you're more likely to remember after looking at.
In this case, Ford has put a big blue "all vehicles" button in the middle of this image. I believe this is an effect focal point. It shows the used quickly that this is where you go to view all of the vehicles they have on offer. The user can even glean this without looking at the rest of the image, which basically just gives slightly more detail on what the button is.
Figure-ground
Figure-ground is the use of various elements (such as shape or color) to separate images from one-another.
In this case I believe Microsoft does an okay job with figure-ground. You can definitely see the difference between the various images represented here and the background upon which they're on, however, I believe that their choice of a light grey background on the images sitting on their plain white site background isn't the best choice. People with poor eyesight, and also people viewing this on poor monitors will possibly have difficulty telling the difference between this light grey and the white background it's sitting on.
Sources
Tarleton State University Website. (2017, September 21). Retrieved September 22, 2017, from
http://www.tarleton.edu/home/index.html
Steam Online Game Store. (n.d.). Retrieved September 22, 2017, from
http://store.steampowered,com/
Newegg Website (n.d.). Retrieved September 22, 2017, from https://www.newegg.com/
Ford Website (n.d.). Retrieved September 22, 2017, from https://www.ford.com
Microsoft Website (n.d.). Retrieved September 22, 2017, from https://www.microsoft.com/en-us/
Comments
Post a Comment