Many new and upcoming graphic artists struggle with various visual, web page layout and composition issues. Whether you are laying out a web page, a flyer, an illustration, a book, 
magazine or business card, below, you will find a very useful guide filled with concise advice on how to effectively produce a quality layout. We have examined a few general visual design, layout, aesthetic graphic design and graphic design composition principles which can be applied to illustration, graphic design and any kind of work that involves visual composition, depth and perception including web design, photography and film or video production. Effectively, we have produced the greatest series of page layout and composition tips discussed using traditional design principles for photographers, animators, graphic designers and web page designers.
Web Page Layout – Main Direction: Composition Basics
You can emphasize a horizontal, vertical or diagonal direction. Vertical Space is harder to control than horizontal space. Most of our environment consists of vertical objects. A tilted horizon or angle, can cause compositional discomfort for viewers, and is often used to achieve dramatic, intense, dynamic, energetic, stress-inducing effects. We strive to maintain stability in a picture. We should be cautious when tilting the horizon in news or documentary productions. Direction was used in effective layouts and compositions throughout history, and for culture-specific purposes in architecture. Of course, the combination of horizontals and verticals reflects our current reality.
Often, horizon lines (and trees etc) are not particularly straight, which give us a fluffy, loose feeling, although there are still relatively linear elements to paintings such as vertical trees (and horizontal horizons). If you squint, you can break down images slightly easier.
Web Page Layout – Magnetism of the Frame
Borders tend to have a magnetic pull. It can be so strong visually, visually powerful that is, that it distorts our sense of gravity. The most stable position is in the center. Corners have a really strong pull (to be avoided). The sides of the screen overpower gravitational pull. Even when placed near the top edge, an object can often overpower gravity. If it reaches a slightly lower position, gravitational pull may outweigh it. If an object takes up most of the frame, it appears much larger, and evokes a feeling of expansion, whereas, if it is small and centered, it suggests compression, and will seem much smaller than it actually is. There must be a proper amount of headroom when people are in the frame, to avoid inappropriate gravitational pull and off-balance composition. This pull of the upper edge can also be used to one’s advantage, as it has been throughout history, in the arts. Objects near the top edge can seem more imposing. The aspect ratio of the screen will effect how a screen should be composed visually, and whether it will be balanced. The pull of the side edges can be useful when emphasizing an objects’ width or a lack of space (against the edge). Avoid placing someone’s head against the edges – it may appear too large. Large objects (more graphic weight, stability, attractiveness, saturation) overpower smaller ones.
Some items, if placed in the right portion of the canvas, can generate a pull towards the frame’s borders. This is a critical component to any graphic composition, even in the event of designing a logo or other graphic.
Web Page Layout – Asymmetry of the Frame
If two sides of the frame are unequal (unbalanced structure), they are asymmetric. We read diagonals from left to right, which alters our perceptions. Placement on the screen can enhance screen direction and magnetism of the frame. We perceive motion and gravity in certain ways on a screen. The more important object should be placed on the right side of the screen. These principles are particularly useful when designing websites or web pages. The content should be placed on the right, and the lesser (visually) important navigational links, to the left.
Items and graphic objects that are aligned aesthetically in the foreground can be aligned vertically with the first third of the frame (from left to right). If nothing is centered or balanced symmetrically on the X and Y axes, the image is asymmetric.
Web Page Layout – Figure and Ground
This is an automatic mental activity that allows us to distinguish foreground from background (positive from negative space). The foreground is the “figure” and the background is the “ground”. The relationship between figure and ground can be reversed. With a moving camera or evolving field of view, the relationship between figure and ground is constantly changing. When you change the zoom, (closeup or longshot), the relationship changes. The figure is something that is tangible, whereas ground is simply unused space. The outline which separates figure from ground, belongs to figure. The figure is more likely to change than the ground (less stable). Ground seems like it continues underneath figure. Figure and ground cannot be perceived simultaneously. You can superimpose images to deliberately blend elements of figure and ground. Sound can also have certain more prominent figure-like audio, and a main, consistent ground.
For example, in certain images or graphic layouts, the figure (foreground) may consist of the trees, and a vibrant white and blue snow, and some green grass. However, your website’s background (mountains and sky) should consist of lighter, duller colors.
Web Page Layout – Psychological Closure
We often fill in gaps in various page layouts, complete shapes and forms that we perceive. This is what allows us to recognize patterns. We need a minimum amount of information to be able to perceive this closure. Low definition images require much more closure than higher definition ones. Television watching necessitates much more psychological closure than HDTV or film. Sometimes, higher resolution is not always better, especially during intimate scenes. Lower definition images are only desirable if they enable closure instead of inhibiting it. Low-definition requires more mental effort. Proximity is when similar elements are near each other and are visually grouped, to form larger shapes or lines. Similarity is a phenomenon that occurs when we group similar shapes together. Continuity occurs when a dominant direction is established and is not disrupted by surroundings. These phenomena are based on our desire to sustain visual rhythm.
A great example would be a background that is blocked by the trees and shrubs in the foreground as we are still able to imagine its continuation.
Web Page Layout – Vectors and Other Linear Composition Principles
Vectors are directional forces which lead our eye from one object to another. Graphic Vectors are created by motionless objects that lead our eyes in a particular direction. Index Vectors are created when something aims in a mandatory direction. Motion Vectors are created by objects in motion. Vector Magnitude (strength) is measured by screen direction, graphic mass, and object speed. Z-AXIS Vector is when something is aimed at or away from the camera. It is the distance between the camera and the horizon. Essentially, magnitude is determined the speed (and graphic mass) at which an object traveling along a specified path. Camera movements can also enhance magnitude. Continuing Vectors are created when two or more vectors are aimed in the same direction. Similarly, Converging Vectors are when two or more vectors point toward one another, Diverging Vectors are when vectors are going in opposite directions. A Mental Map is where you see things on and off of screen space.
For example, dark blue splotches of paint create the illusion of a line, which leads us into the center of a frame towards a tree further in the background. We are able to enter the image. Always use these traditional design principles, even when creating a unique web page layout or complete web page design.