Mediterranean Diet Tips is a HTML5 component created with Adobe Edge Animate that educates the user about the benefits of the Mediterranean Diet. The eight "tips" cover a variety of subjects ranging from whole grains to olive oil. Each "tip" displays it’s textual content as well as stylized illustrations representing first the old way and then the Mediterranean way. The Mediterranean Diet Ti ps component also contains a menu for non-linear navigation through the tip sections. Hideable Food Pyramid and Whole Grain diagrams present themselves on request.

The graphics are created in SVG, a vector image format thats allows for razor sharp rendering at any size. The Mediterranean Diet Tips component is responsive, resizing itself to the height of it’s parent element. The component’s interactivity and motion graphics provide for an enjoyable informative experience.

Mediterranean Diet Tips was built Adobe Edge Animate and Adobe Illustrator. This project is part of my ongoing effort to create non-Flash, visually rich, gracefully interactive applications using web standards.

VIEW DEMO

Type: Entertainment
Skills: Edge Animate | Illustrator
Deliverables: HTML5


Toolset:
Creative Cloud Logo SVG Logo HTML5 Logo Javascript Logo