1
IContentIC.com
Common User Mind Function Database
Common User Mind Function Database
Human mind to receive the new knowledge, skill, or attitude through a website follow the psychological principles and rules. These rules have been already studies as learning process.
IContentIC.com
Learning Theories
Learning Theories
Learning theories explain how human receive, process, and retain new knowledge, skill and attitude.
Some of learning theories are mentioned here.
Gestalt Principles
Gestalt
Gestalt theory was first developed in the early 1900s by Austrian and German psychologists. Some of the notable founders of Gestalt theory include Max Wertheimer, Wolfgang Kohler, and Kurt Koffka. The word 'Gestalt' means whole or 'form in German. One of the main beliefs of Gestalt theory is that something is a whole of interacting parts that can be separated, analyzed, and rearranged in the whole. In other words, the whole is different from the sum of its parts.
Figure-Ground Perception
Figure-ground principle
the tendency of the visual system to simplify a scene into the main object that we are looking at (the figure) and everything else that forms the background (or ground).
Visual Examples
Visual Examples
Click to edit text
Psychological Background
References
Click to edit text
Reference 1
http://www.scholarpedia.org/article/Figure-ground_perception
For
Designing Web
For Web Designing
When looking at a visual scene, people tend to look for ways to differentiate between the figure and the ground.
We use these as the techniques in web designing for directing the use's mind on the subject that we want
When creating visual images for display, ensure it is easy for viewers to distinguish the figure where you want them to pay attention. Make the figure clear and distinct, standing out from the background.
Blurriness
Objects in the foreground tend to be crisp and distinct while those in the background are blurry or hazy.
Since the early days of graphical user interfaces, screens have employed shadows to help users understand how to use an interface. Images and elements with shadows seem to pop off of a page, and it gives users the impression that they can physically interact with the element. Even though visual cues vary from app to app, users can usually rely on two assumptions:
Elements that appear raised look like they could be pressed down (clicked with the mouse or tapped with a finger). This technique is often used as a visual signifier for buttons.
Elements that appear sunken look like they could be filled. This technique is often used as a visual signifier for input fields.
contrast
Contrast: The high contrast between objects can lead to the perception of figure and ground. The Rubin vase is one example.
Contrast
Contrast in size
Contrast in Color
There are some great tips to consider when using Color to add Contrast to your artwork!
- The maximum contrast you can achieve is between Black and White.
- You don't want color pairings to feel uncomfortable, avoid using two colors that are too bright or too similar.
- Think about the tints and shades you are using! Don't pair two highly vibrant colors together, as it will be visually challenging for viewers.
- Use the color wheel as a guide to pairing colors that work well together, as these will create a perfect contrast.
Contrast in Typography
- Think about adding Contrast with type when working with a lot of copy, especially in Editorial projects.
- As a general rule of thumb, you don't want to use the same font throughout your design. Nothing will stand out, and it may appear too plain.
- Using multiple weights within a font family is also a great idea as it ensures consistency, creates a hierarchy of information, and breaks up the design.
- It's easy to fall into the trap of using too many different fonts, Typically more than 2 or 3 is unnecessary as your design will be overly complex and difficult to read.
Using contrasting shapes
some more pointers to consider when working with Shapes!
- Similar to Size, using Shape can help to draw the viewers attention to the vital element.
- If you have many Geometric Shapes, introducing one Organic Shape which will immediately make it stand out. This can be particularly helpful in poster and editorial design, where you are working with lots of images and frames.
- Shapes can be used to stylise and add visual interests to your artwork.
Size
Size: Images that appear to be larger will be perceived as closer and part of the figure while those that are smaller will seem further away and part of the background.
Size is simply how small or big an element is in relation to other objects within a design. Generally, we use size to make a particular element stand out or to give it importance. However, size becomes a much more powerful design tool when it is considered alongside scale.
Separation
An object isolated from everything else in a visual scene is more likely to be seen as a figure versus background.
Separation
white space
“white space” refers to the space that surrounds the elements. You may find the term “negative space” here and there, indicating the exact same thing.
White space is used to:
- Help the eye scan a design/text
- Increase legibility and readability
- Create a certain aesthetic/mood
white space
References
References
https://www.verywellmind.com/optical-illusions-4020333
http://changingminds.org/explanations/perception/gestalt/figure_ground.htm
https://yesimadesigner.com/using-contrast-1/
https://www.smashingmagazine.com/2017/02/shadows-blur-effects-user-interface-designhttp:/
www.edgee.net/how-to-apply-the-7-elements-of-design-to-your-work-element-6-size-and-scale/
https://blog.prototypr.io/8-rules-for-perfect-typography-in-ui-21b37f6f23ce
https://w3-lab.com/website-font-size-guidelines/
https://www.creatopy.com/blog/white-space-in-graphic-design/
common fate principle
Click to edit text
Visual Examples
Click to edit text
Scientific Background
Click to edit text
References
Click to edit text
For Web Designing
Proximity principle
Click to edit text
Visual Example
Click to edit text
Title
Click to edit text
Title
Click to edit text
Title
Click to edit text
Title
Click to edit text
Title
Click to edit text
References
Click to edit text
Scientific Background
Click to edit text
For Web Designing
Click to edit text
Similarity principle
Click to edit text
For Web Designing
Click to edit text
Continuity principle
Click to edit text
For Web Designing
Closure
It explains how we perceive incomplete shapes (Palmer & Rock, 1994). When there is missing information in an image, the eye ignores the missing information and fills in the gaps with lines, color or patterns from the surrounding area to complete the image.
Closure principle
References
Click to edit text
https://www.interaction-design.org/literature/article/the-laws-of-figure-ground-praegnanz-closure-and-common-fate-gestalt-principles-3
Click to edit text
For Web Designing
Click to edit text
Symmetry and Order
Click to edit text
For Web Designing
Meaningful Theory
Meaningful
Click to edit text
Title
Click to edit text
Title
Click to edit text
Title
Pre-Organizerر
https://creately.com/blog/diagrams/types-of-graphic-organizers/
Pre-Organizer
Click to edit text
Title
Click to edit text
Constructivism
Learning Principles
Learning Style
Learning Styles
Click to edit text
Title
Click to edit text
Title
Click to edit text
Title
Click to edit text
Title
Click to edit text
Title
Click to edit text
Title
Click to edit text
Title
Title
Click to edit text
Click to edit text