Even though Adobe XD is still relatively new, the reception has been terrific. So I thought we’d do a quick-but-fun tutorial that illustrates how designing and prototyping with Adobe XD is wonderfully rolled into a single tool, without making the app feel too bulky. In fact, Adobe XD is pretty minimal and it's really easy to use once you know how.
Not too long ago, I compared Adobe XD vs. Sketch. While Sketch is still a brilliant choice for designing user interfaces, Adobe XD came off as the clear winner for those switching from other Adobe apps such as Photoshop or Fireworks.
With Sketch you’ll need to install extensions and quite possibly subscribe to third-party services to add any prototyping functionality, whereas Adobe XD offers these tools natively.
Plus, if you already have an Adobe Creative Cloud subscription, then you'll already have the entire feature-set of XD at your disposal! Design + prototyping + feedback all rolled into a single app, what more could you ask for?
It’s also available for Windows now!
Let's dive right into Adobe XD by designing and prototyping two screens in a mobile app.
Note: the examples used in this tutorial are based on the free Cactaceae UI kit for Adobe XD.
Prototyping with Adobe XD: Low-Fidelity Wireframes
Adobe XD makes it super-easy to quickly mockup a low-fidelity wireframe. Being able to design low-fidelity wireframes quickly means that we can make huge strides towards to creating a layout that offers a terrific user experience, while not having to worry about the visuals too much (at first). Let's illustrate our first idea so that we can receive feedback from our teammates ASAP — ideas develop faster when there are more brains on deck.
Everybody has a design workflow that works for them — when designing low-fidelity wireframes I have a strict rule of using only text and shapes (unless absolutely necessary). What’s the use of designing icons, sourcing images and defining styles for a layout that we might not move forward with? Here are the vital keyboard shortcuts that you’ll need right now.
- Select Tool (V)
- Rectangle (R)
- Ellipse (E)
- Line (L)
- Text (T)
- Artboard (A)
Lets mock-up an idea.
Start by creating an artboard (A) and selecting the “Android Mobile” artboard from the inspector on the right-hand side.
Now, using the toolbar on the left-hand side, or the keyboard shortcuts mentioned above, draw some shapes on the canvas to construct your layout. If it adds further clarity, or if there’s any space unaccounted for that makes the layout look confusing, then add maybe one or two images that depict what that space will be used for, as I've done below.
Very basic icons are fine too, as long as you aren’t wasting copious amounts of time illustrating them. Remember, our aim here is to validate our idea with feedback, only after that should we allocate more time to making it look appealing.
If you’re interested to see how rapid iteration compares with Sketch, check out my comparative overview.
Prototyping Interactions and User Flows
We now have our rough idea mocked up. It’s time to demonstrate how these two screens might link up — how would the user flow from one screen to the next? I mean, that’s what user interfaces are all about, right? Helping the user from A to B?
Switch to the “Prototype” workspace using the tab in the top-left corner. You’ll notice that this workspace doesn’t differ too much from the Design workspace; the main difference that there is no inspector, and when we select objects on the canvas, we’re given the opportunity to link the tap target to another artboard instead of styling them (hence why no inspector).
If you’re following along with my example, select the “Explore now” button, where you’ll notice that a blue, draggable handle appears on the right-side side of it. Drag this handle into the neighbouring artboard. Awesome, you’ve created a user flow!
In a very short moment we’ll learn how to test this user flow in a real device, but for now, let's specify the type of transition that the user will experience and how long the animation will last for.
When you drop the handle into the target artboard, a modal will appear. You'll see the following settings:
- Target: we already specified the target
- Transition: the effect that occurs when the user flows from one screen to the next (“None” is the default option for websites, whereas “Slide Left/Right” is pretty standard for native mobile apps)
- Easing: the acceleration of which the animation occurs (ease-out animations for example will be faster at the beginning, then slow down as the animation comes to a halt)
- Duration: how long it takes the animation to complete
Check out my article on easings and animations if you’re interested to know more about them!
In our case, choose “Slide Left” for the Transition setting and leave the other settings with their default option.
Sharing Prototypes and Gathering Feedback
When you’re ready to share your wireframe and receive some feedback, hit the share icon in the very top-right corner of the Prototype workspace window, then click “Create Link”.
Next, share this link with your teammates, who will then be able to view the mockup in their browser, make comments on it, and even use their mouse to click through the prototype like a real user.
Desktop Preview vs. Device Preview
“Do I have to create a share link to test the prototype?”.
Of course not! You can test the prototype to make sure that all of the screens are linked up properly at any time — simply hit the “Desktop Preview” icon (the play icon) and click away. If it's just you, Desktop Preview is more than ideal.
Continue reading %Why Prototyping with Adobe XD is the Most-Complete Design Solution%
by Daniel Schwarz via SitePoint
No comments:
Post a Comment