Module Four - Project Design Elements

Module 4.1 Information Design

Content Design

Curriculum Mapping

It is important to have an overview of your curriculum for the entire school year before you plan a major technology rich project. Reflect on each subject area you teach. Using Inspiration™ map out your school year. See the following example for 6th grade social studies:

Image goes here!

Do this for each subject you teach.
Next, select the area you would like to turn into your project. Think thematically about how this curricular area fits with your other curriculum areas. For example if you choose Early Man, students can read Maroo of the Winter Cave for language arts. They can create a diary of Maroo’s journey as if they were Maroo. Number systems might be a good mathematics fit. Cave art would be an appropriate art activity. Plate Tectonics and Earth's Structure might be an appropriate science fit. Only include curricular area which are an obvious fit. The following WebQuest might be a good activity for your students:
http://projects.edtech.sandi.net/lewis/caveart/.
Using Inspiration™ create a thematic chart for your chosen curricular area. For now, put your curricular area in the center of the chart. See the following example:

Image goes here!

Later you will take this chart and find the content standards that match your project’s curricular areas. Then you will write goals and objectives for your project.

Information Mapping and Graphic organizers:
These are graphical tools that can be used to organize information. They are powerful because they show relationships between different types of information. They generate ideas for understanding, categorizing, or writing.
A graphic organizer forms a picture of information and allows the mind 'to see' patterns and relationships. The emerging patterns and relationships create opportunities for decision making, sharing, and communicating information following a logical pattern or flow.

For more about Graphic Organizers:
http://www.graphic.org/goindex.html - graphic organizer, concept mapping, and mind mapping examples.
Freemind Graphic Organizer -  Freemind is an open source mind mapping tool.
Inspiration - software to clarify, organize, and analyze information

Once you've got the information organized for your project, you may want to think about how it will be presented on a web page.  The following sites give an overview of what are good and bad web pages.

Navigation

Usability

Here's a usability checklist for an effective website:

Navigation

  • Architectural Logic – Information follows logical flow
  • A link to the home page is on every page
  • Navigation is consistent on every page
  • Topics are clear and prominent
  • Contact information or authorship is on every page

Design

  • Look & feel of each page is elegant and it enhances the presentation
  • Site wide design consistency
  • Images are relevant and meaningful
  • Images and illustrations are of high quality
  • Appropriate use of Multimedia or Flash

Content

  • Positioning of main topics and subtopics according to importance
  • Home Page Who, What, Why
  • Information is easy to skim through

Typography

  • Fonts are legible and compliment the design of the page
  • Format & layout follows basic design principles
  • Appropriate Use of Headers and Links

Technology

  • Browser compatibility – Has the web page been checked to see how it displays in different browsers?
  • Page Download time - Does the page load fast?
  • Graphics compression – Are images loading fast enough?
  • ALT tags for images

Resources for making a usable web page:

Module 4.2 Understanding Your Audience

The guiding question for the K-12 student needs assessment is:

What are the essential learning outcomes for our students at their developmental level(s)? The objective is to identify learning goals and priorities that can be met through uses of technology.

Our vision statement specifies the following essential student learning goals:

  • Our students' existing strengths for achieving this vision are:
  • Our students face the following primary barriers to achieving this vision:
  • Key action strategies to help our students overcome these primary barriers are:
  • Empowering uses of technology to facilitate and enhance student learning are:
  • Ways to assess the impact technology has on student learning goals are:

The guiding question for the parent-community needs assessment is: What does the parent-community need to help students reach essential learning outcomes? The objective is to identify uses of technology to facilitate parental and community involvement aimed at helping students achieve essential learning outcomes.

Our vision statement specifies the following about parent-community involvement:

  • Our parent-community's existing strengths for achieving this vision are:
  • Our parents and community members face the following primary barriers to achieving this vision:
  • Key action strategies to help parents and community members overcome these primary barriers are:
  • Empowering uses of technology to facilitate and enhance parent-community involvement are:
  • Ways to assess the impact technology has on parent-community involvement are:

