7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. Edge

Introducing Adobe Edge

Read Time: 1 min

Edge is the latest design tool to hit Adobe Labs. It allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

During this introduction we're going to make acquaintance with the interface, examine the timeline and apply some animation to a real project.

1. User Interface

We'll begin by getting to know the application interface.

2. Animation

In this quick screencast we're going to check out the timeline and get animating.

3. Getting Real

During this third exercise we're going to take what we've learned in the previous two videos and make it real.


What exactly does Adobe Edge generate in terms of files and code? Well, a small Edge project churns out a folder which looks something like this:

You can clearly see the Edge project file plus all the deployment content. There's an html file with its accompanying css and js files, then a whole load of assets including jQuery, some js tools and whatever imports you made in the project.

In terms of the code generated, check out the source for the base html. Couldn't be simpler!

The content is all added to the stage through the javascript file and manipulated thereafter.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.