Design Principles and Elements 
  • www.studio07.jp/Design Element: White Space
    The angles and lines of the image on this site create a sense of movement throughout the rest of this page. This is possible because of the elegant and simple use of white space which provides plenty of “breathing room.” This page successfully communicates that this company provides high quality designs with a sense of expansiveness.

    White Space is the space between elements.
  • www.showcase.ucf.edu/Design Element: Color and Value
    The very bold yellow color creates a focal point for the most important information on the page. Even though it is very bold, there is a calm feeling because the rest of the page makes use of lighter yellows (yellows with less color value), grays, browns and golds. The way the color yellow is used communicates an upbeat and high quality program.

    Color should emphasize content and subject matter.
  • www.bearskinrug.co.uk/Design Element: Grid
    The successful use of a grid in this design gives the user a sense of comfort because the information is aligned and clear, which in turn gives the page a unified look. This site maintains a sense of openness that isn’t achieved by many grid based designs. Some sites with grids can seem crowded.

    Grids are achieved by dividing content into rows/columns.
  • www.cimbal.net/Design Element: Photography
    The opening images of this site are large, strong and beautiful. They have a lot of visual weight, which successfully communicates that this site is providing the viewer with visually stimulating photographs and images. The designer was very creative in cutting the images so that they also are links while maintaining a sense of unity in the design. The rollovers are elegant.

    Photography helps make content believable, adds clarity and helps set a mood.
  • www.mojoson86th.com/Design Principle: Symmetrical Balance
    The symmetry and balance of this site provides the viewer with a clean design that makes the information extremely stylish, readable and accessible. This calmness is balanced by the emphasis of bold and close-up photographs that produce a sense of excitement, almost like the images are jumping off the page.

    Symmetrical balance is achieved when all elements are distributed evenly on either side of an imaginary axis.
  • www.prana.com/Design Principle: Asymmetrical Balance
    Asymmetrical balance is produced by the photographs, illustrations and text of this site to create an organic, comfortable and competent look and feel. The subtle grays and greens with highlights of oranges and yellows are congruent with the design. It successfully makes you desire to be in nature! This site also successfully demonstrates designing “above the fold.”

    Asymmetrical balance is achieved with an unequal distribution of elements.
  • ilovetypography.com/Design Principle: Emphasis
    The extreme emphasis on the word “Typography,” leaves no doubt about the focus of this site. You feel the passion even before you discover the tiny words “I love” that sit on top of the headline. The images and use to text communicate the focus of this site as well.

    Emphasis requires an element to look different than other elements.
  • tpi.net/Design Principle: Alignment
    Everything on this page is visually connected with the other elements. A sense of unity is created by the alignment of images with text, and text with text. The colors contribute to the alignment of columns as well.

    Alignment is achieved when elements are visually connected.
View Websites by Clicking on Images

Valid XHTML    Valid CSS    Return to MMSpahn Creations Projects

Michelle Spahn's Midterm Project: Design Journal (DM 76)