Create an Infographic Using Google Sites

Middle school students can design an infographic using Google Sites. Google Sites, is a free app to anyone with a Google account. It is primarily a web design tool. However, it has many features that make it the ideal way for students In Grades 6-9 to create an infographic that is interactive, compelling, and lots of fun to build!

In a recent blog, we listed reasons for teachers to assign an infographic as an innovative method for students to demonstrate their learning. An infographic’s characteristics – simple graphics and brief text – as well as its interactive nature make it an ideal means of communication. As an alternative to report writing, students must use higher order thinking skills such as analysis and synthesis to summarize and condense information to the most essential facts to create an infographic.

google sites

The next decision is “What app should we use?” Here are some reasons to use Google Sites as an unlikely but ideal program to easily create an interactive infographic with elementary and middle school students.

Google Sites: A Great Fit for Making an Infographic

Divide Information Visually with Layouts

In Google Sites, the banner for the page title and various layout options are perfect for designing an infographic. The image blocks visually divide the separate parts of the infographic, which may be headings and text, clipart, number facts, links, and pictures. Sections draw the reader’s eye through the various parts of the document. The nature of simple web page building using image and text blocks makes creating an infographic with this tool so suitable.

infographic
Create an infographic using Google Sites that chunks the information into sections using Layout options.

Add Professionalism Using Themes

Google Sites helps students produce a professional looking infographic using themes. When a theme is chosen, the web document is limited to a coordinating palette of colors and fonts. This not only results in a high quality design but the publication appears well organized and integrated too. Scanning through the infographic is easier when the parts have a similar appearance.

Search for Images

Working within Google Sites, students can find and display the simple images that are typical of infographics. These cartoon-like pictures are used to convey data or facts quickly. Using the Insert Images tool, students search with keywords. By restricting the results to just Clip art or Line drawings, they can eliminate photographs and just find basic, universally recognized images ideal for an infographic.

icons
Search for simple images that convey a message.

Create Collapsible Text

One more reason to use Google Sites is that it provides collapsible text. This element can be added to create a box of text that can be expanded or collapsed by the viewer. Using this feature, you can give the option of looking at the contents or not, and thereby saving space on the document. In TechnoEarth, a collapsible text box is used to list sources of information for the infographic. If the reader would like to check facts or find out more about the topic, they can click to enlarge and see the contents. Often collapsible boxes are used for FAQs, allowing a viewer to scan through the questions and only read the answers of the ones in which they are interested.

collapsible text
An infographic will often list sources of information. Use collapsible text to show or hide the reference list.

Add an Image Carousel

Infographics do not typically use photographs, but instead have cartoon-like images. However, there is a limitation to using just icons to advocate about an environmental issue. This is because photos that show the cause or harmful effects can make a powerful statement. The good news is that Google Sites lets you do both using an image carousel.

To make an infographic engaging and interactive, the image carousel feature can be added. It shows a collection of picture files, by scrolling from one to another. To keep the publication true to an infographic, the first image should be an icon of a camera. However, after that the images can be photographs. In the TechnoEarth project students include on their interactive infographic, photographs showing the effects of an environmental issue.

Create image carousel of photographs.
Create image carousel of photographs.

Insert a Google Slide Deck

Another great feature of Google Sites is the ability to insert a document made in other Google Apps such as Docs, Slides, Sheets, Forms, and more. To keep the viewer engaged, students can add a rotating slide deck created in Google Slides to an infographic. Using the many features of Slides, the deck can have distinctive layouts, unique formatting, word art, graphic organizers, and more. The slides display brief facts and eye-catching images. They are set to play automatically, adding interest and variety for the reader.

Use Google Slides to illustrate facts about the environmental topic.

Design a Unique Drawing

Another file type that can be inserted into Google Sites is an image created in Google Drawings. As an alternative to searching for ready-made clip art, students can create their own one-of-a-kind artwork to add to their infographic. Instructions in TechnoEarth explain how to use the tools in Google Drawings to produce simple, but powerful icons. These graphics grab the viewer’s attention and communicate a concise message.

Google Drawings
Use Google Drawings to create original icons. Insert them onto the infographic.

Highlight Locations with a Map

Google Sites allows users to insert interactive maps constructed using Google Maps. Most infographics pinpoint the location where an issue or topic is happening. The drawback is that viewers only see a static image. However, with Google My Maps viewers can actively explore. By clicking on custom map markers, they discover interesting facts and photos about each spot.

Google My Maps
When the viewer clicks on an icon, facts and photos of the location display.

Learn How to Design an Infographic Using Google Sites

technoearth icon

