Standalone, complete installers for the CC Desktop app, for Adobe Camera Raw, and for Acrobat DC Pro/Standard are already publicly available – but to date, Adobe has not (yet?) posted the rest of the new Creative Cloud 2020 direct download links. However, good news: you can now actually get them yourself by contacting Customer Service. Adobe XD is a fast & powerful UI/UX design solution for websites, apps & more. Design, wireframe, animate, prototype, collaborate & share — all in one place. Manage your Adobe Account profile, password, security options, product and service subscriptions, privacy settings, and communication preferences.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial.
Adobe XD has some built-in sharing functionality. In this video, we'll see how that works.
Tools
Adobe XD mobile apps for live previewing of prototypes
Syncing a project to your phone without Creative Cloud:
- Save your project anywhere on your computer.
- Connect your phone to your computer via a USB cord.
- In the desktop XD app, click the Preview on Device icon in the top right corner.
- In the tooltip, you should see your phone's name listed with a green checkmark next to it. That means you're ready to see it on your mobile device.
- Now, look at your mobile device and click the 'Live Preview' tab.
Exercises:
- How Might We? Questions
- Book jacket exercise described by Paul Boag
- User attention exercise described by Paul Boag
Additional screen ideas:
- Booking a Ride:
- Select number of riders
- Driver is approaching
- Multiple destinations
- Payment selection
- Book ride
- Fare splitting with other passengers
- Scheduling a Ride:
- Change in car availability
- Change in price
- Onboarding:
- Signup process
- App tour
- Safety:
- Report an unsafe driver
- Emergency support (911)
- Additional Features:
- Support for those traveling with children - infant car seats and child booster seats
- Routine commuter option
- Share ride with other passengers on route
- Social sharing with other passengers
- Text ride ETA to a friend
- Fun stuff like...the ability to choose the music in the car, food pickup, etc.
Further Learning:
Now that you have a fewwireframes of the survey screen, 0:00
we can test the transition betweenthe map view and the survey screen. 0:05
I can show you XD's super coolinteractive prototyping feature. 0:11
I'm going to duplicate one of the surveyartboards by selecting it and 0:16
holding down the Option and Shift key asI drag it to a blank spot on the canvas. 0:20
Draw a route on the map or copy the onefrom the map in the wire's UX kit 0:40
Adjust the content in the bottom grayrectangle to show the ride is in progress. 1:35
Include the estimated time of arrival aswell as the number of minutes left to 1:42
Arriving on time is very important forusers like Businessman Brian. 1:49
So it's important to provide transparencyand set expectations around arrival time. 1:54
Finally, adjust the title toshow the ride is in progress. 2:00
In the top left corner of XD,select the Prototype tab. 2:13
Adobe Xd 27 0 120 Mm
In this view, you can wire upinteractions between artboards. 2:19
Select the art board thatshows the ride in progress. 2:23
an arrow button will appear onthe outside of the art board. 2:28
Click that arrow anddrag it to your favorite survey wireframe. 2:32
Release the click of your mouse whena blue rectangle appears around 2:36
A window will appear, which will allowyou to adjust the transition settings. 2:42
Click onto the canvas to exitthis edit transition view. 2:49
In the top right corner of XD,click the triangle play button. 2:54
It'll open up a view ofyour interactive prototype. 2:58
Go ahead and click the screen to seethe transistion between the map and 3:02
Isn't that cool? 3:07
Next, let's talk about how to get thisinteractive prototype out of XD and 3:10
into the hands of your teammates sothey can review your work. 3:15
In the top right corner, click the shareicon and choose Publish Prototype. 3:19
You can click here to copy a link oryou can open it in your browser. 3:31
Great, now your prototype isviewable in a private link. 3:36
Click the Open in Browsericon to launch the page. 3:40
This page is similar infunctionality to InVision. 3:48
You can share this with your teammate,and they can leave comments. 3:52
You can also record a videoof the interaction. 4:22
Navigate back to the window that popsup for the interactive prototype view. 4:25
Click around to show the interaction. 4:41
When you're done recording, click therecord button again to stop the recording. 4:54
It'll prompt you to decidewhere to store the video. 4:59
Then you can sharethe interaction with your team. 5:03
Another option is to show the interactiveprototype on your iOS or Android device. 5:06
This will allow you to see the wireframeon the actual device you're designing for, 5:13
which will help you understand howthe design will feel on the actual device. 5:18
download the XD mobile app fromthe link in the teacher's notes. 5:24
Once you have it installed,open it up on your mobile device and 5:28
The easiest way to access your projecton the phone is via Creative Cloud. 5:34
view the instructionsin the teacher's notes. 5:42
From the computer app,save the file to Creative Cloud, 5:45
Navigate to the Creative Cloud folder andclick Save. 5:51
On the XD documents tab,you should see your prototype listed. 6:00
Adobe Xd 27 0 120v
It'll start with the ridein progress view, 6:06
since that's the screen we havedesignated as the home screen. 6:09
To exit the preview,do a long press on the screen. 6:16
Release your finger oncethe navigation appears. 6:20
From this view, you can return to the homescreen by pressing the back arrow button, 6:23
If you don't havea Creative Cloud account, 6:31
you can send the prototypeto your phone via USB. 6:33
Connect your phone to your computer andthen click the device icon. 6:37
Now, when you look atthe Adobe XD app on your phone, 6:44
You need to sign up for Treehouse in order to download course files.
