Make It Impactful: Adobe Experience Design CC (Beta)
For our fourth Make It Impactful tutorial, we created a simple tutorial highlighting some features of Adobe XD, an all-in-one tool for designing and prototyping websites and mobile apps. We asked designers Leah Buley and Marcelo Silva to demonstrate Adobe XD by building a simple landing page or home page, on the theme “Making an Impact.” Check out their work below. (We invited Create readers to create projects of their own and share the results, for a chance to win a one-year Adobe Creative Cloud subscription, a $750 Visa gift card, a lifetime unlimited pass to UI8, and a one-hour mentoring session with Leah or Marcelo. (This is the fourth of four Make It Impactful contests. The contest period has now ended.)
THE CONTEST RULES
2. Design a landing page (web or mobile) on the theme “Making an Impact.” You are welcome to interpret the theme how you wish—whether your page is devoted to how you make an impact, to what makes an impact on you, or to a related topic. (If you use photographs or illustrations in your landing page, please use only those that you have taken yourself or you have the right to use. Do not use photographs of people unless you have their permission. Entries containing recognizable images of famous people or public figures will not be eligible.)
4. Share your work on Twitter or Instagram, with the hashtags #makeitimpactful and #contest. You can export your design as a PNG image file (or take a screenshot) and simply share that, or you can share your design by using the Share Online feature in XD to create a shareable link that you can tweet.
5. The deadline for submissions is September 23, 2017, at 11:59 p.m. PDT. A winner will be chosen and announced by October 6, 2017.
6. Please enter only once per day. Eligibility for prizes is limited; for the complete contest rules (in English, French, and German), click here.
Let the two designs by Marcelo and Leah serve as your inspiration—but you do not have to follow every step in the tutorials. Do what makes sense for your design. (For more design inspiration, visit Adobe XD’s Behance gallery.)
LEAH BULEY’S XD DESIGN
STEP 1: When you open XD, you first choose a design format. Leah chose to design a page for the Web. She named her artboard (by double-clicking on its default name). Then she created a four-column grid by drawing a box, selecting Repeat Grid, and dragging the box’s edge.
You can create a grid of text boxes the same way. Leah added placeholder text to her design and then used the Repeat Grid tool to duplicate text boxes.
STEP 2: Leah had created styles in Illustrator. (Within XD, she opened the CC library (File > Open CC Libraries [Windows users can access this command from the hamburger menu]). She applied text styles and colors from the CC library (by selecting the object on the artboard and then choosing a style).
After Leah had applied styles and colors, she adjusted them (you can adjust text and appearance in the panel on the right side of the interface). She turned off the visibility of the four-column grid (as you can in many Adobe CC applications, you can toggle the visibility of individual layers on and off). She also imported graphics into her design (File > Import).
STEP 3: Next, Leah created a simple shape to be used in her web design as a button. She added a plus-sign graphic to the shape and, after grouping them (Object > Group), she turned the combination into a symbol (Object > Make Symbol).
Turning an object into a symbol adds it to your project’s Assets panel (View > Assets, or click on the Assets icon, which is above the Layers icon at the bottom left of the interface). From that panel, you can drag objects and other items into your design, just as you can from a CC library.
Next, Leah drew more Bézier shapes for the background of her design and applied more styles from the CC library.
STEP 4: Although you needn’t create a second page for your contest entry, Leah demonstrated XD’s prototyping features by adding a second page to her site. She copied her first artboard and altered many elements. Then she chose an element on her landing page and connected it to the second page, and she chose a transition style in the contextual menu that appeared. (She also did the same in reverse, so site visitors could click from her second page back to her landing page).
She tested her prototype by clicking on the Preview button (the arrow button at the top right of the interface). Then she created a shareable link by clicking on the Share Online button at the top right of the interface.
STEP 5: Once you’re happy with your creation, there are a few ways to share it on Twitter or Instagram. You can share an image of your landing page, either by taking a screenshot or by exporting it as an image file. Or you can copy and paste the shareable link (which Leah created in Step 4) into a tweet. Be sure to use the hashtags #makeitimpactful and #contest.
MARCELO SILVA’S XD DESIGN
STEP ONE: Marcelo decided that his design would be mobile-first; when choosing a size to design for, he chose to design for a phone. He then followed a process similar to Leah’s.
STEP TWO: Marcelo created his styles right in XD. He adjusted his design with the appearance and text tools on the right side of the interface. Next, with the Assets panel selected, he clicked on text within the design and then clicked on the corresponding Asset panel plus sign to record a text style. He did the same with colors, to record colors.