I've been watching the prototyping tools evolving since 2009. Long time, no talk. Nowadays they seem to help designers to get a smoother experience more than ever.
On one hand, industrial professionals keep supporting wireframe. On the other hands, others promote the use of powerful prototypers. To be honest, the truth is wireframe can't replace a prototype and viceversa. It depends upon several reasons.
SKETCHING
Before we go any further, I'd like you to put Photoshop (Illustrator, etc..) aside and grab a pencil to focus on the art of sketches! Believe me, it's the best way ever to start off a project on scratch, for different reasons. In fact:
save time in the long run. Yes, by the time you fire up Illustrator and spend alotta time setting strokes, fill etc..., you'll find out that you'd have waste less time by sketching on a piece of paper. It's way over easier and faster. Every designer has numerous thoughts ready to go, whenever a project is at the entry level. Be patient, coz the art of sketches allow you to express those thoughts
low fidelity. Cool it on details! Just remember the key at this step is quantity over quality. I have nothing against great looking thumbnails, in fact, I love browsing through ideas from top-notch artists, just make sure that you remember that your goal is to get all of those ideas out of your head and onto paper. Feel free to use Pantone (actually I often do use them. It gives better readability at a glance)
draw same thing less time. When faced with the task of producing so many thumbnails, your first instinct will be to start several tiny variations of the same idea. Take a look at the image above. Be smart as I did. I layered the Ui Components (I do the same in wireframes, next step). This is often a worthless practice when compared to the value of focusing on truly unique concepts. Try your best and push your brain to produce concepts that are as different from each other as you can manage. Remember that this is the brainstorming stage so there aren’t any bad ideas. Go crazy, think outside of the box; be weird!
At this entry level, it's possible to create an interactive prototype based on your sketches thanks to this app popapp. I'm only saying it for the sake of god of nerds, coz I do not use it. It's a great app and everything, but believe me... sketching should be time for reflection head-to-hand
Some tools online I use to get this stage level well done
WIREFRAMING
Now, let's talk about wireframe a little. I've been putting wireframes out there for so long that I can tell they are very valuable resource during the production process.
As the article from ux matters states, I believe that a wireframe, in comparison, is a basic visual guide we use to suggest the structure of an application and/or a Web site, as well as the relationships between its pages. Wireframes come long before we do any visual design. A wireframe’s purpose is to communicate and explore the concepts that come out of sketching—that is, those concepts you actually want to pursue further during user interface design. Wireframing lets us outline a App and/or a Web site’s basic, overall structure and flow and helps us explore divergent ideas from our sketches.
In other words, wireframing is a an official written document that indicates every single step taken by an a figurative user (persona) to use an application. Let's say it's a sort of blueprint guideline to help reader to understand what's the purpose of a specific application at certain points of its interaction. I'm speaking of reader for one reason, meaning this document has to be red like any other manual book that explains the app essence. Thus, it's not a painting. It's not an colorfull user interface expression. It's just a technical artwork. The more it's detailed, the better is understood by readers, whether they are developers or designers or customers. Doing so, wireframing gives reader the exact coordinates, the what-how-when-why-where in order to create an interaction while it's giving the overview concept. Yep, you've got the point: no misunderstading included. It's written! That's the reason why I call it a Written Interaction Model as well. I strongly believe that laying down one of this document can result into a really helpful step during the User Experience Design process - saying the Information Architecture
Let's say for instance you have produced a wireflow, and released it into the world. You have done this coz you think that your team and customers might find it useful. However, people need to understand why your wireflow might be useful for them, before they decide to read and use it. Documentation tells people that this project is for them. There are a small number of people who will source dive and read any design concept out there. That is a vanishingly small number of people, compared to people who will use your wireflow when properly documented. If you really love your project, document it, and let other people read it
If people don’t know why your project exists, they won’t read it.
If people can’t figure out how to use your design, they won’t use it.
If people can’t figure out how to use your design, they won’t use it.
Step by step, I improved this crucial step to provide the reader with a well defined interaction model ( I'd like to share some of my doc vectips ). It doesn't really matter what tool I've been using to get to this level whether it's Illustrator or any other alternative application like Sketch. Creativity is what it really takes to conceive and build a valuable wireframe document.
pro :
- a written interaction document
- a detailed step-by-step visual interaction
- gives visual fallbacks in case of older OS platform
- gives a quick app overview at a glance (whether it's a A3 or A4 and how they relate one another)
- a time saving workout process (i.e.- within just one or two artboards, a section can be fully explained)
- prevent the use of colors
cons :
- reading in order to understand the mechanics of an application
PROTOTYPING
Speaking of Prototyping tools, the info-architecture design perspective changes a little bit in favor of animations. It truly depends upon the goal you want to for. You want to provide the customer with an app preview before involving developers?
Well, go ahead, but let me say - do it at your own risk… particularly whenever an after effects video production stands for a prototype to your beliefs. Coz, remember folks. We may invest some light coding in them to achieve a degree of interactivity, but a prototype is still a communication tool and artifact. Don't forget that design can't be without development!
Therefore, when you get to animation level, you designer introduce another type of language that cannot be underestimate. As a matter of fact, animation is strongly tied to development code which is the last step at the end of the UXD process. Then you better be careful! Unless it's strongly based on a specific OS mobile platform guideline along with the help of developing team, I would recommend the use of prototype.
Suppose a prototype is required to get an android app preview. Every designers must consider that Material Design introduced a new way to conceive animations. Thus, animation must follow those specific guidelines in order to provide the customer with a well done visual animation supported on any device carrying Lollipop. Doing so, we make sure to provide development team with a step by step interaction document, instead of fancy random animations conceived just to entertain the customer's eyes.
Always keep in mind the OS guideline updated, while you're creating great stuff
Don't get me wrong! If you wanna make just cool animation effects for the sake of Lord coz you feel like having the chance to teach the giants nerds from California how to make animations, well go ahead, baby-baba! But get outta this webpage soon, you're wasting your time! This post is teaching how to make possible artworks and not fancy bubbles floating all over the screen
To do so, there are many tools out there ready to download. Way over too many. Some of these have improved, others just died on the way. Therefore, I'm giving you my best options down below. My recommendation would be to dedicate a few hours during the week and try them all out. Among these, I found very comfortable working with Sketch along with Marvel and/or Framer, because they can communicate one another in such a better way that you'd like it. Also, it allows designer to import entire Photoshop documents as is! Since the first time I used, I could already tell Framer was really great if you know a little bit of code and you want to do dynamic and complex interactions. For simple animations, there are other tools that get the job done without needing to know any code (once again, depending on what's your final goal, they might be a waste of time). As a UX designer, being able to create interactive prototypes to test and show the developers has been invaluable in communicating with developers what happens between two mockups.
Prototyping nowadays it's easier with the combination of these powerful tools
Best tools to work w/ prototypers
Other prototypers around the world I find interesting as well for different reasons
For instance, when I was committed to these projects, Cetaqua and Lottomaticard, I designed and developed simple prototypes (w/ Framer) in order to get a very quick idea of what these services could be in the shape of an android/ios applications. Have a look at full size ( Cetaqua prototype ) and ( Lottomaticard prototype )
pro :
- a video interaction document that gives instant cognitive-orientation
- quick app preview, only if it's considered as last Uxd step-process
- allows easy sharing (depends on tool been used)
- a video within a pdf (would be nice)
cons :
- might give uncorrect animations (not every tool provides them very well and crossplatform)
- can't replace real app development (dummy customers believe so…danger!)
- can't get a quick app overview which is hidden (flat navigation, screen by screen)
- a time consuming workout process (requires as many screens as much the prototype is detailed)
- might involve the use of colors (customers believe grayscale is not emotional....duh!)
About two years ago I designed and developed a very simple file-based web-application with HTML5 'n' Jquery along with the already made framework Framer at that time (now Framer it's totally renewed).
Since that time, Framer Studio and Framer.js, the framework that powers the animations, have gotten multiple updates and I’ve learned a lot more about the power of Framer and CoffeeScript. I decided it was time to update the code and see what I would have done differently.
I had alotta fun! However I haven't gone further than version 1.0 — For more details about this project of mine go check it out at Prototyper 1.0. My goal was to build a tool web-based that'd allow any type of reader (final users, designer, developers, managers) to interact with mobile project in order to get and edit any kind of related information. In other words, it'd be a combination of Wireframe and Prototype process working strictly with layers from Photoshop which is cool if you think about. What could it be? I guess a new way to conceive an interactive app documentation — take a look at my design system
