Adobe Draw App

Randi Yemin • Fall 2018 • Savannah College of Art and Design • Professor Quarzo • Interface Design • and Web App Research, Review, and Analysis Table of Contents

Introduction Overview Target Users Use, Purpose, and Category

Device & Technology Availability Tablet vs Mobile

Content Overview Overview of Content Tabs

Interaction Types & Gestures Gestures Navigation Methods Content Browsing Screens

Image & Icon Use Use of Images Use of Icons

UI Visuals Branding Feature & Functionality

Similar Apps Adobe Draw vs Photoshop Adobe Draw vs

Sources Table of Contents

Introduction Overview Target Users Use, Purpose, and Category Device & Technology Overview Content Overview Interaction Types & Gestures Adobe Draw Image & Icon Use If you’re a vector artist, Adobe Draw is your go-to app UI Visuals Similar Apps for mobile drawing. Use customizable brushes to draw, Sources design, and style your art. We’ve included basic shape stencils to speed up your design work—like circles, squares, French curves, polygons, and even speech bubbles for comics. Create on resizable canvases up to a delightfully printable 8k. With one tap, your layered files are sent right to CC, or as a flat image to CC. Show off your drawing process with an automatically created time-lapse video.

Key Interaction Observation Recommendation Table of Contents

Introduction Overview Target Users Use, Purpose, and Category Device & Technology Target Users Content Overview Interaction Types & Gestures Professionals Image & Icon Use Adobe Draw, like many applications in the creative UI Visuals Similar Apps suite, was created to help professionals work more Sources efficiently. This app allows the user to draw from any location and then upload their creation to the creative cloud as an Adobe Illustrator or Adobe Photoshop file. The flexibility of the location and the type of file helps professionals to create without hesitation.

Everyone In-Between The professionals are not the only ones who get to have all the fun. Since it is a drawing program, users of the ages of thirteen and up can create just like the pro- fessionals. Adobe Draw gives the user the ability to see and reach out to other users. With this in mind, there are not any parental controls on this app and there can be questionable content for younger users.

Key Interaction Observation Recommendation Table of Contents

Introduction Overview Target Users Use, Purpose, and Category Device & Technology Use Content Overview Interaction Types & Gestures Create Image & Icon Use Create beautiful free-form vector designs on your UI Visuals mobile device with Illustrator Draw, the app that lets Similar Apps you turn your ideas into production-quality artwork Sources wherever inspiration strikes.

Purpose Draw Adobe Draw puts your favorite vector drawing tools and features into a simple, modern interface so it’s easy to turn any idea or inspiration into a gorgeous design. You can even launch Adobe Capture CC from within the app, create a new shape, and have it immediately appear on your Draw canvas. And because Draw is part of the Adobe Illustrator family, you can send your designs directly to Illustrator to refine on your desktop.

Category Productivity App The purpose of a productivity apps is to make mobile device users more efficient wherever they are by allow- ing them to access functions such as Adobe Draw and Key the Creative Cloud Suite. Interaction Observation Recommendation Table of Contents

Introduction

Device & Technology Availability Tablet vs Mobile Tablet vs Mobile Content Overview Interaction Types & Gestures Tablet vs Mobile Mobile Image & Icon Use As mentioned earlier, Adobe Draw is available on The Mobile device offers similar features to the tablet. UI Visuals Mobile Devices and Tablets. Each device supports Although the screen space on the Mobile device is Similar Apps smaller and can be very hard to work with. The proj- Sources the app a little differently. ects often do not sync, and this takes away one of the Tablet features for this app, conveyance. Unless your Mobile The Tablet offers more screen real-estate for the user device is connected to Wi-Fi the upload time and the to draw on, faster uploads to the creative cloud, and retrieval features take a long time. When a project is faster access to the creative suite features. It also offers created on a more updated version on of Adobe Draw, the user to create larger files but not too large.Since the project cannot be opened on the Mobile deivce. this is an app based for non-desktop use the file space is limited for projects. Note: The phone being used for this project is an Galaxy S9 and the tablet is an IPad iOS 11.4.1.

Key Interaction Observation Recommendation Table of Contents

Introduction Device &Technology

