Los Angeles InDesign User Group
Design and Prototype with Adobe XD CC
Thursday, January 18, 2018
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 Prize Winner
Mighty Deals—William Gunn
Raffle Prize Winners
eDocker CREATE! 6 month subscription—Kerry Seal
Stock Layouts. Full access to Stock Layout template library. 3 month subscription—William Gunn
PDF2DTP from Markzware. 12 month subscription—William Gunn
Expo Creative Asset Manager for Mac from Insider Software—Douglas Magill
Font Agent Pro 8 from Insider Software—Douglas Magill
InMotion Hosting. Web hosting and free domain—William Gunn
DTP Tools Cloud for InDesign. 6 month subscription—Scott Rovin
Adobe Stock. 15 image licenses—Scott Rovin
InDesign Magazine. 6 month subscription—Jacob A. Lopez
LA Web Professionals Group meeting tickets—Annamaria DiSanto, Elvia Hernandez, Scott Rovin, Bing Wong