Prototype of UI for SciAnim2

This is prototype of the user interface I have designed for the SciAnim2 Project. You can view the finished SciAnim2 projects on the STAR Wiki. The large white area is where the graphics and animation will be. As the teacher, I did not create any graphics or animation, that is the students' job.

Each scene (or page) of this project will have animation. This image is for scene 4 - Streaking the Bacteria. When you first arrive on the page, the animation will be stopped. Clicking the Play Button will play the animation. The animation on Scene 4 will end with the image of a streaked plate. Clicking the Play button again will replay the animation. When the animation is playing, audio of the text will play. The Previous button goes to the previous scene, the Next button goes to the next scene. Clicking any of the buttons will also Stop and previously playing sounds.

For this design I tried to incorporate the following:

• A strong visual framework. - I wanted to locate the various elements on each page so I chose to use shades of gray for each section. A border and title of dark gray, the text on a light gray section, and a white window for the images and animation.
• Repetition - I repeated the Font in the title, text, and buttons... this would also be repeated on every card. Also, the design of the buttons is repeated.
• Alignment - The text, the buttons, and the titles were all carefully aligned with each other and the edges of the page.