Below are some examples of different screen layouts. These are general ideas to get you going. It is up to you to decide how best to layout the content!

1 Column

Text only

Text only

Image with text

Image with text

Video

Video

Simulation from edge to edge

Simulation from edge to edge


2 Column

Text with image

Text with image

Video with text, prompt, and textbox

Video with text, prompt, and textbox

Simulation with text and warning

Simulation with text and warning

Image with text, prompt, and multiple choice

Image with text, prompt, and multiple choice


3 Column

Images with text

Images with text

Images with text, prompt, and multiple choice

Images with text, prompt, and multiple choice

Images with text, prompt, and textbox

Images with text, prompt, and textbox


Mix and Match

You can incorporate any number of columns within a single row. Be creative!

mix-n-match.png


Back to Main Menu or see Design and Style Tips

This is a living reference guide, and we want it to be as helpful as possible! Is there a question or an element that we should add/clarify? Do steps seem wrong or out of date? 📩 Please email Melanie ([email protected]) with your suggestions!