Want to get started on an infographic using Google Sites? TechnoKids has a project for you! In TechnoEarth, middle school students become environmental stewards as they design an interactive infographic. They use Google Sites, as well as Docs, Slides, Drawings, and more. They follow instructions to select an important, real-world issue. The infographic outlines the cause, harmful effects, and solutions. Stakeholders are identified. A thematic map shows where the problem is located. The final web based infographic will inform and inspire.

What Is An Infographic?

What is an infographic? An infographic is a big picture that summarizes a topic. It is a one-page publication that presents information in a graphic way. Simple icons, symbols, maps, and charts combine to explain the data. Text is only used as labels or to briefly describe facts. The viewer explores the content by studying each section of cartoon-like images.

what is an infographic?
What is an infographic? An infographic is a one-page publication that presents information in a graphic way using simple images and text.

Why Use an Infographic?

An infographic is a simple but powerful way to communicate. There are many reasons to use it:

  • catches the interest of the viewer
  • outlines many facts in a compact space
  • conveys data quickly using images
  • informs without lots of written information
  • engages the viewer to think about the topic, because they must explore each part
  • makes a complex issue easy to understand

How Can Students Make an Infographic?

Now that the question “what is an infographic?” and “why use an infographic?” have been answered, the next question is “how can my students make one to demonstrate learning?” Older students with strong graphic design skills can use professional software such as Adobe Illustrator. Unfortunately, not all schools have access to this software, as it is expensive.

Another option for creating an infographic is to apply the drawing and image tools in Microsoft Word. This does limit the design to a standard-sized piece of paper. Although this is a suitable solution for students who are proficient users of Microsoft Office, beginners or younger learners may struggle with arranging their content.

A third choice for designing an infographic is to use Google Sites. Google Sites is a web creation tool that is typically used to build websites. However, the ability to add sections, combine simple images with text, rearrange the layout, and have an infinite page length make it ideal for students who lack strong graphic design or word processing skills. Please note, this option does require students to have Google Drive accounts. Moreover, if your students have school accounts, they must be granted permission to use Google Sites.

View an Interactive Infographic Designed Using Google Sites

how to make an infographic
Discover how to make an infographic using the lessons in TechnoEarth.

How Can Students Design an Infographic using Google Sites?

Are you interested in designing an interactive infographic using Google Sites? In the TechnoKids project TechnoEarth, students play the role of environmental stewards. They select a real world problem and are guided in the research and design of an engaging infographic.

Google Sites, Slides, Docs, and Drawings are combined to build the document. Simple, compelling graphics and brief, captivating text spark interest. To make it especially appealing, the project is interactive. The viewer can browse a rotating slide deck, explore a map, and click through an image carousel. The web-based infographic is a powerful way to communicate an important issue, promote public awareness, and inspire action.

TechnoEarth shows students how to use Google Sites to design an interactive infographic.
Integrate TechnoEarth into a geography, science, or digital literacy class.

Free Remote Learning Resource – Animated Story Unit

Download a free remote learning resource. At TechnoKids, we understand that this is a challenging time for teachers. You’re trying to figure out remote learning, keep students who are at home engaged, and find suitable lessons and materials. We’re here to help.

remote learning resource
free remote learning resource

TechnoKids has a unique, first-time-ever offer to kickstart #remote learning
– a FREE project!

Just until April 30, you can download the complete TechnoToon project. It includes digital storytelling lessons in which students create an animated comic strip using Google Slides or PowerPoint. The worksheets have step-by-step instructions to support learners.

How Do I Get the Free Project?

Don’t miss out – get it here now as a digital download:

  1. Add it to your cart.
  2. Start the checkout process.
  3. Click SUBMIT.
  4. You should get a message to visit the Library to download TechnoToon.
  5. Your username and password is the SAME one you used to place the order.
  6. Read the Getting Started instructions.

Remote Learning and TechnoKids

Here are a few more resources to help with online learning:

Google Classroom: Assign lessons using TechnoKids worksheets. Students can view instructions, by opening the file in the web browser window. If you want them to type in the worksheets they will require a free Chrome extension such as Kami or XODO.

Class Notebook: Create a OneNote Class Notebook that includes TechnoKids worksheets. Attach resources such as templates and samples. This is a simple way to assign and grade submitted work.

Keep in touch, and let us know how we can help you. For safety, we are also working remotely. Email us at support@technokids.com.

Techniques to Teach Debugging Strategies

When designing a Python programming unit, include lessons with techniques to teach debugging strategies. Debugging is the ability to find and fix errors in code. It is a vital skill for young programmers to master.

Don’t hope that students will discover these strategies on their own. Instead, guide them through proven methods.

Explicit Strategy Instruction and Debugging Strategies

STEM classes emphasize writing code to animate objects, create artwork, or build games. In the push to build a program, the ability to edit the code may not be a focus of instruction. In this learning environment, identifying mistakes and correcting them becomes an implicit process.

