Designing for Online Learning
Menu
  • ENGAGEMENT
    • Close
      • Elements
        • Close
          • Overview
            • Close
              • Elements of Design
            • Close
          • Line
            • Close
              • Use of Line
            • Close
          • Shape
            • Close
              • Use of Shape
            • Close
          • Form
            • Close
              • Design Trends: Dimension
            • Close
          • Color
            • Close
              • Use of Color
              • Color Theory
              • Color Codes
            • Close
          • Value
            • Close
              • Design Trends: Gradients
            • Close
          • Space
            • Close
              • Use of Space
            • Close
          • Texture
            • Close
              • Use of Texture
            • Close
        • Close
      • Principles
        • Close
          • Overview
            • Close
              • Principles of Design
            • Close
          • Contrast
            • Close
              • Use of Contrast
            • Close
          • Scale
            • Close
              • Use of Scale
            • Close
          • Repetition
            • Close
              • Use of Repetition
            • Close
          • Symmetry
            • Close
              • Use of Symmetry
            • Close
          • Alignment
            • Close
              • Use of Alignment
            • Close
          • Proximity
            • Close
              • Use of Proximity
            • Close
          • Hierarchy
            • Close
              • Use of Hierarchy
            • Close
        • Close
      • Putting It All Together
        • Close
            • Use of Photographs
            • Composition: Extolling the Hero
        • Close
    • Close
  • TECHNOLOGY
    • Close
      • Tools
        • Close
          • Open Tools
            • Close
                • Free Online Tools
                • Bible Study Tools
                • Google Tools
                • Presentation Tools
                • Video Recording Tools
            • Close
          • Moodle Tools
            • Close
                • How to Set up a Peer Review in Moodle
                • How to Import Quiz Questions in Moodle
                • How to Set Up Moodle Q&A Forums
                • How to Set Up Moodle Books
                • How to Set Up Moodle Lessons
                • How to Set up the Gradebook (Part 1)
                • How to Set Up the Gradebook (Part 2)
                • How to Embed Links and Videos
                • Extending Moodle Using HTML (Part 1)
                • Extending Moodle Using HTML (Part 2)
            • Close
        • Close
      • Tasks
        • Close
          • Content Creation
            • Close
                • Using Images in Moodle
                • Finding Images to Use
                • Best Practices for Using Video Online
                • Alternatives to Video
            • Close
          • Learning Activities
            • Close
                • Moodle Books and Lessons
            • Close
          • Communication
            • Close
                • Video Conferencing for Meetings
                • Forum Subscriptions in Moodle
            • Close
        • Close
    • Close
  • LEARNING
    • Close
      • Understanding Learners
        • Close
          • Learner Differences
            • Close
                • Multiple Intelligences
            • Close
          • Readiness to Learn
            • Close
                • Readiness to Learn
            • Close
          • Learner Experience (LX)
            • Close
                • Learner Experience (LX)
            • Close
        • Close
      • Understanding Learning
        • Close
          • Adult Learning
            • Close
                • Adult Learning – Part 1
                • Adult Learning – Part 2
            • Close
          • Self-Directed Learning
            • Close
                • Self-Directed Learning
                • SDL Skills
                • SDL Learning Processes
            • Close
          • Reflective Learning
            • Close
                • Reflective Learning
            • Close
          • Active Learning
            • Close
                • Active and Participatory Learning
            • Close
          • Collaborative Learning
            • Close
                • Collaborative Learning
            • Close
          • Transformative Learning
            • Close
                • Transformative Learning
            • Close
          • Lifelong Learning
            • Close
                • Lifelong Learning
            • Close
        • Close
      • Learning Pathways
        • Close
          • Modalities
            • Close
                • Course Modality Paradigms
                • Blended Learning
                • Blending Synchronous and Asynchronous Approaches
            • Close
          • Information Architecture (IA)
            • Close
                • Information architecture
            • Close
          • Professional Development
            • Close
                • Communities of Practice
            • Close
          • Other Pathways
            • Close
                • Designing for High and Low Bandwidth Contexts
            • Close
        • Close
      • Backward Design
        • Close
          • Overview
            • Close
                • Backward Design in 7 Steps
            • Close
          • Outcomes
            • Close
                • Writing Cognitive Objectives
                • Writing Behavioral Objectives
                • Writing Affective Objectives
            • Close
          • Evidence
            • Close
                • What counts as evidence?
            • Close
          • Assessment
            • Close
                • Diagnostic Assessment
                • Formative Assessment
                • Summative Assessment
            • Close
          • Blueprint
            • Close
                • Scaffolding, Alignment, and Distribution
                • Creating a Design Blueprint
            • Close
          • Evaluation
            • Close
                • Evaluation
            • Close
        • Close
      • Developing Content
        • Close
          • Open Educational Resources (OER)
            • Close
                • Open Educational Resources (OER)
            • Close
          • Pedagogical Strategies
            • Close
                • Designing Good Discussion Questions
            • Close
        • Close
    • Close
    • Close
    • Close
Principles of Design: Contrast

Use of Contrast

By Jill Zwyghuizen

» Engagement » Principles » Contrast » Use of Contrast

What is contrast? Contrast is the juxtaposition of design elements that are different. The greater the difference, the higher the contrast. Low contrast is subtle. High contrast draws attention.
Color is one way to show contrast, but it is not the only way. Elements like shape, size, texture, and value can also be used for contrast.
Not every element in a design needs to contrast with every other element. Some level of similarity is needed in order to make the focal point pop. If every element is different, then nothing stands out.
Why use contrast? Contrast draws the eye, which means it is a useful tool for designers to use to direct the viewer to the most important feature of a design. The key is not to overuse contrast. Which graph communicates best?
Contrasting Fonts Designers often pair two fonts to show the difference between titles and text or between the main idea and the supporting details. A script font could be paired with a non-script font, or a serif font with a sans serif font. Utilizing different weights of the same font also works well. Different fonts draw contrasts between words.
How to Pair Fonts It is easy to find lists of recommended font pairings for web design. The key to matching fonts is to find a pair with enough differences to be distinct, but not so different that they clash. For beginners, using a serif and a sans serif from the same font family is an easy way to find fonts that work well together. Examples: Merriweather and Merriweather Sans; Josefin Slab and Josefin Sans; Roboto Slab and Roboto; Noto Serif and Noto Sans (Noto supports many languages).
Using Font Weights Some fonts have multiple weights that can be combined to show the relative importance of various elements in the design. Using different font sizes can also support the contrast. Examples: Lato Black, Bold, Regular, Light, Hairline; Montserrat Black, Extra-Bold, Bold, Semi-Bold, Medium, Regular, Extra-Light, Thin. (Montserrat pairs well with Lato)
Graphic designers juxtapose differing elements to create an eye-catching focal point, directing the viewer's attention to the most important feature; this is a design tactic that emphasizes what matters most.
Emphasis The principle of contrast is a very effective way to emphasize the most important part of the design. Whether it is the title, the big idea, the key statistic, or the relevant quotation, using contrast will draw attention to it. Supporting details are placed where the eye will look next, which is usually down and to the right--unless the design dictates an alternate pathway.
Principles of Design
PrevNext
Use of Scale
Sitemap
Contact us
Horizon Education

© 2021 Horizon Education Network. All Rights Reserved.