Design and Prototype with Adobe XD CC

People decide within seconds whether your app or website is useful and engaging. Seconds! Crafting a great user experience requires more than just visual design.

Adobe XD, one of the new kids on the block, is an app for doing it all—wire-framing, visual design, interaction design, prototyping, previewing and sharing. Although InDesign is our collective wheelhouse, from time to time we find other Adobe apps useful. In this session, learn about Adobe XD among your InDesign peers. Chana Messer will show you how to design and prototype a complete experience using the new app. Learn tips and tricks to immediately be more productive creating a great user experience.

What you’ll learn:

• What is Adobe XD and what's it for?
• Crafting a design with Adobe XD.
• Re-using assets from Photoshop and Illustrator.
• Creating an interactive prototype from your design.
• Seeing your design in action with Live Preview.
• Sharing the prototype with others to get feedback.

Meeting Notes

By Alvin Takamori

The Los Angeles In Design User Group held its first meeting of the new year in the cozy setting of the Douglas Park Clubhouse in Santa Monica.

After a short delay to acquire an HDMI cable, the proceedings began with Rob Swaine of Colornet Press introducing us to their proprietary printing process called Amplify. As a thank you for the opportunity to present his company to the group, Rob provided a variety of muffins for snacks. The Amplify process doesn't require file conversion to CMYK. Amplify has a profile for RGB files. The offset printing process uses GRACol for its' color profile. Amplify has a wider color gamut and the result is it can produce more accurate colors that are brighter and more vibrant than offset printing. It comes closer to recreating the colors that are produced digitally on RGB screens. It also eliminates the need for spot colors. The printed dots generated by Amplify are much finer than those produced by offset printing, so pixels are virtually undetectable even with a loupe. This makes for sharper images and smoother transitions. If the quality of your printed image is important, this process is worth looking into.

The key presenter for the meeting was Chana Messer. Her impressive resume includes fine artist, owner of Mac in Art, Adobe Certified Expert, author, instructor at the UCLA School of Fine Arts, the USC School of Cinematic Arts, and the USC Annenberg School of Journalism, and Manager for the Adobe Illustrator User Group.

For the LAIDUG meeting she introduced us to Adobe XD, a program that is useful for planning and prototyping user experiences (UX) and user interfaces (UI) for things like websites and mobile apps, without the use of code. It quickly generates representational websites, apps, etc. that show how they would look and work. It provides designers with a way to create concepts and share these ideas with clients. Instead of imagining based on sketches or verbal descriptions, everyone can see exactly what the product could be. After approval, a coder could be brought in to construct the actual website or app.

Chana showed us the features of Adobe XD. The Tool Box is very basic. It can do things like draw vector lines, create text frames, change fonts and tracking, modify layers, and separate art boards. Images and text can be copy and pasted in. Videos can also be linked.

It has a multiple Find and Change feature. Objects can be grouped and a grid of repeating objects with equal spacing can be created.

In Adobe XD, various outputs can be selected. A choice can be made between iPhone, iPad, and different web page sizes. Envision is a selection for prototyping and wire framing.

Chana demonstrated how to design a prototype website using Adobe XD. She set up the various pages of the site, splash screen, main page, etc. Making sure she was in Prototype Mode, so that the arrows showing links would appear, she began creating links. Using a vector tool she drew some shapes. In the Appearance Panel those shapes could be modified. Color, opacity, stroke and gradients could be added or changed. Repeating shapes could be made into Symbols.

From Photoshop, PNG files could be dragged and dropped into Adobe XD. Illustrator files can't be dragged in but, they can be copied and pasted into Adobe XD and they are still editable.

There are User Interface kits and icon kits that provide commonly used elements like Facebook and Twitter logos. You can even get the time and battery elements seen on a smartphone screen.

Once a page is created, Option Grab Screen can be selected to duplicate it and create a new page. In the Design Prototype mode, transitions like "Slide Left", or "Dissolve" could be chosen to jump from page to page. A key element is the connect tab on objects, which allow you to make the links from an object to different pages. You can actually see the arrows showing you what is linked.

Chana showed us how the prototype can be published and tested to see how it looks in your choice of output devices. The Allow Comments selection can be turned on to let others react to the prototype. In a short amount of time, she was able to create a prototype that looked like an actual website.

After her presentation we had our raffle during which, as usual, gave away a bunch of good stuff.