The guiding question for the school staff needs assessment is: What does the school or district's staff need to help students reach essential learning outcomes? The objective is to identify your school or district's staff training and resource needs to effectively implement uses of technology to help students achieve essential learning outcomes.

Our vision statement specifies the following about our organizational staff:

  • Our organizational staff's existing strengths for achieving this vision are:
  • Our organizational staff members face the following primary barriers to achieving this vision:
  • Key action strategies to help our organizational staff members overcome these primary barriers are:
  • Empowering uses of technology to facilitate and enhance our organizational staff are:
  • Ways to assess the impact technology has on our organizational staff are:

Module 4.3 Visual Design

Basic Design Elements

Emphasis
Contrast
Balance
Alignment
Repetition
Flow

Focal Point
Movement
Pattern
Proportion
Unity
Variety

Design elements are used to communicate important messages, concepts, and themes to the viewer. Their purpose is to attract attention and encourage viewers to explore the layout.

  • Emphasis - Using size, style, and contrast to draw the viewer's attention to the most important aspect of the design.
  • Contrast - Using lights and darks close together. The eye is drawn to areas were bold lights and darks meet.
  • Balance - Placing items slightly off-center so that interest is created and symmetry is maintained.
  • Alignment - Grouping similar items together. Grouping objects to create a flow.
  • Repetition - Creating interest through use of patterns
  • Flow - Guiding the eye through the design from most important to least important objects in the design.
  • Focal Point - Creating one area in the design that captures the viewer's first glance and sets the direction that the eye will follow throughout the viewing of the design.
  • Movement - Placing visual elements in such a way so that they bring the design to life.
  • Pattern - Framing objects of interest, creating repetition.
  • Proportion - Complimentary sizing of objects
  • Unity - Creating an overall style or theme
  • Variety - Developing interest through diverse visual objects

Image Goes Here!

In the layout on the left the eye is first drawn to the title of the page. The eye falls there first because it is the area of highest contrast. Next it moves to the area surrounding the flower vase, also because of the use of high contrast. Bright white is shown up against a shade of dark brown.

In the layout on the right the eye is first drawn to the title, and then to the word Furniture. This word becomes a focal point because it is emphasised with a heavy font. It shows high contrast with the lavendar background. The white frosted line emerges from it in a circular motion to guide the eye around the content displays on the page.

Both layouts also have examples of design elements of balance - all items are slightly off-center, repetition and pattern- the pillows and left navbar, unity - a consistency in design, focal point, flow and movement - the eye falls to an area off-center and circles around the design. In both examples the eye is guided to stay in the image; not to look away.

The following Web sites will give you more information about these elements and principles:

Layout

The key to layout in any media is balance and symmetry. Where your graphics are placed, the size of your fonts, and where lines or borders are placed all affect your layout. On the contrary, too much symmetry and balance can be dull, and content will be lost to the reader. The goal of a good layout is to help guide the eye toward the most important items in the layout. Creating a focal point will direct the eye to the most important item as it guides the eye across the layout and keeps the eye in the layout.

What is a focal point? It is the point on the layout that the eye focuses on at first glance. Think of it as an anchor for the eye. It is the main point of visual interest for the layout. Its purpose is to direct the eye where to go automatically.

Focal points are created by using images or text that have stronger light/dark or complimentary color contrasts than the rest of the content on the page. They make layouts more intuitive and easier to read. They also provide guidance to the viewer. The best layouts have focal points that anchor the eye to the main subject of interest for a few seconds and then guide the eye in a circular direction around the page. This enables the eye to "take it all in" in a glance.

Rule of thumb: Try to cluster your design content items so that the eye is directed first to your main point of interest, and then guided toward other subtopics.

The 2/3-1/3 principle is a way of controlling balance and symmetry in a layout. The rule is, that if you divide your layout area into thirds, that two thirds of your content should be grouped together onto two thirds of your layout area, and the remaining third of your content should be grouped separately in the remaining third of your layout area, and each of these groupings are to be separated by background space.

