Today, I wanted to give you a bit more in-depth workflow comparison between these two:
Draw with a capacitive stylus on a trackpad
Draw with a pen on paper then scan
OK, let’s start with a stylus on a trackpad.I draw these simple line art illustrations for my YouTube videos.
Let me show you how I do that.
I open a Photoshop file with a dimension of 1920px by 1080px to fit a full HD video. I already have my Photoshop file set up with a blue background. In Photoshop, I choose a pencil, and set a size to be 12px.
Then I choose white color then start drawing with a stylus on a trackpad.
As I mentioned in my previous article, one of slightly annoying things with a capacitive stylus on a trackpad is that you have to do the registration every time you start a new stroke.
This means that you have to move around the stylus to make sure where the cursor is before start drawing. Once you start drawing, it works fine as long as you draw a continuous line.
But once you finish a line, then you need to register the stylus position again.
Now this time, unlike the very first time, it’s easier because you just finished your first stroke, so the cursor still remains at where you left off for the most part, so that you can pick it up from there.
When you are drawing with a stylus on a trackpad, basically you have to maintain the clicked status of the trackpad.
But sometimes, you accidentally exit from this clicked status.
When this happens, you have to apply pressure to get back to the clicked status so that you can draw again.
If you want to change the size of your pen, you just have to adjust the size in Photoshop or whichever software that you use.
Since my illustration style is kind of casual and loose, I worry less about precision. Having some looseness actually adds some nuance and taste to the illustration style, so it’s better not to be super precise.
Once I’m done with basic line drawings, I do the coloring. I use 2-3 colors for coloring. To fill a closed area, it’s a lot easier to use Photoshop’s magic wand tool to make selection. Once coloring is done, that completes the illustration.
Because I drew everything directly on computer with a capacitive stylus on a MacBook trackpad, this is it and I don’t need any back and forth process, which is the beauty of using stylus to draw directly on a computer.
Now, drawing with a capacitive stylus on a trackpad is definitely not as natural as a pen and a paper.
You lose some ability to have detailed, fine-tuned, precise controls.
And it’s a bit annoying that sometimes you accidentally exit from a clicked status of the trackpad.
Also, for the most part I keep my drawing hand off the trackpad while drawing, so that the side of my palm doesn’t get recognized by my trackpad, which sometimes happens.
Overall, you need to be more careful and paying attention continuously on how you hold your hand, how you maintain the clicked status by applying just the right pressure to the trackpad as you draw.
But for the most part, it works fine for this type of rough illustrations.
Now, let me show you how I draw the same illustration using a traditional pen and paper.
Here I have a Sharpie, and I’m drawing on my sketchbook.
The feeling of drawing with Sharpie on a paper definitely feels much better.
You feel like you are actually drawing in a conventional sense.
The strokes are a bit more fluid, and I can draw a bit faster compared to stylus on a trackpad.
I can have a bit more subtle nuance to my illustration.
Once I’m done with my drawing, I scan it using a mobile app called Genius Scan.
It works pretty well.
Again because my illustration style is casual and rough, I don’t need any flatbed scanner for this.
Genius Scan has a few different filters.
For my purpose, I choose black and white so that I can capture my line drawing in a crisp black & white lines.
Once my drawing is captured in black and white using Genius Scan, I airdrop it from my phone to my MacBook.
I open the file in Photoshop, and do the followings:
increase the contrast
Select black part, then select “similar” to select all the line drawing parts.
Fill the selection with white
Copy & paste selection into the Photoshop file that I already created in 1920px by 1080px with a blue background.
Scale the illustration down to appropriate size
Finally I have my pen-based line drawing sketch in white on top of a blue background in my Photoshop file.
Coloring part is pretty much the same as I showed you in stylus version.
Now which works better?
A stylus on a trackpad, or a pen on a paper?
It kind of depends on your goals and purposes.
In my case, either one works fine.
Personally speaking, I still prefer a pen on a paper to draw, because you get a better control in your subtle touch, and you feel better when holding and running a pen on a paper.
But it’s also true that the process of getting my pen drawing into a Photoshop file is cumbersome, that I have to go through:
adjust a contrast
Select and color
Copy and paste
If I have to do this process over and over again, I get frustrated.
Google Sheets is a spreadsheet, just like Microsoft Excel.
Most people associate it with calculating numbers. But Google Sheets is actually great for organizing your ideas, making lists, even creating a low-fidelity prototype.
When I come up with an idea for a product or a design concept, I want to capture that initial vision in my head by writing it down in text, or visualizing it in sketches.
Once my vision is written down as a statement, a sketch, or a description of some sort, I need to further break it down into a set of high-level features in order to turn that vision into an actionable product requirement or a design brief to formulate a project.
I found that this whole initial process, from a vision to a high-level feature set, then to a low-fidelity prototype can be done fairly efficiently in Google Sheets.
In this article, I’d like to share this process in Google Sheets with you, taking a portfolio website as an example.
1. Vision and user story
First I write down my vision in Google Sheets document. Since I’m taking a portfolio website as an example, I start describing what kind of portfolio site that I want to create.
Because my portfolio website’s users are recruiters and hiring managers, it’s a good idea to put myself in their shoes, and write down a user story from their perspective.
2. Vision to feature set
As soon as I write down my vision and a user story from a user’s perspective, I start generating a feature set — all the things that I need to have in my portfolio website. A spreadsheet structure makes it super-easy to create and edit such a list.
Once I write down all the features/content that I can think of, I prioritize those in an order.
3. Feature set to pages
As soon as I have a list of features and content, I start thinking how these should be distributed across multiple pages of my portfolio website.
I create a new column called Pages, and assign an appropriate page for each feature and content that I listed.
4. Pages to main menu
These pages become main menu items.
I create another column called Main menu, and put pages in an order that I want to have in the main menu of my site.
At this point I have an overall information architecture of my portfolio website, in forms of a main menu, and a list of features and content with assigned pages for each.
5. Creating each page
Now it’s time to create each page of my site using a tab feature. Tabs are perfect for creating separate pages of my prototype still within the same Google Sheets document.
I copy and paste corresponding elements for each page from feature/content list, which I already created and organized in the first tab of Google Sheets document. Below screenshots shows a sequence of creating new pages in new tabs.
6. Linking pages
Once all the pages are created as separate tabs within the Google Sheets document, I copy and paste the main menu to the home page.
I insert a link to each main menu item by grabbing a URL of each page, which is a different tab in the same document.
I copy and paste the main menu with all the inserted links to other pages.
I add a highlight to a corresponding main menu item in each page to represent the selected status.
Now I have a clickable low-fidelity prototype so that I can test and evaluate the overall structure of my portfolio website, before moving forward with creating a high-fidelity design or building the actual portfolio site on a website-building platform such as WordPress.
The beauty of this prototype is that it’s fast, and I can stay razor-focused on my very vision without being distracted by all the visual treatments.
Before jumping into UX design/prototyping tools or a site-building platform to start building a website, it’s probably a better idea to focus on my vision and high-level idea first to see if it makes sense overall.
Because, as soon as I start diving deep into a UX design tool, my attention could easily be taken away by all the user interface details that I can play around with, such as colors, sizes, typography, white spaces, iconography, images, videos and so on.
The fact that it’s a spreadsheet meant for numbers somehow seems to offload my desire and obligation to make it look good as I would when using any design/prototyping tools. It’s an interesting psychological effect.
This approach works great even for non-designers too, such as product managers, product owners, business owners, entrepreneurs, and engineers.
Because Google Sheets is a simple spreadsheet, most people know how to use it. And it’s free.
Google Sheets allows anyone to freely mock up their ideas into a simple low-fidelity prototype without visual distractions and having to worry about learning how to use fancier UX prototyping tools. I found it quite useful.
In one of my previous articles, I talked about my disappointment with my MacBook Pro damaged keyboard. I have a follow-up story on this.
Previously I was assuming that I would probably have to pay if I were to replace damaged keys because the initial 1 year warranty period has passed.
This was not only based only my assumption but actually one of Apple store person that I talked to before confirmed at the time.
The other day, I had a chance to go to Apple store for a Genius Bar appointment for some other reasons. I casually asked about my MacBook keyboard problem.
To my surprise, the Apple store staff said that they can replace damaged keys up to 5 keys!
So I made another Genius Bar appointment few days later.
When I showed my MacBook Pro to a Genius Bar staff and mentioned that I was previously told by another staff that they could replace damaged keys up to 5 keys without charging.
he said “OK, let me replace all the damaged keys.” after examining my MacBook.
20 minutes later, he came back with my MacBook, with the keyboard looking good! He said, “OK, so I replaced all the 14 keys that were damaged.”
Wow, what a surprise!
And I asked, “So this is all free of charge?”
He said, “yes”
Me: so as I mentioned, this never happened to my older 17 inch MacBook. Why is this happening to this newer MacBook?
Here are what he mentioned:
So this newer MacBook has a lot thinner keys compared to older ones.
Each key is fully transparent when not painted so that the backlit LED shines through.
Then you put a white layer on it.
Finally on top of that, you put another layer with silkscreening of black with letter shape cutout so that the letter shows up in white.
Because of this 3 layer structure, when the keyboard is heavily used, it wears off the top black layer, exposing the 2nd layer which is white.
His assumption is that because now that the entire key is thinner, each 3 layer might be also thinner, which might be the reason why this is happening more often compared to the older MacBook which had thicker keys, probably with thicker layers too.
He said that he has a 10 years of experience at Apple Store.
His explanation made sense, and I was very satisfied with how he replaced all the damaged keys of my MacBook.
I didn’t expect this to happen, so this was a pleasant surprise.
Which is why I wanted to make another video to give a clear statement and a shoutout to how Apple Store treated me with good care.
Now the question still remains.
I know that my 15 inch MacBook is definitely a lot thinner and slicker compared to my older 17 inch MacBook.
It’s definitely a lot lighter, so its easy to carry around so that I can take it with me to anywhere. It’s great.
But if this slickness, thinness and portability is realized at the expense of “easier to wear off keyboards” that is constantly at the risk of getting messy, I wonder if that’s worth or not.
Maybe my typing or way of handling the keyboard applied more pressure than needed which might have caused the keyboard to wear off faster.
I don’t know.
But I’m curious if Apple collected this kind of information from customers.
This type of issues require longer time period to fully observe and evaluate.
Maybe we already live in such a high-paced consumerism that companies and customers don’t care much about using one particular tech product for a long period of time because a newer product always comes out with faster performance, cheaper price, and better features so you just upgrade anyway?
It reminds me of things like mobile phone battery that dies immediately after the warranty expires, or a major car components start to break after the 3 year warranty.
It also reminded me of Apple a few years ago that admitted that certain iPhone models had their batteries performance went down significantly after a certain period of time.
They ended up launching a special program to replace such iPhones’ batteries for free.
In a way, we are all trapped in this industry cycle, that we have to upgrade our devices to the latest ones in order to be on top of the technology trend, or in order to keep up with the highest productivity level to stay competitive as professionals?
One thousand dollar mobile phone must have sounded ridiculous in late 90s. But somehow it became a norm.
I still use iPhone 8 in the year 2020, and yes, it works perfectly fine! Because I’m a UX designer, so I feel like I always have to upgrade my phone to the latest.
But at the same time, I question this whole “have to upgrade” mentality and trend that we all have somehow blindly adopted without having a deeper thinking whether we really need it or not.
I bought a 47 dollar bunkie board made by Zinus. Bunkie Board is a frame you put under a mattress of your bed to prevent the mattress to sag in the middle for a better, healthier sleep. It’s nothing special, just a boring home product, right? Which is why it caught me with a nice unexpected surprise when I unpacked the product and went through its Out-Of-Box-Experience (OOBE).
Besides the actual product which comes in pieces to be assembled, below are OOBE components that greeted me when I opened a box.
1. An envelope with a thank you message
When you open a dark green envelope, a thank you message comes out. Interesting thing is that it is printed on a slip-off band that wraps around three cards. The message has a nice casual touch. The message explains that because they don’t want to waste materials including their thank you card, they printed their message on a slip-off band rather than on a card itself, so that the actual cards (three of them) can be used as regular cards by a customer to send to friends and family for whatever later occasion.
2. Hardware Kits
All the screws are packaged in pairs so that it’s easy to see and count how many. It’s also nice that the spare parts are clearly labeled as spare. An Allen wrench is included too.
The OOBE package also includes this tool, which is a hex wrench of some sort, in addition to a typical Allen wrench mentioned above. I used the Allen wrench during the assembly, and did not use this tool. But it’s a nice gesture.
3. Instruction manual — overview and components
The instruction manual was the best part. While thank you message and cards are definitely a nice touch, the core user experience of the product OOBE is assembling Bunkie Board itself. Therefore, this is the most important thing.
The instruction manual starts with an overview diagram above. It clearly shows how to place frames in which orientation, and in which particular order to assemble. This is actually quite useful so that you can absolutely make sure to place all the parts in right orientations in right positions relative to each other so that you don’t end up assembling parts the wrong way or the wrong orientation. It seems so simple and straightforward, but there are many hardware products that don’t have as clear instruction as this.
Right underneath the overview diagram, you see Components, which describes all the components needed to assemble the product. Illustrations of components are fairly accurate, both in terms of the shapes and relative size with each other (except the Allen wrench and the screw of course!),which is helpful.
Again, you come across quite a few hardware products with inaccurate technical illustrations on their instruction manuals. When you come across such inaccuracy, sometimes you can immediately tell that it was done purely from production efficiency purposes such as slightly different models with different shapes sharing exactly the same instruction manuals with generic illustrations that may not look like the product you purchased.
When I started assembling with the step 1, it was super-clear because the numbering system on the assembly instruction was consistently carried through to the actual components too. As you can see in the assembly instruction and pictures below, the actual components had numbering stickers, so that you can make sure to match the same numbers to screw those together.
It’s kind of similar to IKEA furnitures in terms of its instruction manual that shows you how to assemble products. But from my perspective, this was done much better, a lot easier and clearer to understand so that you don’t make mistakes. From my past experience, IKEA instruction manuals are sometimes a bit confusing especially when you have similar parts not accurately drawn in illustrations. Also, IKEA instruction manuals have almost no instruction texts, so you have to reply on illustrations only. On the other hand, Zinus Bunkie Board has a better, clearer instruction diagrams, and more accurate illustrations overall with text descriptions if needed.
Another thing that I liked about this product is that it was very well built when considering the price tag ($47). I felt this especially when I inserted all the thirteen “D” parts into slits of “B” parts. (see picture on above-right). Every parts fit perfectly into the slits.
Sure, this is a simple product. How can it go wrong?
But because it’s a simple product, its assembly should be super-clear and super-simple. What I documented here may not seem anything spectacular or magical. Yes, everything is very straightforward. It may seem that it’s a no brainer to make something like this. That’s the beauty, when something is very well thought-out and manufactured, so that everything feels right.
But the fact and reality that there are so many products out there that don’t have its OOBE as simple and clear as this tell me that it is actually quite hard to do what it seems so easy to achieve on paper.
And this type of experience — the one that seems so simple and gives you a pleasant experience without anything too fancy — is what we as UX designers should aim for in whichever products or services we design.
Many UX beginners struggle that a lot of entry-level UX positions already require 2-3 year work experience.
How do you overcome applying for entry-level job positions that require 2-3 year of work experience when you just graduated from college, or if you don’t have such work experience?
So the field of UX has been attracting so many people from all the different fields.
As soon as you start applying for a job, you will confront this.
Hiring managers and recruiters ask you:
“What kind of work experience do you have?”
And lot of times, you will hear them telling you that,
“You don’t have enough experience”.
And you wonder, how can I possibly already have work experience when I just graduated from a college?
Hiring managers and recruiters are looking to fill in open positions in their companies with someone who can directly function from day 1. Lot of the time, the hiring side is in a desperate business need to fill in an open position to get their business going. This means that they have no time to hire someone with no experience, because that means they need to train and educate that new person. This is a significant investment, that they want to avoid.
Which is why, hiring managers and recruiters will focus on candidates’ work experiences and portfolios as concrete proofs.
So what do all these mean to you?
This means you need to understand this reality, and plan ahead.
While you are still in college, you should do the followings:
1. Try to do internships as much as possible.
Most colleges offer internship opportunities. This is a great way to get an early exposure to the real world, and get a chance to work on real world projects while you are still in college, so that you can put those projects in your portfolio.
If the internship goes really well, you might even get an offer for a full-time position once you graduate.
2. Try to set your school project in a real world context
Instead of working on pure, imaginary project, try to find a real client such as a local non-profit organization that you can work with for your school project.
This works great because…
It turns your school project into a real world project, solving a real user’s problem
The whole process of you finding an organization, making a pitch to them, and working through problems with them will be a great experience for you, which could make a great case study to be put in your portfolio.
3. Continuously work on your own UX projects
If you cannot find an organization to work with as described in #2, you can still work on your own UX projects. Even if you are able to do #2, I would still suggest you work on your own UX projects to continuously build up your experience.
Instead of working on a generic “redesign of existing popular website or app”, try to find a specific problem, and focus on solving that specific problem.
When you work on your own UX project, treat it as if it’s a real project.
Go through a whole cycle of:
Define a problem
Research on competitive products that solve similar problems
Test your concepts with users
Iterate your design based on learnings from the user test
For more details on how to work on your own UX project, check out my other article.
In order to gain experience, you need to keep working on UX projects. That’s the only way, and the best way to learn and grow as a UX designer.
If you can do all these three, and put these in form of a case study, or an in-depth process walkthrough as part of your portfolio, your portfolio becomes a concrete proof that you have experience, and you can deliver concrete results.
The only way to overcome being seen as “not enough experience” is to prove yourself that you can actually deliver by showing them your tangible output in form of a portfolio.
Keep working hard, enjoy the whole process. Good luck!
Lot of people new to UX want to know which UX prototyping tool they should use. Prototyping is critical part of UX process. Important thing is how you think and use a tool to visualize your ideas so that it becomes communicative to others. To do so, you need to be proficient enough with a tool, so that you don’t become a slave of it.
The whole point of prototyping is to quickly test and evaluate concepts before its too late. Therefore, speed and ease of use are critical.
Today, Sketch still remains as the most popular design tool, which has a prototyping capability. While Sketch is the most popular and it’s a great design tool, when it comes to prototyping, it’s not the best.
Most of today’s popular prototyping tools have what is called “stitch screens with wires” interaction model.
This is a very intuitive way to quickly make a prototype, just by linking from one screen to another to create a transition.
To make these transitions feel natural when interacting with a prototype, you need some transition effects. These include simple fade, slide in, and more sophisticated animated effects. This is where Sketch falls short.
Other tools such as InVision Studio, Principle, Adobe XD have better transition effects with fine-tuning capability.
The good news is, most of these softwares have some sort of compatibility with Sketch, and it works very similar to each other.
In today’s mobile-centric world, running a prototype on a mobile phone is becoming more and more important. Sketch does have a mobile app called Sketch Mirror to support this, but the app needs to be used while you have your Sketch file open on your Mac, and both your Mac and your mobile phone need to be connected to the same wifi network. This means you cannot share your prototype with your team members online on mobile.
This is also where other tools are better, such as Craft plugin for Sketch, InVision Studio, Adobe XD.
These days, collaborating with other designers seamlessly is becoming more and more important. Sketch has Team feature, but with additional paid subscription.
If the collaboration feature is important for you, Figma and Adobe XD might be a better fit for you, as they provide collaboration feature for free to certain extent.
All these information might be quite overwhelming for beginners.
So here’s a good news for you!
I created, and just launched Prototype Resource Map Lite.
This is a 131 page free ebook.
It gives you a comprehensive overview of today’s 8 most popular prototyping tools.
It gives you a comparison of these 8 tools in various factors such as price, basic prototyping features and so on.
It also walks you through each tool with its pros and cons, and uniqueness.
It should give you a thorough understanding of 8 popular tools, to help you make a smart, informed decision on choosing which tool to start, and which tool to use for what purpose.
A lot of people are interested in becoming a UX researcher, but seem to be struggling to break in to the field especially when you come from a different background, and you don’t have a relevant education and experience yet. In the field of UX, experience is everything. You need to show an artifact of your work in form of a portfolio in order to prove that you can put your knowledge in action effectively in a UX project context. Which is why it’s important to work on your own UX project as as UX researcher.
If you haven’t done that, you should start working on it.
Start working on your own projects to build your portfolio as a UX researcher.
A UX researcher works as part of a UX team. The goal of UX research is to help making the user experience of the product/service better.
To do so, UX researchers can help in various ways both qualitative and quantitative research, including ethnography research, generative research, concept validation, usability test and so on.
Hiring managers and recruiters need to see:
How a UX researcher plans and executes a research (sessions)
Summarizes the findings
Distills those findings into a list of actionable items
And then communicates all these effectively and efficiently to stakeholders
Yes, you will hear many people tell you “you don’t have experience”, if you never worked on a real world project as a UX researcher.
The only way to overcome this is to show a concrete proof that you can actually deliver.
Real world projects are obviously ideal, but if you don’t have those, the next best thing is to build your own projects and work on those as if it’s a real project.
Below are just some examples to give you an idea on what kind of projects that you can work on your own.
Future opportunity research around a topic of ABC:
Pick a topic area of your interest (e.g. future of voice assistant), and interview 5-10 people who are relevant to that area in some way.
Ideally you should pick at least one expert in the field, a power-user, and a casual user.
Summarize the interviews into a report or a presentation.
You could also run a quantitative survey.
Incorporate your desk research results.
Summarize all above into a presentation / report.
Deep dive of a software or an app, and find pain points and possible solutions:
Pick a software or an app that you have an access to its power users.
Closely observe these users interact with the software or app with their permissions, record these, take notes.
Distill user pain points that you found,
Come up with possible improvement points.
Summarize all the findings with possible solutions in form of report or a presentation.
Taking above ideas as a springboard, feel free to expand and explore your ideas on what kind of UX research projects that you would like to work on!
A lot of web designers want to transition to UX designers, as that seems like an easy thing to do on its surface. If you are serious about moving in to user experience, you need to spend some time to work on your portfolio towards that direction, in order to convert your web designer’s portfolio to UX portfolio.
As a web designer, I understand that you may have only done web-based projects or websites. And the final output for those projects might be something that you are not happy with, or not what you intended.
But you can actually take those projects and turn those into case studies by shedding lights from a UX perspective.
You can articulate how you would reframe the project from a UX point of view, and rework on the project based on that new perspective and process.
If you have a project with a final output that you don’t feel comfortable, you can document the whole process, and clearly point out what went wrong, what you would have done if you were given enough resource and opportunity, then actually work on ideal design to prove your point.
Document the process of your project from start to finish
Point out issues along the way:
what went wrong
what you would have done if xyz (e.g. if you were given enough resource…)
Try to be as objective as possible, don’t just blame others. It’s OK to criticize, but when you do, you should propose a solution.
If the final product turned out to be very different from what you originally designed, compare those two, and point out pros and cons for both.
Come up with a revised plan and strategy to improve the process and output.
Include user test as part of the process so that you can learn from users. Create a design mockup based on the revised plan and strategy above. Articulate improvement points of your new design. Point out potential issues of your new design too.
The key point here is for you to clearly demonstrate how you can learn from your past experience, analyze issues, come up with a better plan including how to collaborate with other stakeholders such as clients, developers and managers, and improve your design output.
If you can put your serious effort and pull out these together, I think the whole documentation of your thought process to an improved design output can become quite convincing in showing your problem-solving skills and a healthy, positive mindset as a UX designer.
You first need to get through a stereotype label that recruiters and hiring managers will immediately put on you that, ”you don’t have enough experience”.
A UX designer solves a user’s problem, rather than simply creating fancy visuals. And you need to concretely show your ability to do so.
Being a UX designer is a journey of continuous learning.
In addition to above, you should constantly work on your own UX projects to further build your experience and portfolio. Check out my other article on how to work on your own UX project.
Although tools are not the most important things to learn as a UX designer, inevitably you need to use it in order to achieve your more important goals, to solve user’s problems. This article covers today’s 8 most popular UX prototyping tools including Sketch, Craft, Axure, Adobe XD, InVision Studio, Principle, Framer X, andFigma. First, it compares key aspects such as price, basic prototyping features, Sketch compatibility. Then it covers a high-level overview of each software program in terms of pros and cons and uniquenesses.
I understand there are many more tools out there, and other people may have different opinions. I also acknowledge that I am not familiar with every single tool available. I chose these 8 tools based on a combination of popularity and how these tools played key roles in the modern history of prototyping tools, and likely to take part in the future.
When Adobe Flash started going down, Axure took over in Web 2.0 Era, then Sketch came along to become a de facto standard. But lack of prototyping and cloud features in its early days opened up other new tools to emerge around Sketch, such as InVision, Principle, Craft plugin for Sketch, and Adobe XD with a new voice capability. Framer X is tackling a challenging developer handoff problem, which could be the future of prototyping. Figma is getting more tractions lately because it was built for cloud-based collaboration, which is becoming a norm in today’s accelerated remote work situation.
Trends in today’s prototyping tools
Today’s trends in prototyping tools are ”stitch screens with wires” interaction model, accompanied by auto-animate transitions that smartly animate transitions between two screens connected. This makes prototyping super-fast and intuitive for non-tech-savvy UX designers.
Currently, Sketch is the most popular prototyping tool. However, Sketch is very limited when it comes to creating transitions and micro-interactions with animated effects. This is where other tools have strengths, and all of them have some sort of compatibility with Sketch. Let’s dive in to comparisons of 8 popular prototyping tools.
Comparison of 8 most popular prototyping tools
Sketch one time price is $99 which includes 1 year of software updates and Sketch Cloud usage. Optional renewal is available for $79/year for software updates and cloud.
Adobe XD is free.
Axure is $495 for its perpetual license, or $29/month subscription.
InVision Studio and Craft are free, but are limited to only 1 prototype in InVision Cloud for free.
Principle is $129 (one time fee).
Framer X is $15/month or $144/year, based on 1 year subscription.
Figma is free with a Starter plan, up to 3 prototypes.
Basic prototyping features
Because the whole point of prototyping is to quickly test concepts, ease of use and speed are critical. In most real world situations, time is very limited, so ability to quickly create a basic prototype just by connecting screens together is super convenient, and that’s all you need in most cases.
From this perspective, Sketch, Craft, InVision Studio, Principle, Figma, Adobe XD, Framer X all do great jobs with similar “stitch screens via wires” interaction models.
Principle creates all the transitions automatically, allowing some controls via timeline UI. This is great for creating a nice animation instantly. But it doesn’t offer the most basic “preset transitions” such as slide, push or dissolve like other tools. For this reason, Principle is positioned slightly to the right in the chart compared to others (except Axure).
InVision Studio also provides a timeline UI similar to Principle, but it also provides basic preset transitions, which makes it a bit easier when it comes to basic prototyping.
Axure uses a very different interaction model. A user has to specify and add every single interaction via Interaction Editor. Interaction Editor is a very powerful tool for building complex interactions, but lacks speed and glance-ability for basic prototyping.
Above chart shows how 8 tools are positioned on a price vs. ease of use plane. As you can see all the tools except Axure fall under bottom-left quadrant.
Basic prototyping features — animation adjustments
This chart illustrates how much controls you have when creating a basic prototype, when it comes to sequence of multiple animations, timing and duration of animations, and ease in/out effects. Software programs are broken down into 3 groups.
The group in the top-left quadrant have a good balance of an overall ease of use and ability to fine-tune transitions and animations without too much work. These include InVision Studio, Principle and Adobe XD. All three do pretty good job in creating auto-animate transitions. Although similar, Principle seems to create the smoothest animations in most cases.
Figma recently added Smart-Animate feature, but currently it’s lagging compared to above three programs. Framer X can do fine-tuning but only via code. Sketch and Craft does not support fine-tuning. They only support basic preset transitions.
Axure can do many complex interactions, but only via Interaction Editor, which is not the simplest way from basic prototyping perspective.
Currently, InVision Studio is the most Sketch-compatible program, which supports opening Sketch file directly as well as copy & paste objects and symbols from Sketch.
Adobe XD supports opening Sketch file directly, but copy & paste from Sketch doesn’t work. Principle can import Sketch file almost the same way as opening, but copy & paste does not work. Figma can import Sketch file but takes time. Copy & pasting a Sketch object does not work. Framer X accepts copy & pasting a Sketch object, but cannot directly open or import Sketch file. Axure can take copy & pasted Sketch object, but only via Axure plugin installed to Sketch.
When it comes to advanced prototyping capability, Axure covers pretty much any interactions possible to simulate how the actual product is going to feel like via Interaction Editor except voice interaction. But Axure does not support videos. (Axure supports GIF animations)
Framer X is another tool that has a potential to add a lot of advanced interactivity to a prototype. One of the unique advantages of Framer X is that it supports video and audio. You can even embed YouTube video and run it inside your prototype, which is pretty powerful. While Framer X has a store to download many useful components, many of advanced interactivity need to be added via code.
Principle has an interesting and unique feature called Drivers, which can add various micro-interactions quickly to make the prototype look real.
Adobe XD allows you to create voice interaction, which stands out from competition in this area as no other tools support that.
Sketch, Craft and Figma are fairly basic, so does not support advanced interactivity at this point.
Running a prototype on mobile
All the software programs have mobile apps to run a prototype except Framer X. Framer X is lagging in this area, where a prototype can only run inside a mobile web browser via QR Code.
Sharing a prototype online
Principle falls short in this area as it does not have a cloud. In order to share a prototype in Principle, you need to either send a Principle file and have it open from Principle mobile app, or export a prototype as a Mac Desktop app to be viewed on a Mac that doesn’t have Principle app installed. This means you cannot share a prototype with Windows users.
While Sketch remains strong in this area with its abundant plugins, Adobe XD and Figma are catching up. Framer X has a unique approach with its Store, which is super-easy to browse and download functional components such as YouTube Player. Moving forward, Adobe may have a powerhouse advantage in a near future, as seen in innovative new feature such as voice interaction. Many of popular Sketch plugins are already getting ported to Adobe XD too.
As for collaboration within a team, Principle falls short. Adobe XD and Figma offers free collaboration feature. Sketch offers a separate subscription for Team feature. Axure has a separate software that supports Team feature called Axure RP9 Team. InVision Studio offers additional subscription for Team feature. Craft uses InVision Cloud. Framer X has Small Teams plan that allows access to Team Store.
1. Sketch (based on version 63.1)
Sketch is the most popular tool, a de facto standard with various 3rd party plugins. But the default transitions are minimum, animate from right, bottom, left, top only.
Pricing: $99 (includes 1 year updates, 1 year Sketch Cloud. Optional renewal is available for $79/year for software updates and cloud. )
Free trial: 30 day
De facto standard
Strong symbol features
Limited transition animation options
No fine-tuning capability for animations
No micro-interaction support
Running a prototype locally, on mobile and in the cloud
Clicking a preview icon on the top right corner allows you to run a prototype locally.
Sketch Mirror app can mirror an open Sketch file on your Mac through the same wifi connection. To mirror a prototype on a mobile app, click Notifications on the top right of the desktop app window, and select a mobile phone running Sketch Mirror app.
Uploading to a cloud allows you to share a prototype with others via a link. This is a great way to share a prototype with others and get feedback.
Smart Layout, plugins
Smart Layout allows automatic resizing of buttons and layouts based on the text lengths.
Abundant plugins are one of Sketch’s biggest strengths compared to its competitors. All the installed plugins appear under Plugins menu, and can be disabled via Preferences/Plugins.
Rename It, one of Sketch plugins lets you rename selected layers or artboards in bulk with numbered names. Adding “%N” in Name field after your desired text string (e.g., rectangle, square, thumbnail) results in layer names with your [desired text string]+number.
Collaboration – Team feature
Sketch has a Team feature which allows you to collaborate. You can access this feature by logging in to your Sketch Cloud, then select Create New Team.
Adding team members cost $9/month per contributor, or $99/year per contributor.
2. Craft plugin for Sketch (Based on version 1.0.94)
InVision’s Craft plugin enables a slightly better prototyping capability directly within Sketch. These include gestures such as tap, swipe, and transitions such as dissolve, push, slide.
Mac only (as it’s a Sketch plugin)
Free (if you already have Sketch)
More transition controls than Sketch
Smart Duplicate, Data features
You need Sketch
Transition options are still limited
Sticky header not supported
Prototype menu and toolbar are embedded in Sketch
Because Craft is a Sketch plugin, Craft menu appears as an embedded toolbar on the right side of the screen. Clicking on a circular head of a blue link arrow brings up prototype menu. Prototype options that Craft has are slightly more than Sketch’s options as below.
Running Craft prototype locally, in the cloud, on mobile
Craft prototype is very similar to Sketch prototype. Currently a “sticky header” feature is not available.
A prototype uploaded to InVision Cloud can be opened in InVision mobile app to run on mobile. Only one prototype is allowed on a cloud with a free InVision account.
Data pulls real content from a range of sources and place it directly in your design.
Stock allows you to find and place high-resolution imagery from Getty and iStock to your design.
Once a prototype is uploaded to InVision Cloud, clicking on “+” icon allows you to invite a person to collaborate.
Axure has established its own unique place as a go to prototype tool to build a more robust, complex prototype with various interactions, not just screen-to-screen click throughs.
Many experienced UX designers still use Axure because you can do more, but the trend is more towards software programs with “connect screens with wires” interaction model, because that’s much faster to create simple prototypes.
A file needs to be saved to a cloud in order to run a prototype on Adobe XD mobile app.
An XD file saved on Adobe Cloud becomes accessible from Adobe XD mobile app. Font Awesome didn’t render.
Repeat Grid and voice interaction
Repeat Grid auto-copies what’s selected as you drag a handle. You can bulk-adjust margins too. It’s a smart productivity tool that works great when creating tables or lists.
Voice interaction capability is the most unique and advanced feature that Adobe XD has. Below you can see the voice prototype in action. Note that you need to hold down a screen while speaking up your voice command that you specified in Speech Playback.
To enable Coediting, you first need to save the document to the cloud. Once the document is saved to the cloud, Invite to Document icon gets activated. After clicking Invite to Document, enable Coediting, then send an invite.
Once fellow designers are added, you see them as color-coded avatars and bounding boxes.
InVision Studio can open Sketch file, or can take objects and symbols copy-&-pasted from Sketch, and can create a more sophisticated prototype via its timeline-based transition capability.
When opening Sketch files, there are a few things to keep in mind. Link layers in Edit timeline doesn’t support Sketch symbols currently. In order to achieve a smooth animation, a file may need to be optimized accordingly.
Both Mac & Windows
In order to publish more than one prototype to share online, you need subscription to InVision Cloud.
Best compatibility with Sketch
Transition adjustments via timeline
Sometimes buggy and sluggish
Cloud only allows one prototype for free
Sync layers does not work for Sketch symbols
Selecting a layer displays Interactions panel on the right.
Timer, one of triggers, allows certain interaction to happen automatically after a specified number of seconds.
Timeline allows sequencing multiple animations in a particular order to make the overall animation easier to understand.
Running a prototype locally, in the cloud, on mobile
Principle can import Sketch file directly, and can create a more sophisticated prototype.
Its animation is very smooth, with powerful auto-animate feature, which looks for same layer names between two screens.
Components and Drivers feature allow you to quickly create various micro-interactions.
However, there are a few things to keep in mind with auto-animate feature. It could automatically animate many unwanted elements in a screen depending on how layers are named between two screens. To avoid that, your may need to prepare a file in Sketch first by renaming all the layer names carefully.
Pricing: $129 (one time fee)
Free trial: 14 day
Auto-animate is very smooth
Easy to make micro-interactions with Drivers
Works very well with Sketch
Auto-animate sometimes creates unintended animations
Mobile app requires USB connection
No cloud service
Triggers, Timeline and velocity control
Auto option in Triggers works similar to Timer InVision Studio has, which allows things like a toast appears automatically after an action completes.
Timeline allows you to control duration, ease and sequence of certain animations, or freeze those.
Framer X is some of newer tools. You can copy & paste Sketch symbols and elements into Framer X artboard, but you cannot directly open Sketch file. Prototyping features for average users are fairly basic, and does not have auto-animate capability. But for code-savvy users, you can use code to do more advanced prototyping.
Figma is unique in a way that it was built primarily as a web application saving it’s files to the cloud by default, even in their desktop version. Figma can import Sketch file, but could take quite some time to complete the import. Prototyping feature is fairly basic.
Starter: Free for up to 2 Editors and 3 projects
Professional: $12 per editor/month billed annually or $15 month-to-month
Both Mac and Windows
Files are saved to the cloud by default
Free up to three projects, two editors (collaborators)
Well-designed user interface
Limited transition options
Cannot copy & paste objects from Sketch (import only)
Free version limited to 3 prototypes
Home screen, prototype mode, prototype panel
Figma has a home screen called Drafts that displays all of your projects. Files are saved to the cloud by default.
Figma has Design mode and Prototype mode, similar to Adobe XD.
Smart Animate was added in 2019 to catch up with the competition.
Running a prototype locally, in the cloud, on mobile
Collaboration — Share an individual file, create a Team
You can easily share your individual file with edit permission.
You can create a Team from Figma web UI then invite members. Team feature is free for up to 2 editors and 3 projects.
You can easily move your file from Drafts to a Project within a Team to collaborate.
Team feature is free for up to 2 editors and 3 projects. Beyond that, Figma offers 2 types of paid subscription plans for more robust feature supports, Professional with $12 per editor/month, or Organization with $45 per editor/month.
There are three options depending on what’s important to you.
1: Sketch + InVision Studio
Given the de facto standard status of Sketch, Sketch with InVision Studio to animate prototypes makes a good choice. InVision Studio is free, but sharing a prototype requires cloud upload, which is limited to 1 prototype in a free account. And Sketch is not free.
Figma is free and gaining tractions these days because of its strengths in cloud-based collaboration feature. If realtime collaboration is a high priority for you, Figma is the way to go.
3: Adobe XD
Currently, Adobe XD is the only tool that allows you to create voice interaction prototypes. XD also has Coediting for realtime collaboration. If you want to pursue voice interaction and collaboration is important for you, XD should be the choice, and it’s free.
Thank you for reading. Best wishes to your success!
I totally understand that you get nervous, and want to prepare as much as possible, when you have an upcoming UX job interview with a whiteboard challenge or an app critique.
Here are things that you might want to consider.
Try to put yourself in a user’s shoes and feel/experience/think the product from a user’s perspective, rather than trying to see things as a smart expert observing from an outside.
Try to see a forest first (big picture) rather than getting caught up in each tree (details)
Focus on the most important feature/task.
All of these will help you think about how you would use the product in your life in which context (where, when, how…etc)
The product could be the app your are asked to criticize during an app critique session, or the web application you are asked to design on a whiteboard.
It’s important to put the product in a context that it belongs when it is used. Once the product is put in a context, it will naturally reveal what works and what may not work, what you may want to improve/change, or what actions you may consider/etc.
In addition to these, here are some more general things that you should keep in mind.
Try to think out loud so that the interviewers understand your thought process.
Try to be as crisp and clear as possible when you speak out loud.
Hiring side typically wants to see your thought process, how you approach problems, how you articulate your ideas and communicate to others effectively.
They also want to see if you are a team player with a good positive energy, and a right fit for their team or not.
“App critique” or “white board challenge” (or whatever it is) are more or less just a vehicle to see how these aspects of a candidate come through.
Relax, be yourself, be friendly, be excited, be confident and enjoy the whole process as if you are working as part of the team with your interviewers.
Then you will be fine!
Even if you didn’t do well during your interview, going through an interview process to prepare for a whiteboard challenge or an app critique under pressure by themselves give you invaluable lessons.