Home How to turn your app idea into a pitch-ready prototype | Adobe...

How to turn your app idea into a pitch-ready prototype | Adobe Creative Cloud

Learn how to use a wireframe designed for Adobe XD, and the Repeat Grid, to speed up your web and app prototype designs.

Download the wireframes:
1. Click the Wireframes link in the UI Kits section of the Adobe XD Welcome screen. Or, download them here (https://adobe.ly/2CfyiHz).
2. Click the Download kits link from the Behance profile page.
3. Unzip the wires.zip file and open the appropriate .xd file in Adobe XD.

Create a prototype:
1. Select the Zoom tool and drag across the correct artboards to view them in more detail.
2. Choose the Select tool, then click and drag to select the elements on the artboard you want, choose Edit – Copy, then File – New, choose the correct artboard size to create a new XD document, then Edit – Paste to paste the elements on to the new artboard.

Tip: You can also click an artboard title to select its contents. Then, copy and past to a new file.

3. Shift+click to select elements you do not want, right-click and choose Delete.

Tip: Depending on how the artboards are created, you may need to open the Layers panel (View – Layers), right-click a layer group, then select Ungroup to ungroup and properly select individual elements.

4. Drag remaining elements to rearrange as necessary.
5. Double-click a shape, such as a rectangle, to access individual, editable points. Drag individual points on a path to redefine the shape.
6. Create reusable character styles: Select a text element, style using the settings in the Text and Appearance sections of the Properties Inspector. Click the + icon next to Character Styles in the Assets panel (View – Assets) and reuse the style throughout your designs.
7. Create reusable symbols: Create a shape or design element (group elements if necessary). Click the + icon next to Symbols in the assets panel and reuse the symbol throughout your designs.
8. Create 2 more artboards: Select the Artboard tool. Click the appropriate artboard size. Do this twice.
9. Use the Select tool to drag and select the elements on the first artboard, click Repeat Grid, then drag the green handle on the right to repeat the artboard elements across the artboards. Place your cursor between the artboards and drag the pink guides until the margin is equal to the distance between artboards.
10. Drag 3 images from Finder or Explorer to fill the shapes.
11. Drag a text file with 3 lines for the headers to replace the placeholder text.
12. Deslect, then reselect, the Repeat Grid. Click Ungroup Grid to reveal the hidden content on the additional artboards.

Create a prototype:
1. Click the Prototype tab at the top.
2. Drag a wire from one artboard to the next.
3. Click the Play button at the top to use Desktop Preview to test the flow.

That’s it. To learn more, visit our Adobe XD tutorials page (https://adobe.ly/2C9id63).

Subscribe: https://www.youtube.com/user/adobecreativecloud?sub_confirmation=1

LET’S CONNECT
Facebook: http://facebook.com/adobecreativecloud
Twitter: http://twitter.com/creativecloud
Instagram: http://www.instagram.com/adobecreativecloud/

Adobe Creative Cloud gives you the world’s best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.

Comments

comments

Latest articles

Easy Ways to Select Artwork in Illustrator | Adobe Creative Cloud

Explore a variety of methods for making selections in your projects to make creating and editing faster and easier in Adobe Illustrator. To download the sample files and learn more about Artwork selection methods, click on https://adobe.ly/2AXMTv1 Subscribe: https://www.youtube.com/user/adobecreativecloud?sub_confirmation=1 LET’S CONNECT Facebook: http://facebook.com/adobecreativecloud Twitter: http://twitter.com/creativecloud Instagram: http://www.instagram.com/adobecreativecloud/ Adobe Creative Cloud gives you the world's best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.

Transform Artwork Freely in Illustrator Using Puppet Warp | Adobe Creative Cloud

Learn how to transform artwork using the Puppet Warp and Free Transform tools in Adobe Illustrator. To download the sample files and explore more tutorials on Artwork selection in Illustrator, go to https://adobe.ly/2vul87Y Subscribe: https://www.youtube.com/user/adobecreativecloud?sub_confirmation=1 LET’S CONNECT Facebook: http://facebook.com/adobecreativecloud Twitter: http://twitter.com/creativecloud Instagram: http://www.instagram.com/adobecreativecloud/ Adobe Creative Cloud gives you the world's best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.

How to Make a Custom Brush with Adobe Capture CC | Adobe Creative Cloud

Create a brush from a simple sketch. Start from scratch, or download practice files [https://learndownload.adobe.com/pub/learn/mobile-apps/make-a-custom-brush.zip] for a head start. Steps below. Prep your project: 1. Save the practice image (source-image.jpg) provided here to the Camera Roll on your mobile device, or use your own. 2. Download the Adobe Capture CC mobile app from the App Store for your iOS device, or from the Play Store for you Android. Open the app and sign in with your Adobe ID. 3. Tap Brushes from the top menu. Create a custom brush: 1. Tap Brushes from the menu. 2. Tap the image icon at the bottom, then tap Camera Roll. 3. Choose an image from your Camera Roll. 4. Tap areas to erase unwanted marks. Tap the checkmark. 5. Drag the resize handles (white dots) to position the blue box around the part of the image you want to use as the brush. 6. Tap Styles from the main menu. Tip: For the example in the video, we chose a style in the Photoshop CC & Adobe Sketch Brushes section. 7. Tap Presets. Adjust the Size, Spacing, and other settings as you like. Tap Done, or the right arrow on Android devices. 8. Choose the appropriate Creative Cloud Library. Tap Save. Apply style in Adobe Photoshop CC: 1. Open artwork in Photoshop. 2. Choose the Brush tool. 3. Choose your new brush from the Libraries panel (Window – Libraries). 4. Use the new brush to enhance your creation. That's it! To learn more about Adobe Capture and Adobe's other mobile apps, visit our Mobile apps Tutorials page. Subscribe: https://www.youtube.com/user/adobecreativecloud?sub_confirmation=1 LET’S CONNECT Facebook: http://facebook.com/adobecreativecloud Twitter: http://twitter.com/creativecloud Instagram: http://www.instagram.com/adobecreativecloud/ Adobe Creative Cloud gives you the world's best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.

Bring Dull Photos to Life Using Lightroom CC | Adobe Creative Cloud

Learn how to enhance sharpness, detail, and textures using Clarity and Dehaze sliders in Lightroom CC. Download sample files and learn more about image editing techniques in Lightroom: https://adobe.ly/2wbDUS0 Subscribe: https://www.youtube.com/user/adobecreativecloud?sub_confirmation=1 LET’S CONNECT Facebook: http://facebook.com/adobecreativecloud Twitter: http://twitter.com/creativecloud Instagram: http://www.instagram.com/adobecreativecloud/ Adobe Creative Cloud gives you the world's best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.

Comments

comments