Visual Grammar & AestheticsIn web design

Visual Grammar

More visual grammar

Visual Grammar

•Designers use shapes to:▫Organize information through connection

and separation▫Symbolize different ideas▫Create movement, texture, and depth▫Convey mood and emotion▫Emphasize and create entry points and

areas of interest▫Lead the eye from one design element to

the next

Visual Grammar

Three types of shapes• Geometric shapes are what most people think of as shapes. Circles,

squares, triangles, diamonds are made up of regular patterns that are easily recognizable. This regularity suggests organization and efficiency. It suggests structure.

• Natural/Organic shapes are irregular. They have more curves and are uneven. They tend to be pleasing and comforting. While they can be man-made (ink blobs), they are more typically representative of shapes found in nature such as a leaves, rocks, and clouds. On a web page organic shapes are generally created through the use of illustration and photography. They are free form and asymmetrical and convey feelings of spontaneity. Organic shapes add interest and reinforce themes.

• Abstract shapes have a recognizable form, but are not real. They are stylized or simplified versions of organic shapes. A stick figure is an abstract shape depicting a person. Typographic glyphs are abstract shapes to represent letters. Icons are abstract shapes to represent ideas and concepts. Some abstract shapes have near universal recognition.

Meaning of shapes• Curved shapes offer rhythm and movement, happiness,

pleasure and generosity. They are seen as more feminine than sharp shapes which offer energy, violence and, anger.▫ Circles suggest eternal, whole, well-rounded, complete,

secure, harmony & unity. Used to provide emphasis and attract attention.

▫ Spirals express creativity, life, expansion, fertility & change. Used to convey flexibility.

• Sharp shapes are lively and youthful and are seen as more masculine.▫ Squares & rectangles suggest stability, formality, rationality,

conformity & equality. Used to create structure. ▫ Triangles suggest dynamic tension, action, aggression,

revelation, progression & spirituality. Used to convey direction.

Creating a visual syntax• Harmony relates to the oneness or the wholeness

of visual space. Colors, shapes, lines, textures, and patterns are arranged to create a harmonious unity.

• Variety is achieved by using different kinds of lines, colors, textures, and shapes.

• Balance involves the equalization of elements in a work of art. Elements may be organized into symmetrical, asymmetrical or radial patterns.

• Rhythm is created by repeating objects or elements within a visual space. These repetitions may be either regular or irregular.

Visual syntax cont.• Movement refers to the arrangement of parts in a

work of art to create a visual reaction that is either fast or slow. This is done by the use of patterns, contrasts, and lines.

• Pattern involves the repetition of lines, shapes, colors, and textures.

• Graduation is accomplished by combining elements in a series of gradual changes in shapes or color. Or darkness. 

• Proportion has to do with relationship of elements to each other within the whole of a visual space

Text shape: Indentation

Space makes groupings:

The New Typography left its mark in many new and not always better san-serif typefaces. Only much later did it arrive in England, Italy and the United States. In England it was rarely understood and hardly achieved any significance, even though run-of-the-mill English typography at that time was as much in need of cleaning up as the German had once been. In Italy and particularly in the United States, however, the New Typography found intelligent and imaginative disciples. In Germany, where it would soon have died a natural death anyway, the movement was strangled in 1933.

At the time, the foundries produced a great number of new un-serifed fonts, and for a while no other typefaces were evident. Typographical experimentation continued, fruitful in part. One rarely achieves much with a single lucky stroke, though, and even a small improvement of typography from the ground up cannot be attained in a mere decade. A Chinese proverb says: Steady labor produces a fine piece of work.

The New Typography left its mark in many new and not always better sanserif typefaces. Only much later did it arrive in England, Italy and the United States. In England it was rarely understood and hardly achieved any significance, evne though run-of-the-mill English typography at that time was as much in need of cleaning up as the German had once been. In Italy and particularly in the United States, however, the New Typography found intelligent and imaginative disciples. In Germany, where it would soon have died a natural death anyway, the movement was strangled in 1933.

At the time, the foundries produced a great number of new unserifed fonts, and for a while no other typefaces were evident. Typographical experimentation continued, fruitful in part. One rarely achieves much with a single lucky stroke, though, and even a small improvement of typography from the ground up cannot be attained in a mere decade. A Chinese proverb says: Steady labor produces a fine piece of work.

Indentation

Line length=rectangle

Long line length:Perfect typography is more a science than an art. Mastery of the trade is indispensable, but it isn’t everything. Unerring taste, the hallmark of perfection, rests also upon a clear understanding of the laws of harmonious design. As a rule, impeccable taste springs partly from inborn sensitivity: from feeling. But feelings remain rather unproductive unless they can inspire a secure judgment. Feelings have to mature into knowledge about the consequences of formal decisions. For this reason, there are eno born masters of typography, but self-education may lead in time to mastery.

Short line length:Perfect typography is more a science than an art. Mastery of the trade is indispensable, but it isn’t everything. Unerring taste, the hallmark of perfection, rests also upon a clear understanding of the laws of harmonious design. As a rule, impeccable taste springs partly from inborn sensitivity: from feeling. But feelings remain rather unproductive unless they can inspire a secure judgment. Feelings have to mature into knowledge about the consequences of formal decisions. For this reason, there are eno born masters of typography, but self-education may lead in time to mastery.

Line length=square

Justification

•Left (ragged right)•Right•Centered•Justified (ie, both sides)

