The Elements and Principles of Design applied to Web Design
Definitions referenced from, "Design for Communication, Conceptual Graphic Design Basics", by Elizabeth Resnick
The Elements of Design
Line is the element of length as a mark connecting any two points. Lines can organize, direct, separate, be expressive, suggest an emotion, or create rhythm. They can join elements or divide them using a rule, which is a line that separates one element in a design from another. Let's take a look at some examples:
- The Morning News uses horizontal and vertical lines to separate and organize content.
- Pelan idea uses thick horizontal lines as separators of information. Decorative lines are used in the left column suggesting an emotion.
- Truf Creative uses horizontal lines to separate headline text from the main content of the page. Lines are used in the body of the home page to divide chunks of information.
Shape refers to the external outline of a form or anything that has height and width. An example would be the three basic shapes: the circle, the square, and the triangle, considered to be the fundamental shapes found in all design. Examples of shape in web design:
Texture is the look and feel of a surface. In two-dimensional form, texture is essentially visual and adds richness and dimension to work. Texture can also refer to pattern, which is visual texture. Examples:
- Edge Point Church uses a stucco-wall texture that frames the background of the page, and uses distressed logo and display type.
- Jesus Rodriquez Velasco uses illustration to create a texture in the header portion of the layout.
- Open Doors Student Site uses a distressed and worn texture in the background top portion of the layout, and in the blocks of information in the layout.
Space refers to the distance between shapes and forms, but it is best understood in design as white space or negative space—terms used to refer to the empty but often active areas that are void of visual elements. Examples here:
- Fritula uses a narrow content width to exploit the empty space on both sides of the content. The logo/illustration occupies the top-left empty space, and small blocks of text occupy a portion of the right empty space.
- Web Dots uses a very narrow column for the content.
Size is how big or small something is in scale to other objects. Scale refers to the process of making size relationships. Unless there is a scale of reference within a design, it is impossible to discern the relative size of objects and the meaning they represent. Examples of size and scale:
- 3000k uses a large sized image to occupy the top portion of the layout. The scale of the headline text within the large image, is large when compared to the smaller body copy, immediately beneath the large image.
- Black Estate Vineyard uses large-scaled type for headline and subhead text. The size difference between the headlines and body copy is dramatic.
Value is the relative lightness or darkness of an area or object. Value adds dimension by creating the illusion of depth in a design. With the addition of color, you can create and convey a mood to enhance a strong concept. Examples of value:
- Defiance, a CSS Zen Garden creation from James Ehly, uses red and black to convey a certain mood and feeling.
- Elite spring water uses greens and blues to convey a healthly, environmentally-friendly message.
Once the concept is formally realized, it will need to be applied. The principles of design—balance, emphasis, rhythm, unity, and contrast—define the structural foundation of a design and determine how the various design elements are organized within the web page.
The Principles of Design
Balance occurs when all the design elements are equally distributed through the design. There are essentially two types of balance: symmetrical and asymmetrical. Symmetrical elements are arranged equally on both sides of a composition to suggest a stable or static motion. Asymmetrical elements create a deliberate imbalance to suggest variety or dynamic movement. Examples of balance:
- Gisele Jaquenod is using a symmetrically balanced three column layout. The majority of content is placed in the center column, and other supporting content is placed in two columns equally sized on both sides of the center column.
- Jeffrey Sarmiento has an asymmetrically balanced layout with the weight of the content and images being on the left side, and the right narrower column is more sparce with information. The asymmetrical balance activates the content.
- Dinulovic uses a symmetrically balanced layout through out the web site. This creates a stable feeling which is appropriate for the theme and content of the site.
- Mosaiko has asymmetrical balance in the layout. The large-sized banana image at the top right of the layout is balanced out with the equally-sized banana peal in the lower left corner of the layout.
Emphasis indicates the most important element on the page based on the message. It's the element that stands out and gets noticed first. The most emphasized visual element in a design is called a focal point because it attracts the viewer's attention first. How can you create emphasis in a design? By taking an element and making it bigger, bolder, or brighter, by putting it in a contrasting color, or by surrounding it with white space. Examples of emphasis:
- Giorgio Molinaro uses large-scaled type on the front page, to give emphasis to the subject matter of the website.
- Toucouleur places a large-sized illustration in the most prominent position of the layout. The user has to scroll down to read the body copy on the page. This forces the viewer to spend time looking at the illustration. Thus, the emphasis is placed on the illustration.
If you are going to exploit the principle of emphasis in a web design layout, make sure that you have a good reason for doing it, otherwise it could cause frustration and confusion in the user.
Rhythm is a pattern created by repeating elements. Rhythm denotes the movement in the way that elements direct our gaze to scan the message for understanding the information. The term sequence is used to refer to the viewing order of the elements and to determine the flow of a multipage publication such as a magazine, book or large web site. Examples:
- The College of Arts and Sciences at the University of Miami creates visual patterns throughout their website. The thumbnail images in the body of the page are each treated in a similar manner: Same physical size, with a headline of text and a block of copy directly to the right of the image. This simple treatment of information within a web page creates a visual pattern that easily allows the reader to scan through the content. These blocks of information are repeated down the page, creating a rhythm to the flow of content.
- Cameron Moll creates rhythm in this portfolio page of his web site by creating a consistent design treatment for each portfolio image and accompanying information, and then repeating these content blocks down the page. This allows the user to scan through each piece quickly.
- CNN.com uses consistent design elements on the entry page, that are then repeated down the page. This is seen in the blocks of information that have a consistent headline font size and color, and also in the thumbnail image size. This gives order to the mass of information displayed on the page, and allows the user to quickly scan through to find the topic or subject they are looking for.
Unity is achieved when all the design elements relate to one another and project a sense of completeness. A viewer will always seek unity in a message. Without it, the viewer will lose interest. Designers use ideas drawn from gestalt theory to help unify their designs. Gestalt theory is the psychological process by which a viewer unites disparate design elements into a whole form that is greater than the sum of its parts. Two such ideas are grouping and figure/ground. Grouping happens when elements are close together and visually appear as part of a group. Figure/ground occurs when a viewer can identify an object (figure) as a shape distinct from its background (ground). This perception is dependent on the design principle of contrast.
On a basic level, unity in design can be achieved when all of the elements within the design or layout relate to each other. For example, an image must relate to the text it is next to, otherwise the overall message will not make sense to the viewer.
- Activate Psych Services creates unity in their design in one aspect, by taking the colors from the logo and re-using the colors in the overall design. The blue is taken from the logo and a similar shade of blue is used in the right column of the page. The yellow is taken from the logo and used in the background container of the page. The colors relate to each other, therefore creating a visual unity in the design.
- Gling Glo creates unity in their design in the consistent use of color (yellow) and in the use of the fonts on the page. All of the fonts on this page are sans-serif. The headline fonts are a similar size to the logo type treatment, and are similarly bold and in all caps. This repeated treatment creates a visual harmony that unites the page. If the designer of this web site decided to use a variety of unrelated fonts, at various sizes, it would create visual noise in the page, discouraging the viewer from remaining on the web site.
Unity is what makes the content attractive and understandable to the viewer. Where there is no unity in the design, the message can appear confusing and undesirable to the viewer.
Contrast stresses the visual differences in size, shape, and color between the elements to enhance the perception of a message intended. Contrast also draws and directs the viewer's attention to specific areas of information. Examples:
- The Web Standards Project uses contrast in their design to draw and direct the viewer's attention to specific areas of information. The header portion of the page uses a black background color with white text. This contrasts with the body of the page that has a white background color with black text. The contrast separates the header from the lower right portion of the page and helps the user to understand these two areas as having different levels of importance. The different levels of importance refers to heirarchy of information. Creating a heirarchy is important to a designer, because when it is correctly applied, it gives you the ability to lead the eye of the viewer through each area of information in the order you (the designer) specify.
- Contrast, the web application company website, uses contrast as the central visual theme of the design. The white contrasts with the black. It separates blocks of information, and leads your eye from one block of info to the next, on down the page.