Here is an example of two layouts that show variations of the 2/3 - 1/3 principle.

Many Images Go Here!

Sometimes it is easier to understand design principles when you can compare layouts that work with layouts that have design problems. Compare the Lanctot's Loveables layout with the examples below. Can you identify the design elements in each layout? What might you add or remove from Lanctot's Loveables to improve the quality of the layout design?

These articles provide good tips on layout design; everything from working with type to acheiving balance with proper use of white space.

Typography

Fonts

Images/Clip Art

  • Janet's Clip Art Image Repository - This is my image repository that I love to share.FreeFoto.com
  • FreeFoto: Free images; well categorized
  • Barry's Clip Art - This is the best clip art site. Lots of free stuff, and best of all, no popping adds. It's user-friendly and searchable. The topics are well organized. A great site!
  • Art Images for College Teaching - AICT site with free images for educators categorized by theme. AICT is a royalty-free image exchange resource for the educational community. Themes are Ancient, Medieval, Renaissance, 18th C, and Non-western. They even include a textbook concordance.

Color Theory

Task 4A: Make a Poster

You are to create and print a poster for your classroom to support your project.   This poster can focus on any aspect of your project such as a content element, skill component, pre-requisite or requisite knowledge, motivation, classroom management, student sample, etc. We have a large format printer to support the publication of this poster.   You will also need to submit a digital copy of your poster for our archives.

  • Please make your background white (due to the volume of ink used for colored backgrounds).
  • Your poster should demonstrate: Alignment, proximity, repetition and contrast.
  • You may use any software application you wish to create your poster. PowerPoint works well, but you can use Word, Photoshop, FireWorks, Illustrator, or any other application.
  • As you create you poster think about how digitally created student created posters might be integrated into your projects to enhance and demonstrate student learning.

Module 4.4 Storyboarding

A storyboard is a low fidelity prototype consisting of a series of screen sketches. They are used by designers to illustrate and organize their ideas and obtain feedback. They are particularly useful for multi-media presentations.

Benefits of a storyboard:

  • Provides an overview of the system
  • Demonstrates the functionality of the storyboard elements
  • Demonstrates the navigation scheme
  • Can check whether the presentation is accurate and complete
  • Can be evaluated by users.

Method

  • Brainstorm ideas, this may include lists, charts, doodles, and quick notes
  • Select the best ideas: re-consider the project requirements, time and resource constraints, and the target audience and end users. Select the top ideas and try to get feedback from others involved.
  • Sketch each screen, and describe any pictures, images, animations, sound, music, video or text.
Image Goes Here!

Storyboarding

Module 4.5 Digital Storytelling

Digital Storytelling Project

As part of this institute you are to become a technology integration leader in your school or district. To do this you will need the materials to help others effectively integrate technology into their curriculum. Your project plan and the completion of your project with students will be part of this process. Part of the job, however, is getting buy-in from teachers and administrators.

Instructions from last year (modify as desired to best fit your needs)

You are to create a short (30 second to 3 minute) digital video that uses what you have learned in this institute to help others understand the value of engaging students through the integration of multimedia and Internet technologies in the classroom. This video should be an “Into” or introduction to the value of integrating technology rich, multimedia projects into the core curriculum. This should be a good, highly compelling story extremely well told.

You will need to think about and establish:

  1. Target Audience such as teachers, principal(s), district level administrators, school board, parents, students, etc.
  2. Purpose—why are you creating this video? What concepts do you wish to convey? What is important for your audience to know and understand?
  3. Your point of view or perspective—the specific realization you are trying to communicate within your story.
  4. Emotionally compelling content (show, don’t tell)-- reach inside your audience’s consciousness and take hold of them.
  5. A sense of voice (yours, student, parent, school administrator, business community, civic leader, etc.).
  6. Images, video, graphs, animations, clip art, etc to be used for visual content.
  7. Sound track. (music, voice over)—to support your story in a dramatic and compelling way.
  8. Economy of content—using only “what is necessary to keep the story visually rich while moving forward, with only the minimum of dialogue and number of scenes necessary to allow us to envision the larger story.”
  9. Tempo, timing and pacing of video—the necessary rhythm of the story to sustain your audience’s interest.