Content Overview Overview of Content Tabs Overview of Content Interaction Types & Gestures Tablet Image & Icon Use UI Visuals Settings Similar Apps My Account Sources • Adobe ID, Storage, Profile Picture, Occupation, About Adobe Draw • Send how to use features button. • Terms, Privacy, and Third-Party Preferences • Toolbar Left or Right (very useful ), Canvas rotation, stroke smoothing, Free up storage (read) • Show Touches (creates orange dot where finger is andmakes it hard to see where you are drawing) Follow Us • Social media for Adobe Draw and Import Files • Import files from adobe ideas which is just the Creative Cloud Tutorials and Gestures • Get started, guided lessons, gesture guide, tutorial videos, help messages Send Feedback Browse Market Adobe Stock More Apps Share This App

Key Interaction Note: If you want to upload your artwork as Illustrator File, it Observation must be done manually one project at a time. Suggestion, allow the user to have the choice in settings for the file to upload as Recommendation a Photoshop or Ilustrator File. Table of Contents

IIntroduction Device &Technology

Content Overview Overview of Content Tabs Overview of Content Interaction Types & Gestures Tablet Image & Icon Use UI Visuals Discover Similar Apps • Button is powered by Sources • User can click on artwork and it shows the single artwork and/or multiple artworks by artist • This will also take he user to the artist profile on Behance.

Key Interaction Observation Note: There are not any parental controls on this app and there can be questionable content for younger users. Suggestion,notify Recommendation user that content may not be sutiable for children. Table of Contents

Introduction Device &Technology

Content Overview Overview of Content Tabs Overview of Content Interaction Types & Gestures Tablet Image & Icon Use UI Visuals Work Similar Apps • It allows multiple project selection for trash and to duplicate, but Sources not for uploading. • sort projects and chose a project

Key Interaction Observation Recommendation Table of Contents

Introduction Device &Technology