During programming lessons, students need to decipher the meaning of error codes independently. They must spontaneously determine how to solve the problem. The young programmer can be left feeling inadequate as they struggle to get their programs to run.

Frustration is an integral part of the learning process. It fosters persistence, which is an admirable quality in a programmer. However, for many beginners, the challenges can seem insurmountable and they give up – telling themselves, “I am not good at programming”.

There is a better way!

Explicitly teaching debugging strategies empowers learners. No longer will they feel defeat when an error message appears. Instead, they have techniques to competently debug the Python program. This builds confidence and promotes a positive attitude towards STEM.

4 Techniques to Teach Debugging Strategies

1. Break It, Repair It

There are many techniques to teach debugging strategies. One that is very effective is to intentionally break code, then run the program to notice the result. This type of STEM lesson takes very little instructional time, yet quickly improves debugging skills.

To start, provide students with a Python file. Using direct instruction, have them systematically delete parts of the code to generate common errors. When the program is run, the instant feedback forms a connection between bugs, error messages, and how to fix the problem.

Some suggestions for breaking the code include:

  • remove vital lines such as the import of a library to note how commands are no longer recognized
  • add or delete punctuation such as quotes, brackets, colons, and commas to explore their purpose
  • adjust the indent level of a block of instructions to see how it influences the program
  • alter symbols such as ==, !=, <, and > then study how they alter the output
  • misspell a command to highlight the importance of accuracy when typing code
  • turn an equal sign == into = to notice how the code no longer works

Using these techniques to teach debugging strategies will enhance your students’ programming skills. If you are looking for a ready-made Python lesson, TechnoTurtle has a Bug Zapper exercise. Students follow instructions to produce bugs and then repair the code. This activity is ideal for beginners in Grades 3-9.

break the code

Intentionally break the code. This provides instant feedback when the program runs forming a connection between bugs, error messages, and how to fix the problem.

2. Code and Correct

Another debugging lesson is one that guides students through the development of a program. Using direct instruction, the teacher outlines the goal of the programming task. Line by line, the teacher types the code that the students copy. After each line, students run the program to study the output. When a mistake occurs, the teacher highlights the issue and explains how to troubleshoot the code. Slowly, the program takes shape.

This technique best suits students that are familiar with syntax and name errors. Instead of focusing on typos, this lesson emphasizes the quality of the output. It studies the outcome and provides solutions on how to improve the code. The sample program should be short. It must have common pitfalls to resolve as a class.

TechnoTurtle, a Python programming project for beginners, has several lessons that are ideal for a Code and Correct lesson. For example, students follow steps to draw a robot. Throughout the learning process, problems are intentionally generated. This provides an opportunity for beginners to think about the code and how to improve the program’s design.

techniques to teach debugging strategies

  TechnoTurtle includes techniques to teach debugging strategies. Follow the guided instructions to fix the code.

3. Explore and Investigate

Invite exploration into your STEM lessons to promote a positive attitude towards debugging. Often troubleshooting a program’s output can be a source of frustration. However, in this activity it is fun. Encourage students to play with different values to notice how they change the outcome. Investigate by making a number higher or lower. Or, replace a string with another option.

Explore and Investigate is meaningful. Active discovery demonstrates why one value is better suited to the program than another. It transforms mistakes into happy surprises.

Sparking a life-long interest in STEM is one of the goals of programming lessons. In TechnoTurtle, there are many activities in which students modify the values within a program to achieve a unique outcome. This makes learning enjoyable, which hopefully promotes an on-going interest in programming.

explore and investigate

Invite exploration into your STEM lessons to promote a positive attitude towards debugging.

4. Pick the Correct Code

Another technique to improve debugging skills is to provide students with snippets. Rather than mindlessly copying code they are presented with two options. One snippet is correct, the other has a bug. By making choices, the young programmers write the program.

This type of programming lesson actively engages students. They must study the code and think about the choice they will make. If they are incorrect, the feedback is instant. They can then use the other option instead. This activity cultivates a learning environment where it is safe to make mistakes.

An example of a similar programming activity is Clean Up the Code in TechnoTurtle. Young programmers determine how to debug the code. The program they are editing should stamp turtles on the canvas. However, it has four errors. For each error, they are given two choices. This activity builds debugging skills.

safe to make mistakes

Cultivate a learning environment where it is safe to make mistakes.

Apply Multiple Techniques to Teach Debugging Strategies

When teaching your next programming unit, design lessons that explicitly teach debugging strategies. This will build competence in your students and support independent learning. As well, this instructional approach has the potential to transform how students feel about errors. Turn your STEM classroom into a safe place to make mistakes.