Design & UX
Article

Rapid Prototyping Compositions with Adobe Comp CC (iPad app)

By James George

Everything is moving towards speed and mobility. Many people, including designers are at least augmenting their desktop and laptop computers with mobile devices such as tablets. With this being said, more companies are focusing on apps you can use to increase your productivity.

Imagine sitting on the subway on the way back to your office and creating a mockup of a website along the way.

Imagine having an idea for a print poster, and getting the layout put together while you're in transit. When you get back, you can bring your idea into your more powerful devices for better design & development. In comes Adobe Comp CC, an app focused on creating quick prototyping on your iPad. Now, you can just right into your ideas and start fleshing them out.

Premade Layouts

The great thing about Adobe Comp CC is that it's free. Search for it on the App store, and download it without paying a penny, dime or any other small denomination coin. Then, install it and fire it up to get started immediately. When you start the app, you have three options to choose from. You can select Mobile, Print, or Web, and they have pre-made layouts set up for you.

formatting

Gestures

You can draw your layouts with simple gestures. Everything is simplified, to make it quick and easy to draw even complex shapes and useful design objects. For example, you can draw a square with a circle in one of the corners to create a rounded rectangle. A circle or a rectangle with an x over it creates an image box or a circular image box. You can see the list of gestures, shown in the screenshot above.

drawing-gestures

Options

The gear icon in the top right corner of the app gives you the option to choose from different document sizes. You don't have to simply remember common document sizes. Adobe has put together a lot of common options for you. You can start with a variety of iPhones, iPads, letters, and web sizes. It even lists the pt and pixel sizes below each option.

editing

Editing Premade Layouts

Moving around the canvas is as simple as swiping, pinching to zoom, and spreading your fingers apart to zoom out, just like any other app. It's even more important in an app like this, because of the simple refines you'll need to make. You also may have small elements in your design that you need to edit. You can tap an element to edit it, and hitting the + symbol below a premade layout allows you to make a copy. I'd make a copy before making any edits.

Once you're into the layout, you have several different options. You can select elements simply by tapping. Also, you open up more options, such as shapes you can make, as well as text, and photos. These menus open up even more options to work with.

shapes

Shapes

You can choose from a collection of basic shapes such as circles, rectangles, and horizontal & vertical lines. You can also bring in any custom shapes libraries you have stored in the Creative Cloud.

Text

Just like a typical design program, you can have presets for type. You can control whether certain text is in headline format, sub headline and paragraph text.

cc-market

Images

With images, you can put placeholders if you're not sure of what images you want to use just yet. You can also select images that already exist on your ipad, you can take a photo, or you can bring in images from your creative cloud storage. If that's not enough, you can even bring in custom images and graphics from the Creative Cloud Market.

from-scratch

Working With Designs

There are options at the bottom of the ipad interface that enable you to further work with your design, fine tuning different elements. You can import images into the layout itself. You can also work with the opacity of elements, fading them back like in any other Adobe program.

stacking-order

You can also crop your design to fit the dimensions you choose. One really cool feature I like is the ability to manipulate the stacking order of each element with a slider. I like this better than the menu system or the keyboard shortcuts for doing the same in Photoshop & Illustrator.

Drawing From Scratch

Drawing elements from scratch was a little confusing at first, just because I ended up moving the canvas around. Intuitively, I figured out that you had to click the incomplete square icon on the left to be able to draw shapes. Once you draw something, you click the icon again to edit drawing mode. This switches you to editing mode, where you can add images, colors and more.

Borders

Adding Extras

You can do more than just draw flat boxes, circles, etc. You can add borders, and you have total control over the look of them. You can determine the color, thickness, the stroke type and even how it handles corners.

My Thoughts

All in all, I was very impressed with what you could do with the Adobe Comp CC iPad app. You can get pretty far along with your work, even on an ipad. In terms of how easy it is to use, I haven't come across a tablet app that compares to it.

It is simple, quick, and you have total control. The app doesn't lag or hang up anywhere, which means you can focus more on getting your layout idea put together and less on figuring out the interface. It's important to note that I figured all of this out without reading or even opening the directions.

I was impressed overall with how quickly you could download assets from the Adobe CC Market. I think you could really do a lot with this in terms of getting a prototype together, whether it's for print or for the web.

If you're looking to get more done while you're on the go, Adobe Comp CC is a great choice.

  • Jin Ah Chon

    While I was reading your article, I downloaded Adobe Comp CC and used it. Frankly speaking, I don’t use any image editing tool on my iPad because I always use it on my desktop. But, Adobe Comp CC seems different. I want to try it and figure out more useful features. Thanks!

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.