Content Overview Overview of Content Tabs Overview of Content Interaction Types & Gestures Tablet Image & Icon Use UI Visuals Project Similar Apps • assorted brushes: five already installed brushes Sources • one eraser: cannot change the style just the roundness, taper, pressure dynamics, and velocity dynamics • colors: picker(single, analogous, mono, triad, compleme- ntary, compound, shades, custom), themes, opacity, my library(swatches) • layers(can disappear when clicking icon): • draw or image(on , take a photo, my files/creative cloud, from market, adobe stock) • shapes: add preloaded shapes, my library(connects with adobe capture) • upload: adobe desktop(PS or AI), image, link to project, behance, creative cloud PS(will not allow user to change from PS to AI), time-lapse(creates video of artwork’s creation and then you can share it anywhere), clipboard(can copy project to clipboard • settings: format(can change format of canvas), rotate canvas, grids(can add custom grid to project), shape snapping(unkown), stylus(syncs stylus), Learn to use adobe draw, learn brush basics, learn gesture basics, view all gestures • hide tool bar icon

Key Interaction Observation Recommendation Table of Contents

IIntroduction Device &Technology

Content Overview Overview of Content Tabs Overview of Content Interaction Types & Gestures Mobile and Tablet Image & Icon Use UI Visuals Discover Similar Apps • Button is powered by Behance Sources • User can click on artwork and it shows the single artwork and/or multiple artworks by artist • This will also take the user to the artist profile on Behance.

Key Interaction Observation Recommendation Table of Contents

Introduction Device & Technology

Content Overview Overview of Content Tabs Overview of Content Interaction Types & Gestures Mobile and Tablet Image & Icon Use UI Visuals Work Similar Apps • It allows multiple project selection for trash and to duplicate, but Sources not for uploading. • sort projects, chose a project, or create a new project

Key Interaction Observation Note: The images above shows how a user can create Recommendation a New Project. Table of Contents

Introduction Device & Technology

Content Overview Overview of Content Tabs Overview of Content Interaction Types & Gestures Mobile and Tablet Image & Icon Use UI Visuals Project Similar Apps • It allows the user to chose the color for the brushes, to adjust Sources the settings, and upload the project.

Key Interaction Observation Note: The images above shows how a user can use the paint Recommendation select tool, settings, and upload a project. Table of Contents

Introduction Device & Technology

Content Overview Overview of Content Tabs Overview of Content Interaction Types & Gestures Mobile and Tablet Image & Icon Use UI Visuals Project Similar Apps • It allows the user to chose a premade shape, hide the tool bar Sources and create new layers(image or drawing layer).

Key Interaction Observation Note: The images above shows how a user can dd shapes to Recommendation their project, hide the tool bar, and create new layers. Table of Contents

Introduction Device & Technology Content Overview

Interaction Types and Gestures Gestures Interaction Type & Gestures Navigation Methods Content Browsing Screens Gestures Content Handling in Other Apps Tutorials on Gustures Image & Icon Use UI Visuals Similar Apps Sources

Key • Besides the normal gestures used throughout the app, this app ask the Interaction user to learn specific gestures created just for Adobe Draw. These gestures Observation were created as shortcuts to help the user more efficiently create their artwork. Although sometime the app cannot always read the users gestures and instead Recommendation draws on the project. Table of Contents

Introduction Device & Technology Content Overview

Interaction Types and Gestures Gestures Interaction Type & Gestures Navigation Methods Content Browsing Screens Navigation Methods for the Tablet Content Handling in Other Apps

Image & Icon Use UI Visuals Similar Apps Sources

Key • Adobe Draw created three main tabs that are placed at the bottom of the Interaction screen. These three main tabs, Settings, Discover, and Work help the user to Observation navigate between the three main screens in this app. Recommendation Table of Contents

Introduction Device & Technology Content Overview Interaction Types and Gestures

Image & Icon Use Use of Images Use of Images Use of Icons Discover, Work, and Settings Tabs

UI Visuals Similar Apps Sources

Key • Adobe Draw use of images is limited to those that are created by the users. In Interaction the Discover and Work tabs the user can see the images of their projects and proj- Observation ects created by other users. Also in the Work tab, the user can import image to use in their projects. In the Setting tab, the user can see images of projects created for Recommendation tutorial purposes. Table of Contents

Introduction Device & Technology Content Overview Interaction Types and Gestures

Image & Icon Use Use of Icons Use of Images Use of Icons Discover, Work, and Settings Tabs

UI Visuals Similar Apps Sources

• Adobe Draw created easy to recognize icons for their users. As spoken about earlier, their are three main tabs in the Adobe Draw app. The selected state for Key these tabs are a filled in orange, as seen above. Once the user is in theSettings Interaction tab, the app uses a filled in gray box for the selected state. This selected state can be seen on image on the right. The filled in orange continues to social media icon, Observation but these are not selected states. Since these social media icons takes the user Recommendation outside of the app, it makes sense for them to be filled with organge. Table of Contents

Introduction Device & Technology Content Overview Interaction Types and Gestures

Image & Icon Use Use of Icons Use of Images Use of Icons Work Tab

UI Visuals Similar Apps Sources

Key

Interaction • For the Work tab, the useris introduced to more icons. These icons are spe- tool-bar option, as seen above, the icon turns a dark gray. While working on project cific for the projects the user is about to create. The top image is an enlargement this can be hard to find, perhaps is the selected state was a different color it would Observation of the tool-bar. While the image to the right of it shows the user selecting an item easier to recognize. If the user selects a brush or a layer, the selcted state is an or- Recommendation from the tool-bar and the icon doesn’t change color. When the user select the hide agnge stroke. Perhaps this same stae could be used throughout this work space. Table of Contents

Introduction Device & Technology Content Overview Interaction Types and Gestures Image & Icon Use UI Visuals UI Visuals Branding Branding Feature & Functionality

Similar Apps Sources

Logo Colors

App Colors

App Colors

Key

Interaction • Adobe Draw app is part of the Adobe company. Like all the Adobe pro- • The images above show how the color pallet is used throughout the Adobe grams, each program has it own set of colors for each logo but the inside of each Draw app on tablet. Observation programs has a slightly different gray color range. This is not any different for the Recommendation Adobe Draw app, it uses gray tones and a hint of orange that’s a part of the logo. Table of Contents

Introduction Device & Technology Content Overview Interaction Types and Gestures Image & Icon Use UI Visuals UI Visuals Branding Features & Functionality Feature & Functionality Features • • Similar Apps Five customizable brushes with unique tapers- Uers have the ability create on the go. Sources infinitely configurable opacity, size and color • Access your projects from the phone or tablet. • Insert basic shape stencils or new vector shapes • Connect with other users through the Discover tab. from Capture CC • Get detailed perfection: zoom 64x for tiny details, with canvas size up to 8k • Mix photos with vector drawing layers - restack, rename, transform and merge them • Send your layered illustration to Photoshop or Illustrator • Optimized for and iPad Pro • License royalty-free images from Adobe Stock within Draw

Key Interaction Observation Recommendation Table of Contents

Introduction Device & Technology Content Overview Interaction Types and Gestures Image & Icon Use UI Visuals Similar Apps

Similar Apps Adobe Draw vs Adobe Photoshop Sketch Adobe Draw vs Photoshop Sketch Adobe Draw vs Adobe Draw Adobe Photoshp Sketch • Adobe Draw is an object-oriented app, so everything you draw • Photoshop Sketch is a -oriented app, so everything you Sources remains a separate and scalable vector, and can afterwards still create is based on a bitmapped technology. You can use layers be edited apart from each other (later on, e.g. in Adobe Illustrator). to keep brushed strokes and all other elements apart from each Adobe Draw will always yield sharp strokes and shapes, yielding a other, but within a layer, the image ‘melts’ together as in a real cleaner, more constructed impression. . And the will show when you zoom in on the image. Sketch offers a wide range of brush-like tools that can give your creation a truly hand-painted impression. $Free

For further information on Adobe Draw visit: For further information on Adobe Photoshop Sketch visit: https://helpx.adobe.com/mobile-apps/help/draw-faq.html https://helpx.adobe.com/mobile-apps/help/sketch-faq.html

Key Interaction Observation Recommendation

Note: Adobe Draw and Photoshop Sketch are part of the creative suit which makes it easier for users to upload projects. Table of Contents

Introduction Device & Technology Content Overview Interaction Types and Gestures Image & Icon Use UI Visuals Similar Apps

Similar Apps Adobe Draw vs Adobe Draw vs Photoshop Sketch Adobe Draw vs Porcreate Adobe Draw Procreate • Adobe Draw is an object-oriented app, so everything you draw • User gets a gallery of just over 120 brushes, and you can Sources remains a separate and scalable vector, and can afterwards still download artist-created brushes for even more fun. There’s a be edited apart from each other (later on, e.g. in Adobe Illustrator). simple and robust color picker, and a selection tool that lets you Adobe Draw will always yield sharp strokes and shapes, yielding a outline specific parts of your drawing to edit them without affect- cleaner, more constructed impression. ing the entire canvas. You can also experiment with Procreate’s image-tweaking effects, which include blurs, sharpening, color balancing, and curve manipulation. All these features make it sim- ple to give your pictures that perfect vibe, and once you’re done you can flaunt your skills to your friends by creating a time-lapse animation of your work. $6 For further information on Adobe Draw visit: For further information on the Procreate App visit: https://helpx.adobe.com/mobile-apps/help/draw-faq.html https://itunes.apple.com/us/app/procreate/id425073498?mt=8

Key Interaction Observation Recommendation

Note: Procreate is not part of the Adobe family which can make it harder to upload and convert projects into Adobe files. Sources Table of Contents

Introduction Device & Technology Content Overview Interaction Types and Gestures Image & Icon Use UI Visuals Sources Similar Apps Adobe Draw Sources https://helpx.adobe.com/mobile-apps/help/draw-faq.html https://itunes.apple.com/us/app/adobe-draw/id911156590?ls=1&mt=8 https://www.adobe.com/products/draw.html https://helpx.adobe.com/mobile-apps/how-to/illustrator-draw-get-started.html# https://play.google.com/store/apps/details?id=com.adobe.creativeapps.draw&rdid=com.adobe.creativeapps.draw https://www.facebook.com/pg/AdobeDrawing/about/?ref=page_internal https://itunes.apple.com/us/app/adobe-illustrator-draw/id911156590?platform=ipad&preserveScrollPosition=true#platform/ipad https://www.wired.com/story/sketching-drawing-apps-ipad-pro/ https://play.google.com/store/apps/details?id=com.adobe.creativeapps.sketch

https://itunes.apple.com/us/app/procreate/id425073498?mt=8

Key Interaction Observation Recommendation