Adobe

Essentials of Adobe XD

Want to learn how to use Adobe XD in your workflow? I will be giving an online training course through UXPA on August 1 and August 8, 2018. This workshop will first introduce you to its design tools, once we have our design in place, we will use its built-in prototyping features to create an interactive demonstration of our design. We will go further by showing how we can share our concepts with teammates, clients or even conduct user tests. Finally, the workshop will teach you how to take your project and export the content to the development team, as well as create a design spec.

Register Now

Price: Students: $70; UXPA International Members: $280; Non-members: $500

Course outline

Session 1 Session 2
  • Welcome and set up check
  • What is XD?
  • Overview of the UI
  • menus
  • tools
  • property panel
  • UI kits
  • Creating Artboards
  • Working with vectors
  • Working with text
  • Working with bitmaps
  • Understanding layers
  • Using symbols
  • Exploring the assets panel
  • Using the repeat grid
  • Working with other programs
  • Using CC libraries
  • Exercise: create a simple five screen design.
  • Prototyping
  • Creating interaction flow
  • Adjusting transitions
  • Previewing the prototype
  • Recording a walkthrough
  • Previewing on Device
  • Sharing a prototype
  • Reviewer comments
  • Manage links
  • Exporting assets
  • Creating a design spec
  • Using Zeplin with Adobe XD
  • Wrap up
Advertisements

Farewell to the Edge…

Adobe Edge Preview

Adobe announced today that it was ending their Edge Tools and Services experiment. I use the term experiment, as these products were built as part of a transition period for Adobe, shifting away from the Flash Platform toward a web platform stack. I was fortunate enough to be a part of the early development of many of these tools (as an Adobe Community Professional), but their usefulness as stand-alone elements was always troublesome.

For example, there was never a simple workflow to take your Edge Reflow work into a larger web project. Nor was it easy to fully interact with Edge Inspect from your system and devices.

But these experiments did lead to some tangible enhancements in Adobe’s main product lines. The responsive media query tool in Dreamweaver CC is a direct result of the groundwork laid by Reflow. The device preview features in PhotoShop and Illustrator are based in part on Edge Inspect.

But the mother of the Edge Tools and Services was Edge Animate (for those who remember, it was just Edge at first). EA was a interesting tool, focusing on animating the DOM rather than just painting to the HTML canvas. The timeline explored new ideas for animation control. Part of its appeal was that it was not Flash, which carried a dreaded (and partially unwarranted) stigma for many. But like all technologies, the web and its tools evolve. Although you could create some incredibly rich and interactive animations, EA never seemed to fit in. That Flash Professional app kept evolving as well, supporting more formats as publishing options (Canvas, WebGL, OAM). Take a look at last year’s Adobe MAX conference, and you can see that Flash’s animation roots were still strong and growing (judging by the number of sessions).

I have given several web animation talks, and could never quite explain how both tools fit under the Adobe umbrella. With today’s announcement, I will no longer be faced with that issue. Edge Animate’s development has been ended. It is still available as part of your CC subscription (heck, Fireworks is still there!), so you can continue to use it on your projects. However, as the web evolves with new browsers, standards, and libraries, EA will not be updated.

In its place, we can turn to Animate, the renamed Flash Professional. Like a phoenix rising from the ashes, Flash has really returned to its roots as a first class animation tool and is now reborn.

Now, designers can use a tool that they are all probably comfortable with, without worrying about backlash from managers or clients who didn’t understand that the tool was more than just a SWF creator.

I am looking forward to exploring Flash’s Animate’s new future as part of my design toolkit. To all those at Adobe who worked on these products, thanks for the efforts and experiments.

 

Adobe MAX Keynotes

maxOnline

If you can’t attend Adobe MAX in Los Angeles this year, you can sign up to watch the Adobe MAX 2014 keynotes live from Nokia Theatre L.A. LIVE on Monday, October 6, and Tuesday, October 7.

Day 1 keynote

Creativity on the Cutting Edge
Monday, Oct 6, 9:30–11:30am PT

Creativity is no longer confined to the desktop—you want to work across devices and between desktop and mobile. Join Adobe leaders as we unveil new, connected applications, services, and hardware that empower the creative community to stay on the cutting edge—wherever and however you want to work.

