Let the Experience Design Application Battle Begin!

As our need for responsive apps explodes, so does the need for app designers, but app designers are not necessarily programmers. In the past when it came to showing off concepts for your next app or web site, there were a handful of wire framing tools (some digital and some meant just using huge walls and post it notes). Then to show the actual “look” there would be a series of still screen shots and a lot of arm waving to describe the details of the user experience.

Now new applications are changing all that.  Adobe introduced XD, a group of Facebook alums have introduced Framer, and a 23-year-old created Figma.  All the tools can create separate artboards (screens) and then you drag and drop your content onto the artboards to create mock-up pages/screens. 

This video introduces you to the perfect Design and Code workflow in Framer. Create artboards in Design, target layers, then toggle over to Code to easily insert animations, states and events. It’s a unified workflow built for fast and efficient interface design work.
Design and prototype websites and mobile apps with Adobe Experience Design CC (formerly Project Comet), the first all-in-one tool for UX designers. Test drive the XD preview for Mac and tell us what you think.
Figma is entirely cloud based which makes collaboration easier.

You can create symbols to speed up your workflow for common menu and button elements. Design and layout out all the sample screens for your app and add sample content.

But it’s the steps after that where things really get exciting.  A grid tools lets you replicate items horizontally and vertically and then you can edit each one individually to simulate menu items or blog posts. And the best bit is that you can still change the font and grid spacing without losing all your changes to items within the grid.  If the grid goes past your screen size you just enable “scrolling” and when you go into prototype mode the page will scroll.

Once the layouts are complete, the tools allow you to assign relationships, create buttons that work and then you can preview your work and share your work so people can see your idea come to life as if it were a finished site!  Framer takes it one step further and allows some coding options so that you can pre-visualize transitions and page animations.

And like any other apps that has artboards, the stock sizes for different devices are all there as a convenience, but for the experiential world, you could enter any size or proportion you want so you can mock-up your next interactive and iterate on it with your client before you actually start programming.

Adobe XD (currently in Beta) is available as part of your Creative Cloud subscription and both Framer and Figma offer free trials.

Tags: