- Tricks, Tips and Techniques Adobe Experience Design
- Create a destination pin with a simple circle in Adobe Experience Design
- Create a background blur in Adobe Experience Design
- Create Scrim in Adobe Experience Design
- Create an image avatar in Adobe Experience Design
- Playing with Adobe Experience Design Artboards
- Edit the mobile interface kit in Adobe Experience Design
Tricks, Tips and Techniques Adobe Experience Design
When Adobe released Experience Design as a public preview, the company achieved two pretty amazing feats at the same time. First, they have carved out a niche for themselves in the emerging prototyping software market. Second, they created an opportunity for users to play with “work in progress” and let users influence this progress. Now that the app has been available for a few months, we thought it was a good time to share some Experience Design tips, tricks and techniques.
But first, you might be wondering what is meant by prototype software. Key players in this space include Proto.io, Principle, UXPin, Atomic.io, Experience Design, and InVision. Unlike apps like Sketch 3, Photoshop, and Illustrator that create static drawings, these graphics editors provide the interactivity, motion, and other features common in today’s mobile and web design.
With the advent of the mobile and inevitable laser focus on the user, it is no longer enough for a designer to make a few sketches, put together a few compositions and then release or upload the design to a web server. . The UI/UX workflow has fundamentally changed the situation. Every step of the process, from user identification, sketches, wireframes, mockups and prototypes, is now subjected to extensive user testing.
This is the final stage – prototyping – where pain points are identified and corrected before the project moves to final production. This is where interactivity, movement, screen transitions and the placement of everything on the screen are so important. Problems and concerns cannot simply be presented as a static image or explained orally. After all, these products are for real people. Rather than translating everything into code, the prototyping process is increasingly done by graphics software designed specifically for this purpose. It’s easier to fix a bug, replace an image, rewrite text, move a button, etc. with a visual editor than it is to constantly rewrite and debug code.
In fact, this software has become an important part of the modern design and development environment “Rapid Prototyping”.
That said, let’s have some fun with Experience Design.
Create a destination pin with a simple circle in Adobe Experience Design
One of the interesting aspects of XD is its use of vector drawing tools. Can’t find an icon? No problem. Drive yourself. Here’s how:
Select Ellipse Tool and by pressing the Option/Alt-Shift keys, draw a circle.
With the circle selected, set Fill color value FF0000 and for the border – “None” in the properties.
Double click on the circle to display the anchor points. Drag the bottom anchor down.
Double click on the selected reference point and the curves are replaced by lines.
Draw another small circle with a white fill and no stroke. Move it into position and select the pin and circle. In the Alignment panel at the top of the Properties window, click Horizontal Center and a PIN is generated.
Create a background blur in Adobe Experience Design
Usually text or other content on top of a background image. The problem here is that the image usually overwhelms the content above it. One way to solve this problem is to blur the background image. You can blur an image in Photoshop or other image editing software, but this is somewhat inefficient, especially since XD can now handle the task for you. Here’s how:
Create a new artboard and add a background image.
Select Rectangle tool a and draw a rectangle over the image. With the rectangle selected, set the Fill option to white and for a stroke – Not .
Select with the rectangle selected background blur on the properties panel. Three sliders: Blur, Brightness, and Opacity. This is what they do:
- Fade amount . Adjusts the blur of the image below the shape. The maximum value is +50.
- Brightness . Adjust the brightness and shadows in the image. The minimum value is -50 and the maximum value is +50.
- cover . Affects the transparency of the shape and the visibility of the image below it. Values range from 0% to 100%.
If you really want to “change” things, change the color of the shape and play with the Opacity value to change the “appearance” of the image.
Create Scrim in Adobe Experience Design
A common design problem is that UI elements should have a common color, but are lost when placed over a background image or a solid color. The solution is scams. A border is a slightly opaque gradient placed between the UI element and the background. This is easy to do in XD. Here’s how:
Create your artboard in XD, add image, copy and paste UI elements from appropriate UI Kit − File > Open UI Kit … – in the mounting plate. In the image above, you can see that the status bar and app bar are hard to see.
- Select the Rectangle tool and draw a rectangle. On the property bar, select “Fill” and choose “Gradient” from the color picker’s drop-down list. Set the gradient colors to black and white . Set value A – Coverage – up to 60% and the value White A – up to 0%.
Select with the rectangle selected Object > Arrange > Return . UI elements are now visible above the image.
Create an image avatar in Adobe Experience Design
A common design pattern can be found in chat apps where people talk to each other and an image of the speaker appears on the screen. These avatars are usually images in disguise. It’s easy to do it in XD. Here’s how:
You start with an image and a circle or other shape on the artboard. You can fill the circle with any color. You don’t need to add a stroke color. It will disappear when you create the effect, so why? If you need to draw a circle, copy it to your clipboard.
Move the circle on the image and select the image and the circle. Select with both objects selected Object > Mask with Shape . When you release the mouse button, the avatar is created. From there you can resize it.
To add a stroke, paste the circle on the clipboard in the drawing area. With the copy selected, disable the fill in the Properties and add a stroke color and width. To align them, select both objects and click the Align Center buttons in the Alignment Options at the top of the property bar.
If you want to move the masked photo, double click on the mask. This shows the image and shape of the mask. Click on the image and drag it into place. When you release the mouse button, the image is in its new position within the mask.
Playing with Adobe Experience Design Artboards
Experience Design artboards aren’t just for posting content. They can also be manipulated. Here are a few things you can do:
If you want landscape and landscape versions of the artboard, duplicate the artboard, select it and press the button landscape on the panel Properties . The drawing area changes to landscape orientation. If the artboard has content, click artboard name and the artboard properties appear in the properties panel.
To add a custom color to the artboard and project, select the artboard and click Fill color chip In chapter Appearance In chapter Properties Panel. Enter hexadecimal value for color and click on sign + . The color is added as a custom color. To apply this color elsewhere, select the object and click on the chip custom color to apply the color.
Artboards can be made to scroll vertically. To do this, select the artboard and change the height in the panels Properties or drag the bottom of the artboard downwards. In the scrolling area of the property bar, select vertical from the drop-down menu and enter the height of the viewport for the screen. This dotted blue line shows the bottom of the viewport. To check it, click the button Play and scroll through the page. To disable scrolling, select Not in the “Scroll” drop-down menu.
Edit the mobile interface kit in Adobe Experience Design
Experience Design includes a UI kit for designing iOS, Android, and Windows interfaces. When you first open them, you might think they installed pretty well. Not really – every detail in these kits is fully editable. Let’s find out by building the Android framework.
To get started, select the Artboard tool and select android mobile In chapter google on the Property Panels .
Select File > Open Interface Set > Google Stuff . The Material Design UI Kit will open. Select the magnifying glass and select the artboard Screen guides . We like to start with this because it gives us instructions on how to properly place UI elements on the screen. If you click on one of the blue bars, you will see that it is blocked. Click lock attached to each of them to unlock it. Select the artboard and copy the selection to the clipboard. Return to the document and paste the screen into the artboard.
Click once on the panel Appendix at the top of the drawing area. Note how you can choose it. Select Object > Arrange > Bring to Front. Your selection is now above the screen guides. This should tell you that each of the elements on the screen is editable.
Double click status bar at the top and in the properties window set to Fill color meaning 455A64 . Double click on the application bar and set the padding to 607D8B. This should tell you that every element in the UI kit can be edited to match the project’s color specifications.
And what about icons? Here’s how to change their color. Double click on heart to select it. If you look at the properties window, you can assume that you cannot change the selection. Not really. Double click heart again. The properties open and you change the fill color to FF0000. Repeat this double-double-click trick for the remaining icons and text.