Take a look at The Storytelling Cookbook to help guide the process. You may use any digital video editor you choose such as iMovie or Premiere, etc. The video should be short, compelling, motivating, and accurate.

Digital Storytelling Articles and Examples

About Digital Storytelling - What, Why, How... [Article]
Digital Storytelling in the Classroom
The Story Center Resources
Digital Storytelling Electronic Portfolios
A Fun Digital Story: Behind the Typeface - Cooper Black
Folktale Machine [Learning Object]
Bembo's Zoo: An Alphabet Story
BBC Digital Storytelling Workshop: Capture Wales

Module 4.6 Copyright and Fair Use

Copyright

In creating web pages or videos, it is important to keep in mind that the images and sounds you use may have been created by others. Following are resources for you to use as guidelines as you create your projects.

  • 10 Big Myths About Copyright Explained - An attempt to answer common myths about copyright seen on the net and to cover issues related to copyright...
  • Before You Post - Internet law is constantly being rewritten and/or revised. In order to stay within the law, it is necessary to be aware of current guidelines. Links provided will be helpful to educators and students engaged in Internet research or web posting.
  • Copyright Quiz from CSU Sacramento:   20 question quiz with explanations for wrong answers. Seems current.
  • Citing Sources and Copyright Issues - A Trackstar Track annotated by Danny Williams - This track is designed to make the users aware of the copyright issues involved with using electronic resources. It also provides information on how to properly cite electronic resources. Information on the "fair use" for educational purposes is also included.
  • Copyright Bay - This web page represents the authors best attempt to explore "fair use" in the not-for-profit educational setting and present it in an informative and entertaining way.
  • Copyright Crash Course - Someone owns just about everything. Fair use lets you use their things - but not as much as you'd like. Sometimes you have to ask for permission. Sometimes you are the owner - think about that!
  • Copyright for Music Librarians - from the Music Library Association
  • Copyright Questions from Cyberbee - Site is appropriate to use with students for copyright basics.
  • Educator's Guide to Copyright and Fair Use - You can't afford to ignore the law, but neither can you afford to overlook the needs of your students. The good news for educators is that abiding by--and helping to shape--fair use copyright principles and guidelines is really not that difficult. Back by popular demand, a new version of our practical quiz by educator and multimedia guru Hall Davidson.
  • The Web: Teaching Zach to Think, by Alan November - Is your high school teaching students to access the Internet for research? Then it is essential that students also learn how to validate the information.
  • U. S. Copyright Office - the Copyright Office is proud to be part of a long tradition of promoting progress of the arts and protection for the works of authors. Our homepage has been created with the desire to serve the copyright community of creators and users, as well as the general public.

Fair Use

Creative Commons Licensing

Offering your work under a Creative Commons license does not mean giving up your copyright. It means offering some of your rights to any member of the public but only on certain conditions. Overview of the Creative Commons Licenses

Attribution - You let others copy, distribute, display, and perform your copyrighted work — and derivative works based upon it — but only if they give credit the way you request.

Noncommercial - You let others copy, distribute, display, and perform your work — and derivative works based upon it — but for noncommercial purposes only

No Derivative Works - You let others copy, distribute, display, and perform only verbatim copies of your work, not derivative works based upon it.

Share Alike - You allow others to distribute derivative works only under a license identical to the license that governs your work.

Readings:

 Web Resources:

This Copyright and Acceptable Use PDF document includes the following articles:

  • What is Copyright?
  • Fair Use Provision of the Copyright Act
  • Guidelines for Educators

Return to Top