TUTORIAL: Use Adobe Draw to Create App Prototypes

IMG_0885Adobe Draw is one of Adobe’s latest mobile app. Adobe Draw is designed for the creative community to get away from having to draw with a mouse. I for one love sketching my visual ideas on my iPad.

Here are the steps I used to create quick app prototypes using Adobe Draw.

STEP 1. Capture template files

The first step for creating our app prototypes will begin online.

IMG_0878Use the browser of your choice and go to www.interfacesketch.com.

 

IMG_0879

 

2. Locate the template your need

Scroll to the template that you wish to use. Here four examples – there are many choices.

3. Capture the Template

Many of the templates have links to PDF documents. Position your template to fill as much of the screen as possible. When viewing PDF documents on a iPad – all of the PDF controls will be present on the screen while you navigate the PDF document. However, if you remove your hands and pause – all the PDF controls will disappear – making for an cleaner template.

TO CAPTURE: One the iPad. Press the HOME Key and the Side Button at the same time. The screen will do a quick flip. The screen shot is saved directly to the iPad camera roll.

4. Launch Adobe Draw

IMG_0886

Launch Adobe Illustrator Draw. For the best results use a stylist of your choice to draw directly on your iPad to create quick app prototypes.

IMG_08875. Create a New Project

To create a new project simply click the + sign on the sidebar.

IMG_0888

6. Work in Full Screen mode

Tap one time on the project window. The project will go to full screen. Three items that are worth noting.

  • Drawing Tool Bar.
  • Top left Menu Bar
  • Top right Close command.

IMG_0889Drawing Tool Bar.

The Adobe Drawing Tool Bar is pretty simple – with five options.

  1. Brush Selection.
  2. Brush Size.
  3. Opacity of Color.
  4. Color Selection.
  5. Layers.

Top left Menu Bar

The top left menu has a few tools that are very different from one another.

  1. Export Button – access to a wide range of sharing apps.
  2. Shapes – Add free clip art.
  3. Lines Tool – Draw precise lines.
  4. Full Screen button to hide menus.

Top right Close command.

Press the close button to return back to the Adobe Draw projects.

  1. Close Button.

7. Add Device Template

To add the Device Template that were captured during step 3.

  • Click the Layers Icon.

IMG_08918. Choice the source for your photo

Images can be imported into Adobe Draw from many different sources. For our project – the screen shots that were captured automatically save to Images On my iPad. 

  • Click On my iPad 

9. Select

Navigate to the Camera Roll to locate the captured screen shoots.

IMG_0892

 

10. Locate Device Template Image

Locate the Device Template image of your choice.

IMG_0893

 

 

The template image will load into place. You will notice that the template screen capture includes the iPad frame. This can be trimmed off prior to importing into Adobe Draw. I don’t mind the frame being there and am happy to save myself the step of editing the screen captures. IMG_0894

11. Select a Drawing Layer

To begin drawing be sure that you have the drawing layer selected.

  • Clip the layer icon.
  • Click on the upper layer to select.

IMG_0895

12. Select your Brush Style

On the right sidebar – click the brush icon to open the brush palette.

Experiment with the different brush styles to find a look that you like.

IMG_0896 (1)

13. Choice Your Brush Color

Yes Adobe Draw has a vast color palette. Simple click on the color button.

IMG_0897

14. Zoom around your work space

Adobe Edge supports all the basic iPad gestures.

  • ZOOM – Yes two finger pinch will zoom into your work.
  • UNDO – Two fingers ran quickly from the right to the left

IMG_0898

15. Draw your Design

Using a stylish of your choice begin to draw your app prototypes.

IMG_0899

16. Use Color to Highlight Features

The purpose of creating the prototype is to create quick design ideas – often working in black in white will be enough for most basic designs. However, color may be used to help highlight app layout and functions.

In the example below the green bar highlights where the app ad banner will run.

IMG_0900

17. Add Detail to App Prototype

Add as much detail to your App Prototypes as you need.

IMG_0901

18. Export your work.

Using the share button – located on the top right menu.

  • Click Share Button
  • Choice which service you which to use to share.
  • Follow on screen instructions to complete your share.

IMG_0889