Composition and the Elements of Visual Design

Visual Design Basics Visual design focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements. A successful visual design does not take away from the content on the page or function. Instead, it enhances it by engaging users and helping to build trust and interest in the brand. Basic Elements of Visual Design The basic elements that combine to create visual designs include the following: Lines connect two points and can be used to help define shapes, make divisions, and create textures. Principles for Creating a Visual Design A successful visual design applies the following principles to elements noted above and effectively brings them together in a way that makes sense. Unity has to do with all elements on a page visually or conceptually appearing to belong together. Example of Pulling it all together Additional Information

Rules of Composition in Web Design Art and Graphics Nobody enjoys looking at an ugly web page. Garish colors, cluttered images and distracting animation can all turn customers off and send them shopping somewhere else. On the other hand, a bland site with nothing but pages of text may bore your visitors. Knowing a few basic rules of composition will help you design a site that attracts visitors' eyes and retains their interest. Balance Good-looking websites place graphic elements so that the two sides of each page feel evenly balanced. White Space "White space" is to any area on the page that isn't covered by text or graphics, even if the area isn't colored white. Related Reading: How to Generate a Header Graphic for the Web Hierarchy Some of the links, text or images on your page will be more important than others. Color You shouldn't need more than two or three base colors for good website art, according to Spritz Web Solutions. Depth A web page is just a layer of pixels on a screen, but it doesn't have to look that way. Simplicity

Clean Up Your Mess - A Guide to Visual Design for Everyone The Pros and Cons of Frames in Web Pages Frames are a way to achieve certain effects and/or solve certain problems in web design. Frames have some compelling advantages, but they also have some serious disadvantages. The pros and cons of frames is a somewhat subjective topic and this page reflects the opinions of the author, Dave Owen. Other people may have differing opinions. Pros The most obvious feature of frames is the ability to keep one part of the page static whilst changing another part. Frames can also help reduce bandwidth and server load, because the same content does not need to be loaded every time a new page is visited. Cons The rest of this page is devoted to the disadvantages of frames. Broken Framesets A broken frameset happens when the frames are not loaded or displayed correctly, for example, a menu frame is missing or one of the frames takes up the whole window. Framesets fall apart more often than you might think, to virtually all sites using frames. Search Engines Search engines don't deal with frames well.

Composition and Design Principles ----------------------------------------------------------------------------- Everybody immediately responds to subject matter in art. A picture of a butterfly and a picture of a snake do not get the same response. In addition to subject matter*, the formal aspects of visual composition are like the grammar of a language. In writing, a story is written with words - subject matter. Like good literature and good poetry is more than words and subject matter, art is more than pictures. The organization, the sentence structure, the style, and so on can make or break a good story. The use of design principles applied to the visual elements is like visual grammar. TEACHING TIP Art vocabulary can be taught along with every project. *Glossary: "Subject matter" is similar to "topic" or "content" when teaching art. Six Visual Elements (art elements) top of page We think of the elements as the basic visual material with which to make art. Variety - You create variety when elements are changed.

The Gestalt Principles The Gestalt Principles Gestalt is a psychology term which means "unified whole". It refers to theories of visual perception developed by German psychologists in the 1920s. These theories attempt to describe how people tend to organize visual elements into groups or unified wholes when certain principles are applied. Similarity Similarity occurs when objects look similar to one another. The example above (containing 11 distinct objects) appears as as single unit because all of the shapes have similarity. Unity occurs because the triangular shapes at the bottom of the eagle symbol look similar to the shapes that form the sunburst. When similarity occurs, an object can be emphasised if it is dissimilar to the others. The figure on the far right becomes a focal point because it is dissimilar to the other shapes. Continuation Continuation occurs when the eye is compelled to move through one object and continue to another object. Closure Examples Proximity Figure and Ground Figure