Visual design - important pointers

Visual design
1. Proximity and uniform connectedness (enclosure) is the two important principles of Gestalt
2. All graphic design is ultimately management of white spaces.

Gestalt principles
Are related to the visual reorganization of figures and forms.

• Emergence: this principle emphasis that we do not recognize a thing in parts but as a whole. For example, we do not recognize a dog by its body parts (tail, face etc) but as a whole.
• Rectification: Is the constructive or generative aspect of perception. If we draw three dots on a white sheet in close order, our mind will see a triangle there.
• Multi stability: is related to having ambiguous perceptions.
• Invariance: is the property in which the simple geometrical shapes are recognized independent of rotation, translation, and scale.

Visual design principles
The visual design principles are extrapolation of gestalt principles. The perception of visual patterns yielded a number of consistent principles that dominate the theoretical basis for much of modern graphic design.
1. Proximity: The elements that are close to each other are considered as more related than the elements that lie farther apart.
2. Similarity: If the elements share consistent visual look they will be treated as a group.
3. Continuity: We prefer continuous, unbroken contours and paths. The two lines crossing each other are mostly not viewed as four lines meeting at a common point.
4. Closure: We have a strong bias to see completed.
5. Figure ground reversal: Viewer’s perception reverses between two possible interpretations.
6. Uniform connectedness: Refers relations of elements that are defined by enclosing elements within other elements, regions or discrete areas of the page.
7. 1+ 1 = 3 effects: The white space between two elements forms a third element.

Consistency
1. A consistent approach to layout and navigation allows users to easily locate the information and navigation controls across the web sites.
2. The primary task of graphic design is to create a strong, consistent visual hierarchy in which important elements are emphasized and content is organized logically and predictably.

Contrast
1. The readers visual scanning moves from contrast of the web pages, then the different sections and finally the written matter content.
2. The most effective way of doing this is to balance the text and links with small graphics.

Color and contrast
1. Text legibility is dependent on the reader’s ability to distinguish the letters from the background filed.
2. Color differentiation depends on brightness and saturation
3. Black text on white background has the highest amount of contrast since black color has no brightness and while color is all-bright.
4. Hue is also a factor with complementary colors such as blue and yellow producing the greatest contrast.
5. Be sure to use colors so it is easy to distinguish text from background.
6. Do not forget that almost 10 percent of male readers have some trouble distinguishing fine shades of red from shades of green
7. If you are using gradient stick with black text and avoid using dark color in the background.
8. Optically bright colors on white like yellow disappear
9. White text on black is almost good for legibility
10. The optimal combination for legibility is black on white
11. Hue
12. Saturation
13. Brightness

Contrast variability
The contrast for the legibility needs to be different from application to application, as there are multiple scenarios in which the application will be used. The mobile devices are used in the house and exteriors, the falling sunlight may make arouse problems in legibility.

Tools for graphic emphasis
1. The tool for graphic emphasis are powerful and must be used in sparingly in small amounts, over use makes them ineffective as emphasis on a particular section is not given.
2. Colors drawn from nature are almost inherently harmonious and subdued

White space
1. A fixed width layout include – the page at the center of the browser window
2. For liquid layouts use 90 to 95 % of the screen instead of 100%, leave some background around the functional areas of the page to prove visual relief.
3. If your page width is reasonable it will provide a visual relief
4. The ground field around the page elements is as active as any figure filed on the page.
5. Filling all the white space in the page is like removing the air form the room. Use white space effectively.

Style
1. The best style is the one that the readers never notice

Simplicity
1. Vision impaired people are lost on the web
2. People with cognitive disabilities such as memory and learning disabilities the difficulty is magnified many fold.

Typography
1. Good typography is based on the visual contrast between one font and the other, and the contrast between the text blocks and the surrounding empty space.
2. We read primarily by recognizing the overall shape of the words, not by parsing each letter and then assembling a recognizable word.
3. Avoid all upper case headlines, as they are difficult to read, because words formed with capital letters are monotonous rectangles that offer few distinctive shapes to catch the readers eye.
4. Legibility depends on the top of the words. If you use initial letters as caps, you disrupt the readers scanning of the words.
5. Initial Caps Causes Pointless Bumps
6. The first thing the users see is the overall contrast and the pattern of the page.
7. Choose few heading styles and subtitles to organize your content then use chosen style religiously.
8. In conventional print layout 30 t0 40 characters per line are considered ideal
9. Web page layout violates one of the basic book and magazine typography. The lines of text in web pages are mostly long to be easily read. Magazine and book columns are narrow for physiological reasons: The eyes span of movement is usually eight cms (3 inches wide) so designers keep the paragraphs wide enough to span in the eyes comfortable span of eight cms. If the lines are long, the user’s eyes are strained by flexing the head and eye muscles.
Post a Comment