EASY ELEMENTS WEBSITE

Designer : Leighann Astra
Instructor : Alex Lash
Tyler School of Art, Graphic and Interactive Design Program

COMPONENTS

Logo Design | Motion Graphics | Web Design & Development 

DESCRIPTION

Easy elements is a website that can be used as an educational tool for high school students learning about the elements of art. Rather than listen to their teacher lecture, students can journey through the elements of art firsthand, independently, and at their own pace. Descriptions of each element of art: line, shape, form, color, value, space, and texture are provided. These descriptions live alongside engaging animations and graphic visual examples that are easy to understand. Famous artworks that utilize the elements are also provided. After an initial exploration of the website, students may find that it’s a valuable resource for information that they can use for their future art projects.

This website could be used as a supplemental teaching tool that would benefit art teachers and students in the state of Pennsylvania as the information provided would meet a portion of Pennsylvania’s Academic Standards for the Arts and Humanities number 9.1.A. which states that “Pennsylvania’s public schools shall teach, challenge and support every student to realize his or her maximum potential and to acquire the knowledge and skills needed to know and use the elements and principles of each art form (in this case-visual art) to create works in the arts and humanities”
















WEB DESIGN AND DEVELOPMENT : DESKTOP

I wanted animation to be a component of the website because I thought that including animation would make the site more interesting and hold a student’s attention longer. I learned how to make animated SVGs and used Adobe Illustrator to create the static graphics, Adobe After Effects to animate the graphics, and the bodymovin plugin to create .json files to include in my website. Although I've had some experience designing website prototypes in the past, this project was my first attempt at using html, css, and javascript to actually hand-code an entire website from the ground up. 







WEB DESIGN AND DEVELOPMENT : MOBILE



Mark