Create Web Animation And Interaction Designs In HTML 5 With Adobe Edge


The latest web standards, HTML5 and CSS3 in conjunction with JavaScript have truly reduced the time and effort involved in creating graphic, text, and animation rich web sites. Using the powers of HTML5,  you no longer have to manually write code for embedding multimedia content while CSS3 makes your web UI elements more flexible, robust, and importantly more easy to handle. If you’ve been looking for a web designing tool that allows you to take maximum benefit out of latest web standards without compelling you to manually enter code for each UI element, the freshly launched Adobe Edge is probably just what you need.

Adobe Edge has been particularly written for visual, web and interaction designers who often struggle with creating web motion and animated content using HTML5, CSS3 and JavaScript web standards. It’s basically a web motion and interaction design tool for creating animated content using HTML5, CSS3, and JavaScript. While it incorporates all the basic tools to create, edit, tweak and design the web UI elements, it offers an intuitive animation choreographer to easily create and adjust animated content in your web page. Moreover, it doesn’t force you to start a new project from scratch, you can import your HTML file in it to include new UI compositions and tinker around with existing UI elements, such as, table, text styles, image shades, position, font, container alignment and more.

The main interface is divided into 3 sections. The left sidebar holds selected UI element composition tools, right side bar has all the main web UI element lists, including, shadow effects, images, text, whereas the bottom section contains the timeline editor to choreograph animations.

Edge main 2

The Elements pane lets you show/hide selected element and lock it down to prevent further editing. When you select an element from the main screen, it immediately highlights it in Elements pane, making it easier to hide or lock it. When you hover mouse pointer over an item listed in Elements, it tells you class initials with name, so you can easily identify it in CSS file.

elements main

The properties pane at left side shows composition tools for selected UI element of your web page. Once selected, you can change its location size, opacity, text font family, size, and text styles, set transform origin, image rotation and so on.

edge 3

The timeline editor enables you to view timeline of each animated element. If you’re dealing with one huge CSS file, click filter button to show only animated elements in Elements pane to quickly edit their positions, colors, size, etc. At the bottom-left of pane, you have zoom button to magnify the timeline for verifying allocated time and transition effect of all the animated elements.

animated elements

Apart from creating cross-browser compatible animated content for all widely popular web browsers, including, Firefox, Chrome, Internet Explorer 9, web content created through this tool will work seamlessly on iOS and Android platforms too.  According to official community, Edge Preview is in active development and will soon be updated with host of features. Adobe Edge works on Windows Vista and Windows 7.

Download Adobe Edge