Results tagged “wireframing”
We’d like to introduce you to Adrian Franks (@afranks3) – a creative who celebrates friends, historic figures and admired current icons by creating silhouette sketches using the creative trio of Adobe Touch Apps, Creative Cloud, and Creative Suite! We stumbled upon one of Adrian’s impressive sketches on the Adobe Ideas Facebook Page and reached out to learn more about him and his work as we knew that Adrian would have a great story to share.
Get to know Adrian – find out where he likes to create, his ideal travel destination and how Adobe’s products have helped streamline his digital workflow in the full Q&A below. Also, visit both our Twitter and Facebook channels to see his work on display.
Adobe: When were you first introduced to Adobe Touch Apps?
What was the very first creation you made with Touch Apps and Creative Cloud?
My creative endeavors with Touch Apps is a line of silhouette drawings called FEARLESS that highlights various people that I admire whether they are close friends, historic figures, or current pop culture icons. Currently, I use Creative Cloud to store my vector-based silhouette and download them to my Mac for further design work in CS6.
Where’s your favorite location to create?
My favorite place is at my studio, which is broken down into 2 places. One, being my physical studio in Red Hook, Brooklyn, the other is out in the world on the go. Whether I am on my bike, riding the train, the bus, or random coffee shops, I consider that as part of my studio. It helps influence my work.
How has the integration from Touch Apps through to the Creative Cloud features changed your creative workflow?
Creative Cloud has allowed me to produce my ideas faster because I have fewer steps to take. I love the fact that once I am done creating in Ideas it auto saves, syncs to the Cloud where I can download the file back to my computer to further manipulate in Photoshop or Illustrator. Once done, I can post to social or send to a printer. All of this has streamlined the process into a digital workflow. I love it!
Which pairing of the Touch Apps and the applications within Creative Cloud (i.e., CS6), are most instrumental to your creative process and why?
I love the combo of Ideas + Photoshop + Illustrator for creating illustrations and designs. I also love Proto + Photoshop + Illustrator for web design and UX projects.
How much of a difference has direct touch input made to your creations?
The Touch Apps give me the freedom to create and concept like I used to before the computer. It replicates the functions of pen and paper, but maintains ease of use on digital. Touch is the present and future creative.
If you had the opportunity to travel to anywhere in the world with your Touch Apps, where would it be and why?
Africa, especially South Africa. Design there has been in a boom for a couple of years now. Events such as the World Cup and its rich political history have caused a shift in how the world perceives South Africa and its people. With that said, things such as creativity, design, art, and photography have pushed the thinking of South Africans. I would like to be a part of that, I would need to be mobile and believe Adobe’s Touch Apps and CS6 would allow me to do that.
Can’t get enough of Adrian’s work? Visit his Creative Works website to check out more of his work. If you have great work to share, send your creations our way for chance to be featured in an upcoming Creative Spotlight. Reach out to us on Facebook, Twitter or in comments here.
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.
Upcoming Ask a Pro Session
Title: New Ways to Work with Creative Cloud
Date: Friday, May 17, 2013
Time: 10:00 AM - 11:00 AM US/Pacific
Follow Us on Twitter
- 流氓会武术 | 科技推 on New MacBook Pro Retina Display Support
- The Black Keys – MAX 2013 Poster on Adobe MAX Attendees: Are You The Biggest Fan of The Black Keys?
- Adobe MAX Speaker Stephen Gates of Starwood Hotels Talks … | Vacation Guide Site on Adobe MAX Speaker Stephen Gates of Starwood Hotels Talks Adobe Edge Inspect
- Q&A with Adobe MAX Speaker Aaron Draplin – Part II | Creative Layer on Adobe MAX Speaker Aaron Draplin: Twitter Chat and Q&A Part I
- Adobe MAX la Conferencia de la Creatividad on 24-Hour Creative Session: Adobe MAX Logo