Thursday, March 23, 2017

Principles and Elements of Art in Web Design

"People ignore design that ignores people." — Frank Chimero

Art and Design elements are the basic units or building blocks of a visual image. The principles of art and design govern the relationships of the elements used and also organize the composition of a visual image as a whole. All imagery, art, design and photography alike, are comprised of elements that can be broken down and analyzed. 

Look over these posters, the first addresses the principals, the second addresses the elements and provide visual representation or examples of these concepts. Continue scrolling down for written explanations in more detail,  there is an assignment at the bottom of this post to complete. Read the details and ask questions before beginning.




The Elements of Art and Design
Space: Space refers to the distances or areas around, between or withing components of an image. It can exist in two or three dimensions. Space can refer to positive space(a shape, such as an apple) or negative space (the absence of an apple shape). It can also refer to elements in the foreground, mid or background of an image.

Line: Line is the basic element and refers to the wcontinuous movement of a point along a surface, such as a pencil or brush. Line can also be created by the edges of other shapes. Lines can vary in length, thickness and direction.

Balance: Balance can either be symmetrical or asymmetrical. The balance of an image can affect the focal point of an image. The location of objects, their sizes and colors, textures and shapes all affect the perception of balance in an image.

Color: Color and particularly, contrasting color is used to draw the eyes attention to certain areas. It can invoke mood and emotion. Color is created in many different ways... but in all color spectrums, there are primary colors, which all other colors are derived from, and secondary and tertiary colors. Certain formula’s exist for choosing colors that are pleasing to the eye, one way is using Complimentary Colors, which appear opposite each other on a color wheel. Colors can be perceived as “Warm” such as reds, yellows and oranges, other colors are “Cool” such as purples, greens and blues.

Shape: Shapes are what give objects their definition. Think of the silhuoette. Shapes can be organic (curved, soft, random) or geometric (angular, sharp, organized, complex).

Texture: Texture is perceived surface quality. In art two types of texture exist, tactile and implied. Tactile texture is the way a surface actually feels, such as sandpaper or tree bark. Implied texture is the way the surface of an object “looks” like it feels. This is created with different pencil and brush techniques. In the modern digital realm, texture is a strong ally in design.

Value: Value is an element that refers to the relationship between light and dark. It can also be referred to as tone or shading. The value of an object helps give it form and depth. 

The Principles of Art and Design
Unity: Unity refers to a sense that everything in a piece of work belongs. It can be referred to in the literal sense of course, or just by the way balance, repetition and other elements acheive a design harmony.

Variety: The use of dissimilar elements. Differences in shape, texture, color, line etc.

Repetition: This refers to the recurrence of elements within a piece. Color, lines, shapes and other elements can be echoed, often with some subtle variation to maintain interest. Repetition can be random or organized, or express rhythm and patterns.

Harmony: Harmony is acheived through the sensitive balance of variety and unity. Harmony in color can be acheived by using complementary or analagous colors. Harmony in design is reflected in consistency in style, similarity of components. Harmony can also extend to the use of texture, color, scale etc.

Contrast: Contrast is the occurrence of differeng elements, such as color, value, scale etc. It creates interest and helps direct the focal point. Contrast helps define depth and space as well. Objects that are closer to use appear lighter, and objects that are farther away often appear darker.

Proximity: This refers to the physical placement of objects or elements in a piece. Proximity is used to communicate ideas like relation, importance or hierarchy.
Proportion: Proportion involves the relationship between objects. It is relative to size and scale. Proper proportion is important in implying realism, and skewing proportion can force the viewers perspective to change. One classical expression of proportion is the “Golden Ratio” in mathematics and the arts. Throughout history, the ratio for length to width of rectangles of 1.6 (roughly) has been considered the most pleasing to the eye. 

Functionality: In the design world, good design is created for a purpose. This is the difference between art and design. Art is created for the aesthetic value, while design is created to communicate. Art is developed by artists often to satisfy personal motivation. Design is created by designers, for clients, to communicate a message or information. Good design must be aesthetically pleasing as well as informative.

Principals and Elements of Web Research Assignment:


Penhaligon's is a UK store that sells fragrances among other things. Their flower bouquet ordering website uses clever layering of elements and colorized vintage illustrations to create texture and depth in their site.
Use the internet and search engines to find websites that demonstrate good usage of the artistic principles and elements discussed today in our lecture. Use correct search terms to collect, cite and explain how each website is utilizing the principle or element. Collect your examples in a single HTML/CSS page that uses clean typography/color usage for emphasis.

Assignment Specs:
  • Single HTML/CSS page with clean typography and color usage.
  • At top of page display your name.
  • Below your name create a title for your assignment called "Principles and Elements of Art through Web Design".
  • Below your title list the element or principle your are displaying, discussing such as "Line" or "Color".
  • Below your subtitle display a link with a screenshot or embedded image from your website.
  • Below your image write the web site address and turn it into a link.
  • Below your link write an explanation discussing how the site demonstrates the artistic principle or element in question.
  • Continue until all elements and principles are covered, check links and spelling before turning in.

Assignment Requirements:
Find a website that demonstrates good usage or approach to each of the following elements and principles and write 1 sentences that discusses or communicates how the site is achieving the use of said principle or element. You should have 8 total references when complete...
  • Elements
    • Variety
    • Repetition
    • Harmony
    • Functionality
  • Principles
    • Line
    • Balance
    • Color
    • Texture
Display all your examples with screenshots, links, explanation, titles, etc in a single HTML/CSS page and turn in when complete.

Have fun!

- Mr.W