Share

Make It Impactful: Adobe Experience Design CC (Beta)

By Charles Purdy

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.)

Leah Buley created this basic design for a landing page, for a site devoted to interface-design principles. See what she did, and then make your own landing page based on the theme “Making an Impact.”

THE CONTEST RULES

1. You’ll need to download Adobe Experience Design CC. (If you would like, you can watch some beginner tutorials before getting started.)

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.

Leah drew a box, selected Repeat Grid, and dragged the green handle to create columns.

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.

Click to watch as Leah names her artboard, creates a grid, clicks on the layers icon to reveal her design’s layers, and adds copy.

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).

Click to watch as Leah applies and adjusts styles from a CC library. She also copy and pastes graphics from her computer.

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).

Leah created a simple shape and added a plus-sign graphic on top of it (left). Then she turned the combination into a 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.

Click to watch as Leah creates symbols for her prototype design. Notice that changing one instance of a symbol changes all the instances.

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.

Click to watch as Leah creates a second page (in Prototype mode), tests her prototype, and generates a shareable link to her design.

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

Marcelo created a mobile-first 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.

When you send a prototype link to others, they can comment on the design in a chat pod on the right of the interface.

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.

Click to watch as Marcelo saves character styles and colors from his design.

You can use the Assets Panel to edit any color or character style; the changes will be reflected throughout your document.

AND THE WINNER IS

Our judges chose this project by Elliott Hawkins as the winner! Congratulations, Elliott! (To see more winners, visit the Make It Impactful Contest Winners page.)