Cocktail Trends
Cocktail Trends is an interactive component built on web standards with Adobe Edge Animate CC. Cocktail Trends instructs the user on how to mix the five most popular cocktails trending on Google as of September 2013. The recipe list includes the Martini, Bloody Mary, Manhattan, Mint Julep, and Mai Tai.
Cocktail Trends is an interactive component built on web standards with Adobe Edge Animate CC. Cocktail Trends instructs the user on how to mix the five most popular cocktails trending on Google as of September 2013. The recipe list includes the Martini, Bloody Mary, Manhattan, Mint Julep, and Mai Tai.
Installation is easy as adding a "div" element to web page's html. The Cocktail Trends component navigates through content interactively via a main menu. Each drink recipe provides a static recipe list with the option to view step-by-step animated instructions. The component launches into a intro panel that assists the user in making a drink choice.
With it's 1950s retro stylization, the Cocktail Trends interface makes extensive use of motion graphics to enhance the user experience. Each recipe has a demonstration animation to further explain the drink mix process. The visual assets in this component are exclusively built in SVG format, which allows for relatively small file size with scalable graphics allowing for sharp screen display rendering on any device. The Buzz javascript library is used to provide plug-in HTML5 audio support for mouse events.
Cocktail Trends was built using Adobe Edge Animate CC and Adobe Illustrator CC.
Click Random select for arandom recipe or select from menu
Click "Show Me How" button to begin instructions at step 1
Shaker animation
Stirring animation
External link rollover at lower left
Pouring animation
At instructions conclusion click either black "X" button or "Done" button to return