Beginner UX: 5 tips on starting with Sketch, Adobe XD and Figma
If you are just learning UX as I am currently, there are things you may want to know before you fire up any of those applications and start designing your first prototypes.
You may have been waiting for this moment for a long time. You finished your user studies. You went through creating your personas, user journeys and empathy maps. You came up with some cool ideas during the ideation step. You’ve sketched your wireframes. And now you’re ready to finally fire up the prototyping tool of your choice and finaly turn your ideas into a working prototype.
There’s either immense joy and expectation or loathing, depending on your background and interests.
I’m an ex web developer with preference for researching and ideation rather than doing visual design. Fortunately, I think that lack of skill is a matter of recognizing the areas that need improvement and finding ways to improve. Nevertheless, trying to prototype with Adobe XD was the point I got stuck at for the first time in my UX workflow. Maybe my previous coding experience was getting in the way. I was sure I missed something important.
I had to actually take a step back, stop doing it for a while and instead turn to think about the ways I can learn all this.
After doing some research, I’ve come up with five tips that I would like my past self to learn before getting into visual design. I hope you will benefit from at least some of them. Anyway, here they are:
1. Sketch, Adobe XD and Figma are not for making “full app prototypes”
Let’s tackle the common beginner’s mistake first.
I’ve seen so many people on forums, StackExchange, Facebook groups trying to design an entire, “kinda working app” in Adobe XD, Sketch or Figma (including myself). Don’t do this, unless you are designing something simple and not planning on including lots of animations. This is especially the case with Adobe XD at this point in time.
Those tools are not designed for creating complex apps or complete websites. They are used for designing presentations of solutions for user journeys, interactions and animations. You use those apps to eventually show your team what you think should be turned into a product feature.
If you try to make an entire app, you will want to kill yourself as you will notice the number of artboards (screens) is growing exponentially (that’s number of routes squared!) with every clickable path you add.
If you want to make a working full app prototype with some fake, hard-coded data, you will have to actually code it. And that’s not your job.
2. Focus on telling a single story at a time
Yes, using those tools is much more related to storytelling and animation than “making a working prototype”.
Your deliverable is something that either tells a single story or allows someone to take a single path and tell you if they liked it or not. Journey map for one task is your scenario.
3. Study animation: keyframes, timing functions and principles of movement
Because more often than not, that’s what you will be doing: creating animations using keyframes.
It doesn’t matter if you are making a prototype for users to click through themselves or you are creating something they will just look at and provide feedback.
Your job here will be to design keyframes (each screen/artboard is one such keyframe) and connect them via timing functions (those are the “ease in”, “ease out”, “linear” etc.).
Medium has tons of articles on principles of animation in UX design. Be sure to search for them.
4. Look for UI kits
A UI kit is a file which contains all the types of UI components you will commonly use and often includes a number of complete example screens. Add some icons packs to it and you get a complete UI kit.
If you’re in web design, think of Bootstrap — it’s similar to some degree.
You can copy and paste those symbols and entire screens into your project and customise to fit your needs.
They save you plenty of time as you don’t have to recreate every component from scratch.
There’s plenty of them on the web and Adobe XD greets you with a splash screen which allows you to go to a specially set up page and download a couple good ones, including official UI kits from Apple and a Material Design kit.
Please mind though, some UI kits, especially the wireframes, can be pretty ugly.
Definitely be mindful when showing your prototypes to users during testing — users may focus on the ugliness of your wireframe or get distracted by the colors and typography if you go with placeholder colors and styles. Go for a toned down palette and put some effort in making the typography and layout to be at least decent.
Your users will usually have no idea that those are just wireframes or quick ideas you would like to test. Telling them it’s just a wireframe usually doesn’t work, because they have no idea what a wireframe is. They also don’t have the knowledge to fully understand what a prototype really is, so get anything that might interfere out of the user’s way and sight.
I prefer using UI kits which more closely mimic the real UI components and at least try to go for neutral colors instead of using shades of blue or whatever color your kit comes with. When wireframing, I tend to prefer pen and paper.
5. When testing a prototype with users, clearly show which routes are unavailable
When you create a single task user journey, there still might be a lot of UI components that would take the user off the path you would like them to take.
Use disabled state for UI components that lead away from your intended path and are unrelated to the feature you are testing, so that users will not try to click them and wonder why they are not working.
Remember that our working memory has a limited capacity. Some say it’s 7 items plus minus 2.
Whatever the number, think about this possibility:
- A person clicks through your prototype.
- They encounter a couple of buttons that seem active but they don’t work.
- They try to remember those so they can provide you with feedback.
- They have no idea it’s not important to you, but they will try to do their best and be thorough. They will try to remember this event.
- And because they got busy trying to remember those “broken buttons”, they might miss or forget about things that actually matter to you.
A good solution to this issue is as follows:
Grey out or otherwise clearly show disabled items as disabled. Users understand that. They’ve seen it many times before in their life. It’s quicker than any kind of explaining and doesn’t require users to second-guess.
Those are the things I missed while studying UX for the first time. My lack of experience made my start so much harder. Fortunately, I quickly managed to get back on track and put effort to fix my approach and assumptions.
Now I deeply enjoy designing and I’ve opened another opportunity to myself: learning visual design principles. Things like typography, white spaces, colours, principles of animation — which I always thought are not my strong points — are starting to become sooooo enjoyable!
On a side note, Adobe XD has a tutorial that shows you how to create an app prototype. It’s fun, but in my opinion it may mislead people into thinking that the tool is good for creating complex app prototypes. What do you think?
Anyway, have fun designing! And share your designs in the comments for some feedback! I will be happy to help!