BASIC COMPOSITION.COM VISUAL DESIGN THEORY

CARP (or CRAP) PRINCIPLES Robin Williams, a visual design guru, suggests that there are four Basic Design Principles: CONTRAST, ALIGNMENT, REPETITION, and PROXIMITY CONTRAST Contrast helps us to differentiate items on a page. Use contrast to show differences between a multitude of visual elements (type, color, size, shapes, etc). Contrast helps the reader to locate items more effectively. Additionally, contrast helps the reader to see differences between visual units. The biggest items often receive the most attention. The smallest items usually receive less attention. Consider this idea when you consider contrast. EX:

LARGE
Small

ALIGNMENT Alignment is where you place things on the page in relation to other things. Everything should be placed strategically on the page (keeping in mind the direction of the reading). For instance, in the United States mainstream culture, readers read predominately English, which requires items be assessed from left to right and top to bottom. Our attention focuses on a diagonal line which runs from the top left to the bottom right. Things in this line tend to receive more attention from readers/viewers. Considering this idea can help a person understand how some items on the page may be viewed first or last.

Most Arabic cultures read things from right to left, so you may need to change your design orientation. Likewise, many Asian languages do not read from side to side, they may read top to bottom (up to down). In working with alignment, remember: Nothing should be placed arbitrary (or placed without reason) on a page. Consider a few ideas: EX: Dr. Harold Vasser, M.D. Family Practice 1 Campus Drive Allendale, Michigan 49401 Always ready to serve you… Dr. Harold Vasser, M.D. Family Practice 1 Campus Drive Allendale, Michigan 49401 Always ready to serve you…

Another aspect of alignment is the use of white space. Notice how white space may be used to create more free space (as in the example on the left), versus the how a visual may look more full by placing items in such a way as to take up space (as in the example on the right). Furthermore, the items on the right look better (the white space is balanced); however, the item on the left can provide more space for additional visual elements, such as images or clipart. PROXIMITY (OR GROUPING) When you place or group similar (or related) items together on a page, you are maintaining proximity. Items grouped together they can be seen as one visual unit, which improves the availability of information. If you look at the examples, the example on the left has a very general display of text. In a sense, finding any information is more difficult. However, the example on the right applies the idea of proximity. The similar information is grouped together (easier to read, huh?) EX:

YOU ARE CORDIALLY INVITED TO ATTEND A CONCERT… July 21s, 7:00PM Civic Auditorium 1110 Sheldon Street NE in Downtown Grand Rapids. Pieces to be performed: Chopin’s Fantasie-Improptu in C# (violin adaptation) Debussy Clair De Lune And many more…. So, join us. PRESENTED BY THE GVSU CHAMBER ORCHESTRA Featuring Soloist: Mary Suzuki, Violin REPETITION Repeating visual elements provides the reader with a sense of familiarity in the first few seconds of viewing the visual. A few rules of thumb: Whatever you do to one page, do to another. In addition, when creating multiple pages for one document, consider using templates for those pages, which helps to preserve the overall continuity of the document. July 21st, 7:00PM Civic Auditorium 1110 Sheldon Street NE, Downtown Grand Rapids Pieces to be performed: Chopin’s Fantasie-Improptu in C# (violin adaptation) Debussy Clair De Lune And many more…. YOU ARE CORDIALLY INVITED TO ATTEND A CONCERT… PRESENTED BY THE GVSU CHAMBER ORCHESTRA Featuring Mary Suzuki, Violin

STEP 1

STEP 2

STEP 3

BRING NOODLES TO A BOIL

REMOVE NOODLES FROM BOILING WATER

SOAK NOODLES IN COLD WATER FOR SIX MINUTES

Notice how these instructions seem very easy to read. This ease of reading is made possible by repeating similar elements on the different pages. GRID DESIGN In order to organize the layout, some designers use Grid Design principles or use tables to organize the page. Grid Design involves breaking the page into sections (top, middle, bottom –or- left, center, right) or into a grid. The idea is similar to the idea of the Golden Mean or Golden Section, a consideration of view proposed by the Greek Philosopher/Mathematician, Pythagoras. This idea, while very complex, has been adopted to the rule of thirds in photography and as something called "Ground Thirds" in design. Basically, you divide a page into equally into two to three slices (or more). By dividing the page, you allow the eye and the mind to consider how the page may be used and/or viewed by the audience. Using the orientation of a grid often helps designers to figure out how to place items on a page.

EX: Product Name Product Slogan Product Slogan

Image

Image

Image

Fine Print

Fine Print

Fine Print

Note: You can use a table function in a word process or other program to create a grid. Afterwards, "Removing Borders" or "Removing Lines" from tables can create smoothness and a sense of visual continuity. In addition, keeping borders can help to separate objects for the reader. In addition, Grids may be expanded to have many more rows/columns.

If you are dealing with many more elements, then you can use the grid to place those items strategically.

