Monday , March 18 2024
Will save a lot of time in your design work.

New Software Spotlight – Adobe Experience Design CC (Beta) January 2017

Adobe Experience Design CC (Beta) also known as Adobe XD has just released a first time release to Windows 10 (this is the ninth release to the Mac). The goal here is to provide an end-to-end development solution to UX design. This is a subset of the entire intended feature set, and each month there will be additional releases which add new capabilities.

Adobe Experience Design
Adobe Experience Design

This release contains a core set of abilities for creating prototype websites and mobile applications. It has tools for speeding up the laying out of design elements, connecting up between screens, and other items that will allow you to build your design fast. There are some things like the ability to share a prototype using Creative Cloud; the plan is to get these things in to the application in future updates.

When you first open XD, you are presented with a blank workspace. By default, it opens in Design mode. There is also a Prototype mode which I will explain later. On the left side of the screen is your tool bar. It contains a select tool, drawing tools like the square, circle, line, and the pen. It has a text tool and an Artboard tool. The middle of the screen is the infinite canvas. This is where your work is performed. The right side of the screen is the property inspector.

Adobe Experience Design
Adobe Experience Design

The first thing that you will want to do is create an Artboard using the Artboard tool. You can create a custom size, or choose one from the many templates provided. Once you have your board set up you can begin adding elements to it. Using the tools provided you can create a lot of great assets.

Another great feature is the Repeat Grid. Say for example you have 10 menu items to add to a page. You create the first one. It may have a picture of the menu item, the name of the item, and a price. You can group them together and the select Repeat Grid from the right-hand side. You are then presented with a bar handle on the bottom and on the right side. Whichever one you drag, it will automatically create new items for as long as you drag.

Adobe Experience Design
Adobe Experience Design

You can then go change the name, picture, or price and you will be good to go. You can change all 10 pictures by selecting all of the images you want to use and dragging and dropping on to the top image and all of the images will change. It is the same with the wording. Or you can just go and double click on say the price, and change just one item.

Once you get your designs laid out, you can then switch to prototype mode. In prototype mode you can work on your wiring. That is, you can manage what happens when a user initiates an event. Events are when a user creates an action such as clicking on a button and you want them to go to another page, or fill in a value, or go back to the previous page. You also have a number of options on how the transition between the two pages happen.

Adobe Experience Design
Adobe Experience Design

One final thing to mention is the UI kits. On the hamburger menu there is an option to open the UI Kits. From there you can choose Apple iOS, Goggle Material, or Microsoft Windows. When you select one of these options you will be presented with a workspace full of already setup templates. These contain items (in this case for Apple iOS) like control center, search, contacts, share to and others. These will get you going really fast.

Overall, I like Adobe Experience Design CC (Beta). It is a beta and so therefore there are a lot of things missing. At this point, that is okay. What it has works really well and, in my opinion, is well work getting familiar with as I think it will save a lot of time in your design work. And so for a beta product, I can highly recommend that you try it to see if it fills your needs.

About T. Michael Testi

Photographer, writer, software engineer, educator, and maker of fine images.

Check Also

Frost

New Software Spotlight: Adobe XD, May 2018

The Adobe Fund for Design program will provides up to $10 million in grants and investments to build a network of development for Creative Cloud, starting with Adobe XD.