Farthest Attendee

The bona fide LAIDUG member who travels the farthest specifically to attend the meeting will receive her or his choice of any one deal at MightyDeals up to $50.00. Mighty Deals offers fonts, templates, apps, e-books, etc. You need to prove to us that you traveled farthest to attend this meeting. Having recently moved to the area from somewhere else won't cut it. Be prepared to show us indication of your current residence—perhaps a driver's license or a utility bill. Decision of the administrators of the Los Angeles InDesign User Group is final. Winner — William Gunn

Raffles

LAIDUG is supported by raffles of donated prizes. No one is required to participate in the raffles. Raffle tickets are: 1 for $3, 2 for $5, 5 for $10, 11 for $20, 24 for $40, 32 for $50 and 65 for $100. All major credit cards are accepted.

Raffle Prizes and Winners

eDocker CREATE! 6 month subscription. Value $774.00 Winner — Kerry Seal

GoProof from Oppolis Software. 3 month subscription for 2 users. Value $300.00 Winner — Douglas Magill
Proofing add-on for Adobe Creative Cloud. Version history tracks what has been changed and by whom.

Stock Layouts. Full access to Stock Layout template library. 3 month subscription. Value $299.00 Winner — William Gunn

Markzware. Any single product. 12 month subscription. Value $199.00 Winner — William Gunn (PDF2DTP)
Choose one from the list below:
Q2ID (Quark to InDesign), Convert and open QuarkXPress files in InDesign.
PDF2DTP (PDF to InDesign), Convert PDF files to InDesign.
ID2Q (InDesign to Quark), Convert and open InDesign documents in QuarkXPress.
MT (Markzware), Convert InDesign documents to IDML files readable by InDesign CS4 through CC 2017.
FC (FlightCheck), Check native and PDF files for printing quality.

Expo Creative Asset Manager for Mac from Insider Software. Value $149.00 Winner — Douglas Magill
Digital asset manager that allows you to view, tag, search and manage images, icons, fonts, audio, video, app documents.

Suitcase Fusion 8 from Extensis. 12 month subscription. Value $119.95 Winner — Douglas Magill
Font management program that allows you to organize your fonts from one plane—including system fonts, purchased fonts, fonts synced from Adobe Typekit, Google fonts, etc.

Font Agent Pro 8 from Insider Software. Value $99.95 Winner — Douglas Magill
Windows font management that allows you to organize, distribute and control your fonts.

InMotion Hosting. Web hosting and free domain. Value $90.00 Winner — William Gunn
Web hosting company.

DTP Tools Cloud for InDesign. 6 month subscription. Value $77.40 Winner — Scott Rovin
Suite of 14 different InDesign productivity tools.

Multi-Find/Change 3.0 from Automatication. Value $49.95 Winner — William Baughman
Extension for InDesign and InCopy that allows you to manage and execute Find/Change queries in batches rather than one at a time.

Adobe Stock. 15 image licenses. Value $44.00 Winner — Scott Rovin
Royalty-free, high-quality photos, videos, and illustrations.

InDesign Magazine. 6 month subscription. Value $30.00 Winner — Jacob A. Lopez
Monthly PDF publication devoted to InDesign how-tos, in-depth features, and quick tips.

LA Web Professionals Group meeting tickets. Value $7.99 (four raffles) Winners — Annamaria DiSanto, Elvia Hernandez, Scott Rovin, Bing Wong
Adobe user group that meets monthly with an emphasis on web design, marketing and the latest internet trends.

About the Presenter

Chana Messer

Chana Messer has been teaching at the university level for 30+ years in the fields of Fine Art and Digital Imaging. She currently teaches at the USC Annenberg School of Communication and School of Cinematic Arts. In addition to lecturing, Chana is a contributor to various platforms as a writer and tech editor and has been invited by Adobe to present at events such as MacWorld, AIGA, HOW, Adobe MAX, and other events in Los Angeles, San Francisco, Portland, Chicago, New York, and Tel Aviv. She is an Adobe Subject Matter Expert, Adobe Certified Instructor, Adobe Education Leader, Adobe Community Professional, and an Adobe User Group Manager. Chana is also the owner of Mac in Art, a boutique design company in Los Angeles, where she is an exhibiting artist.

Behance: @chanaart

Instagram: @chana53, @artworkbychana

Twitter: @chanam