OTHER DESIGN PRINCIPLES VERTICAL BALANCE Visual elements should be balanced to promote better readability. When items are overpowering or massive on a page, they may appear distracting. Vertical Balance involves the distribution of objects on both ideas of the (invisible or visible) vertical axis (considering left and right - the sides). If you take a page and cut it down the middle with your mind (separating both the right and the left), then you should consider how you might balance what is on the right or the left. When a heavier, darker, or more emphatic objects appears on the left rather than the right, then the balance is said to be asymmetrical rather than symmetrical, since symmetrical things have balance. HORIZONTAL BALANCE Visual elements should be balanced horizontally as well. Horizontal Balance involves the distribution of objects on both sides of the (invisible or visible) horizontal axis (considering top and bottom. When a heavier, darker, or more emphatic objects appears on the top rather than the bottom, then the balance is said to be asymmetrical rather than symmetrical, since symmetrical things have balance. DOMINANCE (OR MANIPULATING THE FOCAL POINT) Allowing some visual elements to receive more attention than others (through use of white space) can help or hurt. Regardless, it is important to keep in mind which visual elements are receiving what attention and how much. A quick test for dominance: Ask a peer to look at a visual and reveal: What is the first thing they notice on the page? You may achieve dominance by making visual elements darker or larger. You may also choose to subtract elements to put elements into the foreground. Finally, with much of today's software, you can even put items on top of other (using layers or bring an item "to the front" which is allowed by certain paint and visual design programs).

ASYMMETRY When an object maintains dominance vertically or horizontally, then it said to be asymmetrical. Asymmetrical design creates visual tensions and can be exciting or playful to the audience. For example, if you have a darker object on the left and a light object on the right, you are playing with some asymmetry. ACCORD Accord is a term used to describe things that are usually equal in size, shape, weight, etc. Generally, the eye is pleased by similar shapes, symmetry, and closelyrelated/adjacent colors (shades). Using this idea will help you to create visuals which are easier to read and more aesthetically pleasing. PROPORTION We examine most things on a page by considering its proportion. Proportion relates to the relative size or weight (darkness) of an item. When things are darker or lighter, taller or smaller, wider or thinner, then we are usually viewing changes in proportion. GRADATION Visual elements can have movement in color/weight (from light to dark), size (from small to large), or even other elements such as shape (rounded to edged). When an object shows a shift from one to the other, then you are viewing gradation. VARIETY You can generally change whether a visual has a variety of different types of visual elements or is minimal (contains less variety). SCALE You can change whether or not objects are truth-to-scale or not. You can also change whether an object is larger or smaller (moving towards DOMINANCE) DIMENSIONALITY Finally, you can change whether an object appears two-dimensional (flat) or threedimensional (the appearance that the visual elements are coming out of the visual). Note: To improve the readability of most texts, I recommended two-dimensionality, especially in visuals such as charts and graphs. Three-dimensional elements tend to make pages appear more cluttered, since they appear to take up more space. SEQUENCE When you are dealing with direction or the page-to-page flow of a text, you are considering sequence. Consider how we read a sentence, one word at a time. The eye works similarly with visuals. We consider one section of an image, graph, or document at a time. Some of the following ideas apply to the consideration of sequence: 1. Turning pages in a book 2. Viewing headers on a page (moving from most important to least important) 3. Moving from the left to the right. 4. Moving from the top to the bottom. 5. Viewing the image and then the text (which is the normal flow of things) 6. Viewing items by their weight/prominence.

EMPHASIS Every page of something has a focus or a focal point. These points are the things on the page which "glue" our eyes to the page. You can achieve emphasis by doing any of the following: 1. Give something weight or scale or darkness 2. Isolate the object 3. Use some imbalance/asymmetry ORGANIC AND INORGANIC DESIGN The human eye is a very sensitive organ which discerns thousands of colors and patterns, yet it is particularly attracted to colors and patterns which emulate very natural forms. Organic Design makes use of natural forms and emulates living things (e.g., leaves of trees, oranges, etc). Inorganic Design makes use of non-living things and/or metallic things (e.g., geometric formations of different kinds of rock, etc). Colors may be considered organic or inorganic. For example, natural shades of green, blue, orange, softer browns, may be preferable in an organic color scheme. Whereas, stronger, darker colors such as navy blue, black, silver, gold, platinum may signal more inorganic qualities. You can see such color choices at the supermarket, where "organic" items or "natural" foods have colors and labeling which sometimes emulates things found in nature. But, Organic and Inorganic design schemes are found everywhere. Consider film. Think of the Star Wars Trilogy or even the Lord of the Rings saga. In these films, the directors have chosen an organic design for all of the good characters (they where lighter colors, have more natural surroundings, have very rounded artifacts, etc.). Inorganic design may be found in all of the evil characters (very mechanical and industrial artifacts, darker color schemes, sharp-edged weapons, etc.). Such use of organic and inorganic is very deliberate. Rounded objects tend to look much more organic and much more appealing than squared objects (thus, the expression of things often lusted after as "having curves" or being "curvy." and I am not referring solely to human beings, but rather objects). In creating tables/text boxes, if provided the option, choose to pick tables/text boxes with rounded edges rather than square edges. Reason: Edged patterns or strong geometric patterns can agitate those with neurological disorders. Furthermore, rounded objects seem less imposing. In using text, pick fonts which use curves (such as Sans-Serif fonts), especially to improve readability and the overall comfort of the reader, especially for shorter text.

If you decide that creating comfort is better then keep natural shades of green, blue, orange, softer browns, may be preferable. Often, people seeking to lighten their work tend to choose the traditional pastel shades of primary and secondary colors. Now, vice versa: If shocking your audience is better, you can always choose the inorganic route, which is to choose visual elements with more edged qualities, harsh colors -> away from softer colors. Organic color patterns look more like stripes on a zebra or spots on a dog/giraffe. These spots/stripes are often imperfect. Nature love imperfection. Therefore, some organic shapes/patterns are imperfect (having different sizes, etc). Just consider circles (there are no perfect circles). Or, just think about the mathematic implications of PI. Living things are almost by definition imperfect. In contrast, most inorganic shapes/patterns are perfectly aligned or have perfect symmetrical qualities. Inorganic colors patterns which may be used in addition to just inorganic colors take on more metallic qualities, more metallic effects, more lines, and more strong geometric shapes. Think diamonds, squares, hexagons, pentagons, etc. Think plaid. If in doubt to whether or not something is organic or inorganic, simply ask yourself, is the thing more like a something not once living, a rock, a piece of metal, geometric, edged, or something mechanical? Or, is this thing more like something living, water, a plant, the spots on a giraffe, or a fruit?