Problems with Justified TextPerfect typography is more a science than an art. Mastery of the trade is indispensable, but it isn’t everything. Unerring taste, the hallmark of perfection, rests also upon a clear understanding of the laws of harmonious design. As a rule, impeccable taste springs partly from inborn sensitivity: from feeling. But feelings remain rather unproductive unless they can inspire a secure judgment. Feelings have to mature into knowledge about the consequences of formal decisions. For this reason, there are no born masters of typography, but self-education may lead in time to mastery.

Leading=space between lines

•Now is the time for all good men to come to the aid of their country

•Now is the time for all good men to come to the aid of their country

•Now is the time for all good men to come

to the aid of their country

Leading

Tight:

Perfect typography is more a science than an art. Mastery of the trade is indispensable, but it isn’t everything. Unerring taste, the hallmark of perfection, rests also upon a clear understanding of the laws of harmonious design. As a rule, impeccable taste springs partly from inborn sensitivity: from feeling. But feelings remain rather unproductive unless they can inspire a secure judgment. Feelings have to mature into knowledge about the consequences of formal decisions. For this reason, there are no born masters of typography, but self-education may lead in time to mastery.

Perfect typography is more a science than an art. Mastery of the

trade is indispensable, but it isn’t everything. Unerring taste, the

hallmark of perfection, rests also upon a clear understanding of the

laws of harmonious design. As a rule, impeccable taste springs

partly from inborn sensitivity: from feeling. But feelings remain

rather unproductive unless they can inspire a secure judgment.

Feelings have to mature into knowledge about the consequences of

formal decisions. For this reason, there are no born masters of

typography, but self-education may lead in time to mastery.

Leading

Loose:

Perfect typography is more a science than an art. Mastery of the trade is indispensable, but it isn’t everything. Unerring taste, the hallmark of perfection, rests also upon a clear understanding of the laws of harmonious design. As a rule, impeccable taste springs partly from inborn sensitivity: from feeling. But feelings remain rather unproductive unless they can inspire a secure judgment. Feelings have to mature into knowledge about the consequences of formal decisions. For this reason, there are no born masters of typography, but self-education may lead in time to mastery.

Typography, even when poorly

executed, can never be taken

for granted; nor is it ever

accidental. Indeed, beautifully

typeset pages are always the

result of long experience. Now

and then they even attain the

rank of great artistic

achievement.

Leading

Tight with loose:

Aesthetics: Color

•Color luminance (cd/m2)▫White: 85.6▫Red: 19.5▫Green: 28.3▫Blue: 3.1▫Yellow: 60.8

User interest is affected by color•A Japanese study found that when

reading:▫White, green, & yellow backgrounds were

tied for highest devotion to task, but made users feel like longer time had past than with other colors

▫Yellow, followed by green then red, caused the greatest eye fatigue

▫Red backgrounds garnered the most interest Red also caused the most eye irritation,

followed closely by yellow

Color study cont.

•When searching for information on a webpage:▫Users were more devoted to and interested

in the task when the background was white. They also reported less difficulty in finding the information

▫Fatigue and irritation were highest when background color was red

▫The study concluded that cool background colors are best for sites with a lot of text

*“Effects of background color on user’s experience in reading website.” Chiba University. Japan.

Aesthetics: Illustration• Navigation buttons - Used to help visitors navigate your web

site. If designed well, these buttons can be much easier to read and find than text links.

• Image maps - Also used to help visitors navigate your web site. If designed well, image maps greatly add to the visual appeal of a web page but can considerably increase the page's download time.

• Logo - Used for your corporate or business identity. Logos increase brand name recognition and add visual appeal to any document or web page.

• Bullet points - Used to draw your visitors' eyes to the main points of your document. Also used to break up a web page full of paragraphs.

• Mastheads - Also known as a title graphic. Main function is to let your visitors know which web page they are on. Adding clip art or an illustration to a masthead adds more visual appeal.

Aesthetics: Illustration• Divider lines or horizontal rules - Commonly used to

separate footers, categories within a single web page, and FAQ questions and answers.

• Background images - Used to enhance the visual appeal of a web page and make a web site easier to navigate. One of the most common background images is a sidebar which usually contains the links to the other pages in your site.

• Headings (text graphic) - Commonly used preserve a typeface that many people do not have on their computers.

• Photos - Commonly used to make your web pages seem more personal and more inviting. Visitors' eyes are naturally drawn to photos of people. An absolute necessity to showcase products on certain e-commerce sites.

Aesthetics: Illustration• All graphic images on your web site should match in

color, typeface, and special effects. ▫ For example, the text in all of your navigation buttons

should use the same typeface and have the same special effects on them (such as a drop shadow). Your navigation buttons, mastheads, bullet points, and divider lines look best if they are designed using one of the colors in your logo.

• For a truly professional-looking web site, the minimum set of graphics on web pages should be a set of navigational graphics, a logo, bullet points, and set of mastheads.▫ Example:

http://www.odu.edu/al/vmtucker/e_portfolio/default.htm

Manipulating Images• When manipulating images, remember:

▫Background images should not be repeated, so they must be resized and faded for readability

▫ Image pixilation is frowned upon, so if the image pixilates, try to find another picture

▫BMP and PNG image files are very large, so if you find an image in one of these formats, try saving it as JPG (or GIF if image quality isn’t a concern). This will reduce load time and decrease the space you’re using in your web files

▫A free image manipulation tool can be found here: http://www.pixlr.com/editor/