This is the second part of a post I started a few weeks ago with the intention of comparing Sketch + InVision with Adobe Experience Design’s workflow. See part 1 here.

I have spent the last week or so giving Adobe Experience Design a good run. I tried it out when it was first released and while I enjoyed it, it was still missing a lot of the things I needed to work properly. Since then, many updates have been released and it’s really starting to turn into a fantastic product.

I decided to throw together a little travel style app as an exercise to learn the product better and test it against my usual work flow.

While it took me a week, I only really spent about 2 to 3 hours on the designs and prototype all up.

This is what I came up with.

Traversed App Prototype

And a quick landing page design.

website-home

Photo by Justin LaBerge via unsplash.com

Ok, here’s how it went down.

screen-shot-2016-12-15-at-12-24-36

The interface itself is super clean and learning curve is very low. Super simple to throw together a layout, drag and drop images, throw some text on it and you are off. Great tutorials included as well if you are struggling.

The smart guides are pretty great and usually know what you are trying to achieve but there seems to be a lack of being able to add static rules, which I miss a bit.

It also has a cool feature to create grids. You can create  and object, group it, and then repeat it as a grid.

screen-shot-2016-12-15-at-12-39-45

Just drag it down (or horizontal) as far as you need and its done.

Screen Shot 2016-12-15 at 12.39.27.png

The only issue I have found is, in order to make the list items unique, you have to ungroup the grid and return the object to normal groups, then edit each one.

It seems a similar problem with the Symbol as well. I can’t seem to work out how to change the separately without removing them from the Symbol. This is pretty annoying because the idea of the symbol is to update them all at once but once ungrouped you have to go one by one.

In Sketch you can edit the fields of each part of the symbol, meaning you can update the layout of the symbol and your unique list items are still there with the new updates.

One other issue that I had was trying to change the colour of a PNG icon. I use icons8.com as a quick go to when making layouts. Generally I just grab the biggest PNG and then use the fill tool inside Sketch to colour it the way I want. This is great because if I change my mind I can just re-colour it instead of needing to grab a new icon.

The easy fix being just download the SVG versions but sometimes they are just not available. Not a big deal, just a bit annoying.

It comes with some awesome UI kits as well for iOS, Android and Windows which is super handy.

Screen Shot 2016-12-15 at 15.07.14.png

Of course, Adobe CC has a fantastic set of libraries, resources, photos and fonts you can use as well.

Overall, it’s a pretty solid design tool that is enjoyable to use, even if there is a few bits missing still. But hey, it’s still in beta so I probably should give it a break on that front.

The prototype

Ok, so one awesome thing about this tool is you can jump straight from the design interface to the prototyping interface.

Screen Shot 2016-12-15 at 12.52.37.png

It have all your artboards laid out the same but new tools to connect and transition between them.

It’s as simple as selecting an object (say a button) and dragging it to the page you want to transition to.

screen-shot-2016-12-15-at-12-55-48

Select your transition styles and speed and you are good to go.

The options are pretty basic and you can’t change the interaction method at this stage (it’s all just click/tap). This means your prototypes are generally pretty basic, no swipes and flick gestures for example.

The limitations didn’t allow me to show the prototype the way I had imagined, with the background image re-adjusting as the user navigated. Although possible, it would have been tricky to do in Invision as well (with a stack GIF animations). Maybe something to try building out in Framer.js or Origami later.

One other thing I would like to see is a similar thing like InVisions header/footer settings. Being able to set a static header/footer when the user scrolls can make the prototype much more realistic.

You can view your prototype in a player which has a cool record feature built in. Super handy for creating little demos quick.

 

Alternatively, you could just share the prototype directly via a link, or even embed in your site.

You can allow comments to be made on the prototypes.

One thing that bothered me a little was when viewing on device, you had the browser still shown. Not sure if you can fix this but it can really change the experience if you are designing an app and not a website.

IMG_5134.PNG

Conclusion

While the app still has a little way to go concerning features (remember, it is still in beta), it has come a really long way since I first tried it. It’s starting to become a really great app and am very excited to see where it goes, and at the speed they are adding features, I don’t think it will take very long at all.

It could certainly become a contender for every day work in the near future.

As far as I can tell, the beta is free for now but not sure how long that will last for. I already subscribe to the full suite of Adobe CC which is $49.99 a month. I assume it will be included with that.

One great thing is the X D team is working on a windows 10 native app which is something that Sketch can’t and probably won’t ever do.

Here is a list of some of the future plans for the product.
https://helpx.adobe.com/experience-design/kb/missing-features.html

Going to give Framer.js a go next. A bit more of a heavy duty interactive prototyping engine.

After Christmas… Enjoy!

P.S if I have made any mistakes, saying a feature was missing but I just couldn’t find it for example, please let me know! I would also love to hear your thoughts on the product.

 

by Alex Knight

UX / UI Designer, Tokyo, Japan.

www.agkdesigns.net

Advertisements