Day 2 keynote

Community Inspires Creativity
Tuesday, Oct 7, 10–11:30am PT

Join David Wadhwani, Adobe SVP and GM of Digital Media, as he welcomes some incredibly creative minds to explore how they foster creativity and approach their work. Hear from Lee Hirsch, an award-winning documentary filmmaker; Ami Vitale, a National Geographic photographer; and Jason Seiler, a character illustrator. You’ll walk away inspired—and with more than a few new ideas to incorporate into your next creative project.

The url to sign up is: https://max.adobe.com/sessions/max-online/

AppaloozaLA!

AppaloozaLA

I had to miss speaking at the one in San Francisco, but I am back in the saddle to speak at the Los Angeles stop! This is going to be a great event filled with some incredible speakers. Personally, I will be presenting on using PhoneGap Build to quickly build native mobile applications.

The event will be on Saturday, November 15, 2014 from 9:00 AM to 5:00 PM (PST) at the Art Institute of CA-Los Angeles.

For more information, visit the EventBrite page. Hope to see you there!

 

PhoneGap Developer App for Windows Phone 8

Windows 8

The PhoneGap team announced that the PhoneGap Developer App is now available on the Windows Phone Store. It supports not only Windows Phone 8, but also the upcoming 8.1 update!

For newcomers, the PhoneGap Developer App aims to lower the barrier of entry to creating PhoneGap apps. You can immediately preview your app on a device without installing platform SDKs, registering devices, or even compiling code. Plus, you have full access to the official PhoneGap APIs.

Possibly the most exciting aspect of this announcement is that you can now develop your apps on an OS X machine and preview on a Windows Phone device. Cross-platform, indeed!

I somehow missed posting this correctly, but that I would go ahead and post it even though it is a bit late.

Creative Cloud Event San Diego

sandiegoccevent

Adobe Evangelist, Paul Trani will be coming to San Diego. Join us to see the latest in Adobe Creative Cloud since CS6. Learn new features that make everyday tasks easier and faster and how support for cutting-edge hardware and standards will free you to build anything you can imagine. Get answers to your questions and get inspired by designers who are creating amazing work.

Wake-Up-Now-Sign-Up-Now-WUN

Agenda

6:00 PM – 6:30 PM – Registration Check-In, Food, Networking
6:30 PM – 8:30 PM – Presentation by Paul Trani
8:30 PM – 9:00 PM – Q&A, Raffle & Wrap-Up

Location Details

San Diego City College Career Technology Building
1081 16th St
San Diego, CA 92101

Cost

FREE, just RSVP.

Prizes

Adobe will be providing prizes including a FREE One year Creative Cloud Membership. You must be present to win.

Hope to see you there!

Edge Animate & PhoneGap Build: part 2

In a previous post I wrote on how to convert the audio playback that Edge Animate uses into some that PhoneGap is able to use.

It that post I had this function:

function getPhoneGapPath() {
   var path = window.location.pathname;
   path = path.substr( path, path.length - 10 );
   return 'file://' + path;
};

There a first a slight error that I introduced. When finding the path name, I stripped out 10 characters. This was based on the test case being based on index.html. So if you happen to bring this function into another page with a different file name it would break. Rookie mistake. Actually more like too much prototyping and not enough ‘real’ coding…

Also we actually don’t need the entire path, so based on the platform we can locate our ‘root’ directory and go from there. Here is a revised version of the function:

function getPhoneGapPath() {
  var devicePlatform = device.platform;
  if (devicePlatform === "iOS") {
    path = "";
  } else if (devicePlatform === "Android" || devicePlatform === 'android') {
    path = "/android_asset/www/";
  }
return path;
};

Now two things to note here. 1) I am ignoring other platforms, so if you need to support one of the other platforms that PhoneGap does support, add in the proper if clause. 2) Every time this function is called, I query the device.platform. Now using your phone is actually a Transformer, this value is not going to change. I would recommend making this query once, say upon deviceReady() and storing the value in a variable and referencing it within this function. Also note that you will need to make sure you also include the device plugin in your PhoneGap app as well.