Basics of Web Authoring and Design

{Visual Design: Color Theory}

  • What is Color Theory? Purpose The Color Wheel Properties of Color Color Schemes Color Context

    • What is Visual Weight?

    Visual weight refers to how much an element attracts one's eye.

    Purpose

    By manipulating the characteristics that determine the visual weight of elements, you can create contrast and similarity between elements as well as draw attention to specific elements.

    Characteristics of Visual Weight

    Size

    Size is defined as the surface area of a form. It is one of the most powerful tools of organization.

    Practices
    - correlate the size of an element to its importance

    Color

    Color refers to the hue, saturation, and value of different elements within a webpage. Color is a multi-fuctional tool: it can work both as an organizational tool and a personality tool.

    As a organizational tool , color can be used to group certain elements together and categorize it into a hierarchy.

    Practices
    - group similar elements with similar colors to create an easy way for users to understand the layout of your website
    - follow an organized color scheme to help create consistency in your hierarchy organization

    As a personality tool , color can be used to bring an emotional appeal to your webpage.

    Practices
    - use different aspects of color theory to create an emotional response in users that will make the website appeal to them more

    Value

    Contrast refers to shifts in text, size, or color between different elements. It can be used to show the relative importance of elements.

    Practices
    - make more important elements contrast with their surroundings
    - follow an organized color scheme to help create consistency in your hierarchy organization

    Position

    Alignment creates order between elements. The use of alignment in web design has many benefits: it can provoke interest from your users if used in unique ways; it can give importance, such as things that are placed at the top-right of the screen which users are used to being the location of official or pertinent information. Alignment creates start and end points on a page and if used correctly can lead your viewers from one section to another. When a single element breajs out of the established alignment, it calls attention to itself and its importance.

    Practices
    - make more important elements contrast with their surroundings
    - follow an organized color scheme to help create consistency in your hierarchy organization

    Texture

    Repetition assigns relative meaning to text.

    Practices
    - use headers for main topics
    - follow an organized color scheme to help create consistency in your hierarchy organization

    Shape

    Texture is the quality of the surface of a shape, it is how a surface feels or is perceived to feel. You can create a texture that will become a pattern by repeating an element throughout your site. Texture can be created visually within a website to attract or repel interest to or from an element.

    Practices
    - use headers for main topics
    - follow an organized color scheme to help create consistency in your hierarchy organization

    Orientation

    Practices
    - use headers for main topics
    - follow an organized color scheme to help create consistency in your hierarchy organization