Recently, we’ve been chatting with VP of Creative and Technology at Atlantic Records and designer/developer, Eric Snowden (@EricSnowden), to find out just how the powerful combination of Adobe Touch Apps and Adobe Creative Cloud have impacted his creative process and workflow. Needless to say, we we’re wowed by what he had to say.
Check out the full Q&A with Eric below to learn how Touch Apps and Creative Suite 6 applications found in Creative Cloud play an instrumental role in projects he works on -both in the workplace and in his free time. Also, don’t forget to check out our new Twitter background, featuring his work.
Adobe: When did you first start developing and what inspired you to get started?
Jordan Casey: I first started developing when I was nine, I was playing a flash multiplayer game called Club Penguin and saw that other kids were building websites and blogs about it, and I saw that this could be fun, so I learned three languages: HTML, Actionscript 2.0 and CSS and went ahead and made my site.
Web designers use paper or napkin sketches to come up with a wireframe design for a web page by drawing a freehand sketch of it in a piece of paper or other media like whiteboards. Even though they don’t follow any rule while sketching on a napkin or a whiteboard, invariably, they use similar drawing pattern to represent a HTML object, say a DIV box, image, video, table, button or edit box.
Once the design comes through well in these napkin sketches, they then use a software tool to recreate the sketch as wireframe objects. Looking at the free hand sketching, they will insert wireframe objects for images, tables, videos, menus, buttons etc into the tool’s canvas and recreate the web page design as wire frame.
Use Gestures for Creation
Most desktop wireframe tools are mouse and toolset centric wherein wireframe objects are dragged and dropped into the design canvas and then resized and repositioned as required using mouse as the input. For a designer, doing this in front of a customer is not natural, quick or intuitive.
With the proliferation of tablets, web designers can do free hand sketching of web pages using sketching and drawing apps instead of using a piece of paper. But these sketches will be just images and will not be directly usable to generate wireframes.
Adobe Proto allows the designer to do free hand sketching on a tablet similar to the way they would do in a piece of paper. As they draw, these sketches are automatically converted into wire frame objects based on the gesture and the sketch pattern used.
So a wireframe idea can be sketched as shown in the left side figure below and it gets automatically converted as it is being sketched to usable wireframe objects as shown in the right side figure below.
Adobe Proto’s stroke gestures are combination of one or more stroke patterns. Stroke patterns are a basic set of shapes like rectangle, line, triangle, sinusoidal wave, angle bracket etc. The following shows example of different stroke gestures that differ in number of strokes.
Each stroke gesture is mapped to a wireframe object and these mapped wireframe objects get inserted into the page when the user draws the patterns of the stroke gesture. For e.g., a stroke gesture can be a single rectangle shape which gets mapped to a DIV element, or a rectangle followed by a line inside which gets mapped to an Accordion object, or a series of lines in parallel which gets mapped to a Menu object.
[Note: The stroke gesture examples here are for explanation purpose and may not be supported in the current version of Adobe Proto.]
Adobe Proto provides a Sketch mode in which touch inputs are primarily treated as stroke gestures. As the stroke gestures are performed, Adobe Proto converts it to a wireframe object when it recognizes that the stroke gesture is completed and a wireframe object is mapped to this stroke gesture. It then replaces the stroke gesture drawing with the wireframe object on the page canvas.
Touch inputs are nowadays multi-touch. Adobe Proto takes advantages of this and allows the stroke gestures to be multi-touch. For example, you can create a 4 item Menu bar using 4 parallel lines drawn one after another or drawn simultaneously using 4 fingers at a time. In fact, Adobe Proto allows a combination of this and so a user can create a 4 item menu bar by drawing 2 parallel lines simultaneously by using 2 fingers twice.
Using this, people can create even a 12 item menu bar using whatever combination of multi-touch strokes as shown below.
[Note: Some OS treats certain multi-touch input as OS gestures for certain predefined OS actions like closing an App or switching between Apps. In such scenario, these should be disabled in the OS settings so that it can work in Adobe Proto.]
Adobe Proto supports many stroke gestures and these are shown in the Gesture Guide at the bottom of the Editor view. Stroke gestures are chosen based on some common interaction pattern used by designers to express ideas. Moreover, these stroke gestures can be drawn naturally, whether you are right handed or left handed. This allows the user to freely draw a rectangle from left to right or right to left or by starting from any point in the rectangle and in any direction.
Some commonly used stroke gestures are given below.
The following screenshots shows the Gesture Guide and lists all the stroke gestures supported by Adobe Proto v1.0. As you can see, the stroke gesture for Vertical Nav Bar, Text Field and Text Area look similar with a pattern of horizontal lines. But they differ in number of lines and the size. If it is more than 2 parallel lines, then it is a Vertical Nav Bar and if the between the 2 parallel strokes is more than a certain value, then it is Text Aea.
Gestures for object editing
Apart from providing stroke gestures for object creation, Adobe Proto provides gestures for editing operations like Object Alignment and Duplication. These are multi-touch gestures (touch and tap) requiring a touch operation in both the source object and the target.
Object duplication can be done by touching and holding a source object with one finger, so that the object’s position grid is shown, and then tapping on the canvas where the duplicate should be created.
Object alignment can be done by touching and holding a source object by its middle handle on one of the side and then tapping on the target object with another finger. This will move and align the target object with the source object.
Impress your clients
The way we interact with machines is improving day by day with new innovation. The way we express our ideas and share them are becoming more impressive. Adobe Proto takes a step ahead in increasing the usability of touch based devices for not only expressing an idea, but also creating it as a re-usable functional wireframe for further use in the web development workflow.
Being a tablet App, Adobe Proto allows designers to share their ideas with the client anywhere and also impress them by creating new ideas in front of them in a very natural way of sketching with freehand strokes.
Creative Layer: What was your inspiration for the film?
Kush Amerasinghe: To give you a better idea, this competition is not only about making a short movie in just two days, but also being able to adapt to anything. So, you can’t really go into it with a certain story or even a kind of movie in mind. The genre is randomly given to each team – there’s a specific character, specific line of dialog, as well as a specific prop all teams need to include in the movie. My team got “Western,” which is probably one of the genres I was least prepared for and the hardest to do in the traditional sense in the middle of the city.
For some time now, Paul Kercal (@Kercal) has been sharing his Adobe Ideas creations with us. Whether they have been doodles from a bus ride or sketchnotes from interesting events he has attended, we’re always excited to see what he will send us next. So, to pay tribute to this devoted Adobe Touch Apps fan, we decided to feature his work as our next Twitter background.
In our exchanges with Paul on Twitter, we were able to learn how our Touch App has changed his creative process and workflow for the better. Read what he had to say by checking out the full Q&A below.
Creative Layer: When were you first introduced to Adobe Touch Apps?
Paul Kercal: The introduction to Adobe Ideas came at the hands of another talented mobile digital artist, the marvelous Mr. Stefan Marjoram (@stefanmarjoram). We met at a conference I had organized on behalf of my college. Since then I’ve followed all apps with more interest, the variety of tools available on tablet devices is staggering.
What was the very first creation you made with Touch Apps?
It’s difficult to point to the first picture as, with any new app, I’ll create three of four pictures quickly to get to grips with the UI and canvas. The first thing I remember creating is this image, which introduced me to a lovely way of working I hadn’t used before, zooming in, drawing a face and zooming out to add another, then another until I ran out of zoom. It was either the second or third piece I worked on as the UI to Ideas became familiar and natural very quickly indeed.
How much of a difference has direct touch input made to your creations?
Touch input has made the world of difference to the way I create imagery. My primary tools had been pencils, inks and desktop computers but these have faded a significant amount from my daily efforts. Now it’s all about the glass screen and the speed at which my fingers can dance on it.
When I’m doing youth work or working in schools, I often talk about the difference between a tablet and a piece of paper. A piece of paper is wonderful and I certainly don’t want to see traditional art ever disappear, but a tablet will allow you to undo, expand and edit in ways that traditional art cannot achieve and, most importantly, it’s all about the speed, the flow and the lack of resistance you are confronted with. With all forms of traditional art, you are faced with pushing something against something else: a chisel collides with stone, a pencil is scraped against what is basically softened sandpaper. Clay is pushed and pulled, canvas strains against a frame. A mobile device? When speaking to children I often say the screen is like the surface of a very still pond. All you have to do is touch it to coax a variety of beautiful pixels, swimming and dancing around your gestures like koi carp. It’s a very poetic process.
How have the Adobe Touch Apps changed your creative workflow?
Speed…glorious speed. Between a computer and the image is a mouse. Maybe a screen mimicking tablet and pen, rarely a distance than you can reach across. With a phone or a tablet, the brain and the screen you are accessing is a hand clap away. With a slight slice of computer power you can create artwork as good as the largest of drab boxes, just quicker. I love it.
Of the different Touch Apps, which one is instrumental to your creative process and why?
I LOVE Adobe Ideas and find it’s the first app I reach for in everything from meetings to life drawing sessions. It is an app that truly feels written for the glass screen and makes me happy in the second between icon and loaded app and happier when I get into the drawing process.
Touch Apps gives you the freedom to create anytime, anywhere. Where is your favorite place to create?
It’s an honorable tie between the number 34 bus between Guildford and Camberley and the Chin Chin Labs ice cream parlor in central London. I can happily create artwork in either venue, but only one offers me ice cream as a reward for my doodling.
The 48 Hour Film Project is a weekend where filmmakers are challenged to create a short film with limited direction and a simple genre, all to develop a movie in just two days. One of our own employees here at Adobe, Kush Amerasinghe, accepted the challenge for the San Francisco, CA event and opted to use Creative Suite 6 and Adobe Touch Apps within the Creative Cloud in his team’s efforts to create a winning submission. Here’s Part I of our Q&A session with Kush and his film titled, The Bandit:
Creative Spotlight: Brian Yap on Designing Grovemade iPhone/iPad Cases with Adobe Touch Apps, Creative Cloud
When we found out that Grovemade – a mobile device product design company based out of Portland, Oregon – tapped designer, illustrator and all-around creative, Brian Yap (@BrianKYap) to create a design for their iPad and iPhone cases, we knew everyone would be in for a treat. We caught up with Brian to get the inside scoop on his approach to designing the cases, and how Adobe Touch Apps, Creative Cloud and various Creative Suite 6 products simplified his creative workflow and more. Check out our Q&A below to see how these stunning cases came to be.