In the home stretch for season 2, and we present our penultimate interview for the year as we sit down with Frank Romeu, a product designer at Hubspot, to take a look at the importance of UI/UX design tools in the process of making projectsfor the web. We’ll look at tools like Adobe XD, Figma, InVision, and others to help you understand their value and how to choose one that’s right for your process.

A comical take on UI vs UX comparing classic and modern ketchup bottles

Followup Resources

Research before Goals (2:53)

UI/UX Design Tools (4:12)

Transcript

The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.

Marino’s I stopped doing that? Is that tool time? Is that what that is

or what? No, it’s like a mixture of Tool Time and also Ned Flanders.

Oh yeah, I’m nothing like Ned Flanders. I am like the dude in the hat behind the fence. I wear plaid a lot. Yeah, I do have a hat. My hats chief said. That’s fine. Hey, folks, you’re listening to the drunken UX podcast. This is episode number 50. We’re going to be talking about UI and UX design tools, prototyping tools, wire framing tools, high fidelity wire framing tools, mock up tools, whatever you want to call them. That’s what we’re going to be going over. I am your host, Michael Fienen.

I’m your other host, Aaron nail. How you doing Michael?

I’m doing quite well this evening. You know who else is Doing well this evening archive folks over at New cloud, run by new cloud comm slash broken UX. Go check them out. If you’re looking for any kind of interactive mapping solutions for whether you got a college campus, a hospital, a city, whatever the case may be, they can help you out over there with illustration services, map systems, whatever.

And while you’re checking that out, you can check us out on Twitter and facebook.com. slash jocking Ux and instagram.com slash drunken UX podcast and also on drunk in UX comm slash slack. Flash flash flash flash. Flash slack.

Come to about 3% worried with how much you’re slurring already, so

it’s a lot of SS it

is. It’s not so many S’s. What are you drinking tonight, Aaron? Some Lagavulin. 16 you’re not are you? I really

am. Oh, yeah.

widget and I’ll send you a pic. That’s the same thing I’m drinking tonight. Night. We were matched parents We didn’t even plan it that way. It’s nice, isn’t it? That’s right. It’s perfect for Episode 50 the way Nick Offerman describes it is you know it’s like drinking a campfire.

Yeah, actually that’s a

very robust it’s it’s definitely like don’t start there. If you if you’re thinking about drinking scotch and you’re getting started, don’t start reliable and I’m just

I’ve heard it described as burnt bandaids.

I don’t know that I would go there with a smoked smoky smoky band. Ardbeg. Yeah, Lacroix. Yeah, because they’ve got a higher iodine content and that’s where you kind of get that in that flavor that you sort of associate additional quality luggable and has a much lower level of that so it tastes significantly better at least to me cuz I don’t like that flavor. I don’t like the medicine he flavor. scotch advice from your friend Mike. real fast. I want to give a shout out to Joel Goodman. If you don’t remember Joel, he was a guest of ours on episode number 20 when we were talking about starting up like small web shops and and how to run a tiny business for web developers. They just put out an article over at his site at bravery dot blog. The title of it’s called design research in higher ed. Yeah, you should be doing. So I just wanted to throw it out there. tell folks go check that out. It’s definitely worth a read, especially, you know, we just had Episode 42. We were talking about website redesigns, and some of the challenges that come with that and the process that goes into it. Plus Joel, Joel’s good angels, good people, they he’s done a lot of work in this space. We talked a lot about having goals before tools. But this extends that to say, you know, you should research before you develop your goals, or I think his phrase was data before goals. It’s just about understanding that process before you just jump into work and getting into things like why you see in RFPs and proposals the section for discovery, you know, discovery is research. You know, it’s somebody coming in and taking time to learn the things that you aren’t learning. So there’s a lot whether you run a company or work at a company or you’re helping inform a process that you can do to make sure that the work that you perform is successful if you get into that research early, and use that as the foundation for whether it’s the things you want to change. You know, the work that you want to get done the goals that you want to set. So go run by the bravery blog, its bravery dot blog. There’ll be a link in our show notes as well if you want to hunt it down that way or or check us out on Twitter, like Aaron was saying, you’ll be able to pick up that link there. Okay, so this evening, we are talking UI UX design tools and so we wanted to bring in somebody who could help us out with that and and talk you know intelligently about some of the differences and some of the nuance behind them. I’ve used a few Aaron pretends like he has used some of them So

I look whenever I see Adobe XD I like I always see x d is like the super big smiley emoticon I can’t not see it that

was intentional on their part that you know, that’s why it’s called marketing gotta

be

at so joining us this evening is the product design or a product designer from HubSpot. I’m sure they have many of those, quite frankly. He’s the creative director at vitalized design company. Frank romelu. Brian, how you doing, man? Not too bad. How are you guys doing today?

Good eight.

I’m I’m very cold. We got some snow yesterday. It was about 16 when I looked earlier, I got the fireplace. Go. I got my Lagavulin man. I’m set.

Was it the Was it the first snow over there?

Yeah, here. Yeah, the fact this is super cold for us right now. Like

it’s 17 here. I didn’t realize what was that cold. We’ve had we had snow. Wednesday. I think we got a dusting. We got it. I got a refresh of it last night

about two inches outside and just saying we just had our first destiny. As we speak, over here in the Boston area, Unknown Speaker Oh, excellent. Kansas

has weird weather. That’s all I can say it was 72 on Sunday, and then it dropped down to 16 yesterday. So lovely. Yeah, that’s, that’s Kansas weather. Okay, so talking UI UX design tools. Now first and foremost, I want to say it because I, I’m not gonna say UI UX every time I go to use this phrase throughout this episode.

Unique. It’s,

it’s a case of these things. And we’re going to talk about this, that phrase tends to get lumped in together. There are reasons that happens. No, they aren’t the same thing. UI is a distinct area. UX is a distinct area. But the tools that we’re going to be talking about do offer a lot of resources and features that facilitate one and or both of these in different combinations. And as a result, they tend to get used by teams that spread across the disciplines. So

my my favorite, like discerning image of the two is like you have a picture of like a sidewalk like with cement, no cement mile sidewalk. And then there’s like a passion path that goes through the grass on a diagonal. So UI is like the, the sidewalk and then you x is the little passion path that goes off. It’s not like this most strictest, perfect definition, but that’s like one way to kind of think about maybe a little bit of the difference.

I mean, that kind of also reminds me of and I don’t know, you know, it’s a it’s subject to debate but there’s another kind of like meme on the internet about UI design is your standard like Heinz glass, catch a bottle where the top is just like facing upward, but you where it is like the more practical plastic one where it’s kind of like upside down so to speak, and analysis on the bottom because nobody likes to have to, like shake your catch a bottle or anything like that, and they think experience of having like, you know, having your catcher like ready to go at a moment squeeze.

And I just I for some reason I don’t know why I do this to myself, I just googled UI versus UX design in Google’s image short search. And I found what you literally were just describing Frank, except that the the, the upside down plastic ketchup bottle is basically pooping ketchup on to the table top. So I am 100% putting that in the show notes now. valuable content, go for it. Holy Macaroni Grill. Okay, so I just wanted to kind of caveat that though, because I don’t want somebody yelling like, you used you I wrong. I know. It’s just going to be a shortcut for the sake of the episode.

This it’s nuanced. It’s different. Yeah, it’s

definitely nuanced. And I think in this particular cases, enough of an overlap that can be forgiven, to an extent. When we talk about UI UX, design tools. What are we talking about? Over the last? I don’t know. Would you say probably five? You think it’s even five years? I was gonna say like three or four? Oh, yeah. Five ish. Five getting towards five. You started

I remember using balsamic about fiber. Yeah, I’m gonna

but I don’t know how new a woman to talk about that in a second. You’re going to join me? Yeah, alright, so let’s we’ll round it up. Then we’ll say five years. These tools have started to enter the common lexicon for pretty much any designer anywhere at this point. And these are tools like envision or sketch, which are relatively new tools. InVision launched in 2011 sketch launched right before that in 2010 divisions cool, but you know, it’s 2019. So when we say Oh, it’s been five years, these tools have been out longer than that. balsamic came out in 2008. So it’s been out for 11 years, and we’ve got a couple newer options now that folks are looking at like and these are tools like or Adobe XD

balsamic was written in Adobe AIR. Yeah, that’s right. It’s a throwback. Yeah. I

haven’t thought about that in a long time. Yeah, Adobe AIR that was gonna be the next big app framework, which is tops.

If I remember correctly there, Adobe AIR is basically self contained flash, isn’t it?

It’s something along those lines. Yeah. So like they were trying to containerize flash to make it say right. I think it was that last dying gasp of flash to be like, I’m still relevant. You can trust me. Just put a wall around me and I can’t hurt you. So yeah, so figment of XD came out in 2016. So their new players three years ago. Prior to all of this, doing wireframing doing you know, what was called paper prototyping, you know, we would use whatever was handy. Some people because a lot of this originates in the design sphere. You would see a lot of it done in Illustrator or even Photoshop. I remember playing like column templates for Photoshop that will let you go in and they would have like sticker layers and stuff you could pull from the start laying stuff out.

He’s the guide. So sure, yeah, like the column layouts and everything. Yeah, slice it up. Make slices.

Remember that prior to that word? Have you ever seen prototypes done in Word? content? Yeah. I, I’ve worked with folks back, you know, going back 2006 2007 people were doing it in words and they’re like a word front page pipeline or something like you could export as a web page or so. Maybe but screw that. This was just like people using the shapes tools.

And that’s,

yeah, think of suppress those memories. It kind of a kind of also reminds me I know there’s a there’s like a very dedicated user base of folks who use like either PowerPoint or Apple keynote for kind of like designing a prototype because of those kind of built in inherent like animation and transition tools.

Yeah, you could use it till it yet do like a button click. So you click the button and it transitions to the next page. Yeah.

I have seen that. PowerPoints nice. I’ve used PowerPoint for like, er diagrams and stuff. I mean, it’s, or I’ve used Google Slides rather. I mean, it’s nice to have something we can just drag and drop everything all over the screen where

Yeah, and I mean, before all of that pen and paper. Yeah, I mean, to this day, it’s still my preference. Yeah, there’s still a lot to be said, for getting up and grabbing a big old pad of paper or I’ve got in my office here. I’ve mounted a big whiteboard to my right so that when I need to just sit down and think about something in space, that flow of hand to anything is really nice, because it’s free, right? You’re not limited by anything. You’re not concerned with transitions or padding or anything. You just wanted to lay out

I find that it’s easier for me to like, create whatever it is I’m imagining if I’m using my hand to, like, move it on the paper than it is to do it with a mouse in the same way that like, I can type my thoughts more easily with my fingers and I can have my thumbs. Yes. Is that just me? You know, that’s

totally just you. That’s, that’s

I mean, I think it’s it’s natural, like we you know, we grew up learning how to draw and how to write and these are some of the first things that we do as you know, as humans. So I think it’s, it’s just a testament to how fundamental something like pen and paper or paper and Sharpies or whatever it may be as like that starting point for just getting the ideas out there, right.

Yeah, I’m going to show this to the guys on my end, but of course you can’t see my camera, but I’ve got a little notebook in front of me right now that I’ve been working on a project project and like the page one is me sketching nice ink on paper little interface, but This is but this is the way we think, right? Because you can’t just show up to an empty plot of land and make a house, you know, you have blueprints, you have design ideas, you know, you go through all kinds of iterations on everything from color to carpet and all of this. So, this is our industry’s way of saying, hey, let’s not just start making something and hope the end result works. We want to start building something, or you know, outline something that then will inform that process. I personally have experience with Adobe XD limited. I’m like, I’m not deep into it, but I can use it. I generally like it. I think it’s fairly effective. There’s some things that I think would make it easier, but that’s my stuff. I am with you, Aaron. I started using balsamiq right around probably, oh 809 it was one of the first wireframing tools I used and I used it specifically because I liked how a And we’ll talk about some of this stuff later. But it was really easy to get into. And the the styling of it made it easy to create things like a show to people without them worrying about like how really was.

I like I didn’t like her for that. I used it for probably six months, and then decided that I was just going to go back to using a legal pad and pen because I could do things faster.

And I know Frank, you’ve got experience in several of these as well.

Yeah, so I mean, start like some of my background was in graphic design. So being very familiar with Adobe tools like Illustrator and Photoshop, when I first started diving into the world of interface design, I would use those as my tools but part of that was, you know, Illustrator and Photoshop specifically, these are massive, monumental tools with a whole, you know, whole mega set of features that maybe aren’t necessarily needed for kind of just iterated on some designs for an interface or what have you. So the speediness of them would kind of be interfered by the by the tools. Adobe definitely, you know, they did it right by kind of diving into the sphere and really focusing on XD and I know their beta was more or less than 2016 I think they had like a formal release towards the end of 2017. But they really focused on providing a similar experience a lot of the same shortcuts that like Adobe power users would be good with and really making this fast quit like really decreasing the time from like thought thought to design I don’t know what the exact phrasing that they use but makes it really quick to iterate on as far as sketching and vision that’s been one of my go tues as well, professionally, a lot of they’re very enterprise friendly. So using sketch for designing the actual art boards and layouts and what have you for different UI designs and then stringing them together in an envision

these are the next The names are easy, InVision sketchball, Sonic figma, XD, there are many, many others, it’s worth stopping for just a second to talk about what exactly they are. And I’m sure it’s for me like this entire process, like the things that you create in these tools go by a whole lot of different names, whether that’s wireframes, or prototypes, or mock ups or high fidelity wireframes, you’ll hear sometimes, these are all tools to design things. Some of them are better than others, depending on the route you’re going in terms of like how finished a thing you’re going to design. But the idea is to kind of make something that establishes what I would say is the blueprint for then what you’re going to build. And maybe that’s super detailed, maybe it’s super engaging and everything and you’ve already done, user flows and interactions and all that and, or maybe it’s just the skeleton, the outline to kind of show here’s how we’re going to use space or whatever but that’s at their Heart. That’s kind of what these tools are meant to sort of help you with. Is that a fair way for me to put that Frank?

I’d say so, I mean, granted, like a lot of these different outputs, you know, can exist at different points in the standard, like design and development process. But these tools do facilitate the creation of these outputs, you know, by inherently just based on the functionality that’s baked into them,

they are very good across the board, like any of these tools you pick up can pretty much answer the form question like, they can make a thing they can, you know, give you the shape of something, some of them in different ways, you know, XD does it and vision does it are good at it will also illustrating flow. So being able you use the phrase Frank and artboard. And those artboards are generally used to signify like different states of things. And so you can go from board to board to show with You click a button, here’s the thing that happens, here’s the pop up you get. This is where we get into why we say UI UX design tools, right? This is all about UI is the form. And UX is the function kind of piece. So they’re great at building out how it should look how it’ll layout, how elements will bump up against each other. But these tools also help you facilitate how it will work in that space or what will happen in certain use cases. And that can be incredibly powerful for a team. How many Frank because obviously, you know HubSpot is a huge company, right? Like in in your team, the folks that you work with fairly directly how big Would you say that is

definitely as like as teams get bigger, being able to, to iterate and like design something and be able to communicate the exact intention of why, what it is that you’re trying to build and what is that functional experience and what ultimate Someone out in the wild is going to be using is definitely like a strength of some of these tools and some more than others. Sure. Like, I know this one thing that Adobe XD has been investing heavily and is on these kind of animation, you know, tools and functionality for prototypes and being able to simulate the experience that someone’s going to have with it to the point that now they you know, they’ve integrated a couple months, almost a year ago, the ability to simulate voice interactions. So if I have if I’m looking at like one screen, what happens if I say a certain word or a certain phrase, and what does that what does that transition into? And I I think they’re one of the only ones who do that. But, you know, the different tools offer different degrees of functionality to help people really just communicate and convey that intention.

I think one thing that I would say, of all the different tools is the when you’re when you’re the developer working directly with the client, like I remember I did this lot in higher ed pen and paper is fine, because I’m talking directly with the stakeholder. So like, I know what my notes mean. But at my last job, we use envision, because we had a dedicated like product design team. And so when they did a handoff, it would have, you know, the hex codes of all the colors that had the exact pixel dimensions, and had the assets bundled in, everything was all right there. And they were very intentional about like, Okay, this needs to be this color. This needs to be this fun, this needs to be this image, etc. So that was really useful. I like it would be a lot harder if they gave me like, you know, some chicken scratch like I would make. Um, so I think as your team gets bigger and as you need more specificity, like, that’s where those bigger tools become more useful that

you need something coalified right to be able to hand

over the Yeah, yeah, and definitely like InVision has their inspector tool and like XD has, I don’t know if they call it in spite, I think they just call them like developer tools or something like that, but essentially communicating that same idea of like, what are the CSS? You know, components and parameters? And what are the dimensions that I need to know for color, spacing, size, all that good stuff.

There’s an article and if you’re interested in just the general discussion of, you know, UI vs UX is an article over at career foundry, you can go pick up we’ll have that linked in the show notes that digs into that at length. It’s like a 16 minute article. So when we then start thinking about Okay, so there’s all these tools, what, which one do I use? You know, why would I pick, you know, InVision over XD or balsamic? You know, how, how do I even know where to start? And I think that that’s a challenge, much like when I sit down and I think well, do I use view or do I use Angular? You know, do I use PHP or react or, you know, there’s all of these different things that you have to consider when you’re building something. I think the first and foremost the very first piece of advice I’m going to give you is As far as like the big ones, so these big five that we throw the names around envision sketch balsamic figma. XD like, I feel like in general, you can’t go too wrong with most of them for sure. Like, in a broad sense, you know, they’re all good tools they’ve all x d really has come a long way. Oh, yeah. Words. Yeah, refining their experience. They, I think Adobe had a fire lit under them when they saw like the money and vision. And they said, No, we want a piece of that pie. And of course, they have the power of Creative Cloud to leverage their so they really put some effort into that. But all of these tools are good. Some of them are good in different ways.

Like if the tools are effectively more or less interchangeable. Would you say that the the discretion comes in how you use them, like there’s a right and wrong way or a right and wrong purpose for using the tools. Um, I mean,

potentially the way I look at it There’s, there’s so many different options that you can come at it from different views. So like at one point, if you are really well versed in all the different tools and you know exactly what you want to get out of them, then it becomes pretty easy to know, like, Okay, well this is a certain feature and functionality that I want or need. And so I’ll just go with that. And that’s what makes sense for my team. But if you don’t, then it comes down to a number of other factors, like, you know, price is certainly one of them, the size of your team, you know, the, the, the platform that it’s available on, so like, for example, sketches and a Mac only application, whereas I know like envision and XD they do have windows, your Windows and Mac versions available. So there’s, you know, there’s a number of different lenses that you can look at it to find what ultimately makes the most sense.

Go over if you want to find an interesting tool, it’ll be linked in the show notes. It’s over on prototyper and they put together a little it’s a little chart with a bunch of I think I counted almost 30 different interaction design tools, and you can filter it and change the way it’s charted. So you can you need or affordability you can look at, you know, what do you need? Are you looking for high fidelity? Or are you looking for you know, wireframing Are you looking for something that’s free or you’re looking for something that you can just pay for once? And it lets you chart these features against each other, which is just it’s a very interesting way I I’ll tell you straight up I don’t know how old this is. I don’t know. It’s like I had no idea the Sony tool. Yeah, that’s the same thing I sound like ever heard. There are a lot of these things that I have never touched in my life.

What two dozen here is a lot? Oh, Marvel Marvel’s the one that I use that my last Marvel that’s got the hand off mode, everything. Yeah.

I’ll talk a little bit about my experience here. And then and same. Frank and Aaron, you guys anything you want to throw in on this. I started with ball songs. MC a, it was super easy, balsamic is a very lightweight tool to get into there, the learning curve on it is very shallow. As a consequence, it’s not super detailed, you’re not going to get a huge amount of interaction stuff out of it or anything. It is what I would call low fidelity as it’s got a distinct art style included with it, which is like a, you know, a fake, you know, chicken scratch.

It’s all shades of grey. And then like they have what like, it’s like a, like a light vermilion red X on color they can use for certain things and the kind of call attention to them.

The value for me was in that low fidelity because like, for me, I was an army of one when I was using this, I was doing all the web stuff by myself. And when I would go to talk to people about something a feature or something we were making for the website. It often made a lot of sense for me to show them something like this because I didn’t have to worry about them looking at it and thinking, because one of the challenges that you’re going to run into with the higher fidelity options is, sometimes they’ll show it to a stakeholder and they’ll think you’re done. Mm hmm. And that can invite a certain type of criticism or lack of criticism. Yep. With it, that is not always beneficial. So for me, that low fidelity concept worked really well, just to get spatial relationship stacks, that’s often how I would do it is I would go from something very rough, even hand drawn. If I went into balsamic, I get something similar just to get my general layout. And then I would go into like, you know, an interactive prototype type system or, you know, spin up something like foundation or bootstrap, to kind of start doing some prototyping in the browser at that point, but this would get me started, at least for that.

If you don’t do something absolutely bare bones. Then the stakeholder that you’re talking to will 100% be like, Oh, I don’t like this color though. Or they’ll Focus on like the presentation where a non UI were. So that was definitely one thing is great about basaltic was it was like really obvious, like, Oh, no, this is not what the site will look like.

Yeah, and I think that’s something that as we were talking about the different outputs of these tools, like really low fidelity, just kind of like basic, rudimentary shapes and wireframes that kind of thing is great to like, solicit honest feedback, since people will think like, Oh, well, this is rough. So it’s still, you know, it’s still okay to give my input, while also not being distracting to the point of like, having all these colors and these different type faces that, you know, someone like a stakeholder anyone really can look at and be like, Well, you know, they can question the the value of it when really we want to focus on does everything look like it should like it should and can this work and should this work the way that it does and what Where are the gaps? Like where does this break like more functional?

Yeah, there’s also XD I have experience with XD one of the biggest selling points for me on Adobe XD is simply the fact that it’s free. That’s a huge I think selling point, especially for freelancers or somebody you know, in school, free is fantastic. balsamic is not free sketches and free InVision isn’t free thigma I think has a free option. And I say that envision and sketch may have free options that have, you know, sort of locked down option. Adobe XD though, is like free as in beer. It’s as long as you are paying for Adobe cloud already.

Oh, okay.

It’s it’s included. So like if you get the Photoshop plan, then you have Adobe XD if you’ve got the photography plan that you’ve got XD now you do have to be paying for Creative Cloud plan otherwise, but at this point, that’s such a common thing for if you do any kind of design already, that it’s highly accessible from a tool standpoint, and it means you’re getting a an incredibly high quality tool. For nothing, to me, that’s a big deal. Like that’s, I always say Adobe said, we’re we want to eat the lunch of our competitors and they went at it in a major way. We brought this up on a real time over the episode last year, but, man, and it’s, I like it. I’ve been using it as I mentioned, I one thing I didn’t like about it is the way it handles assets. So if you’re trying to like import, for instance, material design, if you’re doing something with the material design, you can go download a material design design kit, but just the way that process works is kind of strange, and I don’t fully understand the x I just haven’t used it enough yet. But it doesn’t really open it like its assets in your existing project. It’s just another project and you copy and paste out or something like but it works. It gets it absolutely gets the job done, which is probably the most important part of that.

Definitely. And I think that that’s something that Adobe XD has been trying to come up on. is like really investing in this idea of assets and components and like shared libraries and pattern libraries, design systems, that kind of thing. And I think they’re making headway into that, you know, into that space. You know, and I could be I could be mistaken. But like, it wasn’t until very recently that they’ve made some, some meaningful and valuable updates for at least in that regard. And I mean, credit to them, like they put out updates almost monthly, and they’re constantly constantly trying to improve it. And like just, I think just this month, they released a new update for different components states for different like, interface elements. So if I have like a button, I can save in one document, like the active version, what the hover state would look like, or what the disabled state and so they’re really, they’re really plugging along for for kind of that ecosystem, kind of

the thing that I think about when I think about balsamiq, and XD Now both of them do have cloud components, which is to say, you can make something and store it out there where somebody can go get it, but I would not want someone else’s on somebody else’s. I would not say that that is their strength. Personally now, this may be coming from a place like I haven’t used balsamic in a couple years. XD I said my experience with it is limited but you know I’ve used a little bit. I feel like they are certainly better for somebody who is maybe working on their own or isn’t trying to collaborate heavily like with other designers. This is where I think figma sketch and envision really step up their approach, especially at the enterprise level, to provide like a really collaborative environment and to create things that are meant to persist like great artifacts of the work. So that’s whether that’s something that’s going to go into a pattern library or design system, something to go into a style guide that people will access. those tools feel like they really have tried to get that part of the process on lock,

for sure. And I mean, I feel like that’s one of figmas strongest kind of value propositions like I view them, like the Google Docs of designing. Like their collaborative tools are arguably some of the best sketching and vision are good in that regard. I think, you know, envision where if you create a design for an interface and sketch and you export it out to envision to string a number of these different screens together. Like their collaborative tools for commenting and tagging people into them in soliciting and receiving feedback is super solid. But what I’ll credit InVision to the most is their free hand tools, which is essentially pen and paper. It’s just sketching and drawing really low fidelity, but that’s a space where anybody can you know, anybody on your team can all actively work on together and like, that’s, you know, in some of my times, that’s been some of the best experience. instance I’ve had is actively just being in there working with other designers, other engineers, and just everyone drawing and commenting and all in the same space live in real time. So like envision and figma in my book are probably the best for that. And

thigma for what it’s worth does have a free plan. If you’re interested in trying that out, or seeing you know what you can get out of it. It’s pretty limited. But you do get three projects out of it. They’ll let you have a couple editors in there. It doesn’t have like a ton of like, shareable stuff or anything. It’s definitely not good for a company who needs to share across the bunch of people. But to try it out. Or if you’re a solo designer, that’s trying to get into it. That’s definitely and I’m going to assume that that’s probably true with InVision and sketch as well. But sketches, big thing and Frank, you touched on this is great. If you use the back. Yeah, like, like that’s the sort of the catch there is that schedule as far as I know it doesn’t have a PC component to it. Yet, what else? Is there anything else that stands out to Aaron, your Frank as far as like, why you might go after one of these tools versus another? I mean, I know sketch.

One of the things that’s like built sketches reputation is they’re kind of like their third party integrations. And there are plugins for using sketch and that’s something that XD recently kind of jumped into the fray and I think they’re doing well and but like, sketch has a huge, huge library of just third party plugins to do a number of different things, whether that’s, you know, dummy text or name generators, all kinds of random things that you might want for your designs. And then as another plug for x d, like their animation tools are superb. So although I use sketching and vision, primarily within my workplace, I definitely still default to x d if I need to communicate any kinds of like animations or visuals in that in that regard,

as as a developer I mean, like, I’m not ignorant on design, but I don’t feel that I have honed the skills sufficiently to make educated decisions with the granularity that a tool like, envision, or maybe even XD would offer. And so something like balsamic were similar thing, PowerPoint or slides or just pen and paper is going to be what I’m probably going to Yes. And that’s fair. Because like, because that’s the level that like I’m used to working at. And I would rather just, I would rather not make a decision about things like color or shape or other things, because I don’t care that someone else can make that who’s better at that stuff. Yeah. So the tool that I want is the one that’s going to be the closest to that level of fidelity for me.

And there is also a tool similar to that chart that we mentioned from prototyper. It’s over at UX tools. CO and again, link in the show notes. That gives a little bit of a like a side by side out Apples to Apples feature comparison across a lot of these. And that might also be something that will be useful to you if you’re looking into these different tools or, you know, trying to figure out, you know, well is, you know, does it have cloud options? Does it have Windows support, you know, how do the prices compare? So there’s a lot of those but also the same thing like you guys have mentioned, are there collaboration tools are there handoff features and things like that as well. So they’ve got they’ve got quite a few things in there and they mark off you know, where some of these tools kind of shine where they compete with each other and also like how they’re used like what their usage numbers are. So that may be another good place to start if you need to look at like what you know, what is it that’s going to be right for me? For these five, balsamic doesn’t count. So these four because balsamic is low phi already, but if you are doing something where say you use foundation or you use Material Design Are you using like an established design system, of some kind Maybe you’re using the the US government design standard system go out and research whether or not the tool already has like built in support for that. Because that could make a difference as well if you’re having to reproduce that look and feel or like with XD one thing that’s nice about XD is you can just go to Adobe’s website and they’ve got a gallery of all of these different design pattern libraries, you download the one you need, and you could open it up to bring all of their artifacts and patterns right into your, your design already. Also on output, we mentioned output right earlier, and most of them will do things like a PDF, or an image balsamic, that’s pretty much what they deal in exclusively. But you may be thinking bigger than that. And this is Frank, you mentioned with figma. You know, one of figmas big strengths is like taking all of these things and I like this phrase, you know, artifacts, the things that you create, basically and are designed to give life to those options beyond just the thing you’re building. So if you work at a company, and yeah, you’re going to have buttons in this particular application, but you’re going to be building something in a month, that’s also going to need buttons. Some of these tools can help with establishing that baseline pattern library and save it and make it accessible so that in your next project, you can import that in. That’s one thing I know figmas. Like, they’ve really been kind of driving home with that. And that can be something to really look at. I want to talk just for a second about, like, where these all fit in, because it is design and we’d normally think well, you design it, then you go build it, which is a very waterfall way of thinking about it and is a very bad way of thinking about it, quite frankly. Yep. I mean, one of the things that we always talk about iteration development has this word. We love to use incorrectly. All the called agile. And because it’s all about iteration, right? It’s all about doing the thing, and then doing the thing a little differently or a little better, or get a little newer,

well, doing it in response to stakeholder feedback. That’s, that’s the important part. But I think often it gets lower

always talking iteration. But UX works is this the exact same way. One of the things that I like to think about is, I think balsamic has a set place fairly early in the process. But a tool like figma its role is actually throughout your design process and throughout your iteration process because it’s meant to help you start, but it’s also meant to help you refine and it’s meant to help you improve. Were Frank when you guys are, you know, working on the next new feature that you’ve got. How often do you find yourself referring back to these tools, while something is being built? All the time. I mean, I feel like I use them all throughout short of, let’s say if, if there’s a particular problem that, you know, the business wants us to solve, and we do our fair amount of research and you know, speaking to users and getting a sense of like, are we solving the right problem with whatever it is that we’re going to design and build. But once we understand that space, then I’d say is where I start to live in the tool kind of in and out. So as I’m, you know, doing early sketches that are super low fidelity, as I’m putting together wireframes that are slightly higher fidelity and soliciting feedback and, you know, understanding the the feasibility of these designs, and even to the point where once they are high fidelity, and we’re working on that handoff, and that transition to engineers and to developers, constantly, there’s going to be times where questions may come up, and we need to go back to the tool to either refer to the designs or even make adjustments as we run into constraints and problems because naturally, you’re not going to be able to think of every single you know, edge case and every single potential That that can happen or any problem or challenge that you’re going to run into. So these tools really come in handy to have something to refer back to and to allow you to make adjustments at the speed of thought, as you needed. And as you’re working with, with your engineers, and it’s a constant iterative cycle, where you’re going back and forth,

there’s a absolutely worthless mnemonic device comes from an article over at uX planet.org. Again, linked in the show notes. They did not actually have this as a mnemonic device, but it was there. And so I said it, and it’s called, urs die, understand research, sketch, design, implement and evaluate. And so it’s this. It’s an iterative process of coming up with what you need figuring out, what do you need to get there, figuring out what does that thing look like? figuring out how is it going to actually work in space, then figuring out didn’t do the thing that I set out in the first step and then starting all that over again. And this is where these tools start to come into play, because you’re going to keep adjusting and changing because you do walk through these steps you start with, you know, the most basic ideas of what it is you want something to look like, even as a designer. It doesn’t matter if you’re not a developer, or you’re not a UX designer or UI designer, because these things do factor into the work that you do. And understanding this process is what part of what makes them useful. It also, I think, more than anything, establishes your baseline for any and all testing, the importance that user testing has on everything from design, to content to colors to anything. And so by having some of these tools in place, it actually allows you to do tests more frequently and earlier in the process because you’ll have something somebody can look at very early. That to me is part of what makes all of this with its weight in gold. We can say, hey, let’s go build a search. And here’s our, we’re going to slap a forum up there. And we’re going to slap some results down below it and all of this, and we’re just going to make it. But that doesn’t mean you’ve made something useful doesn’t mean you’ve made something intuitive.

If I had to condense Krug’s body of work down into one sentence, it would be test early and often.

it you know, it ultimately comes down to just like you have if you’re designing and building products for people, like you need to get that validation and feedback and whether it’s early in the process with wireframes, and something low fidelity just to get out, like, Oh, is this usable, or to the point where it’s even higher fidelity and maybe even a fully functional prototype? And you could still try to find those gaps and understanding because more often than not, we’re, we tend to be wrong in our assumptions about human behavior.

Yeah, and that’s what it is and why like if you think about this, if you want to put this into like another universe, so to speak, If you’ve ever heard about like doing audience tests with early movies, movies do this all the time and they don’t have a finished movie when they do these screenings. This is before the movie comes out to figure out how it’s doing. And so they frequently go into these sessions without scores composed for it without visual effects finished. You know, sometimes without shots even completed, like they will have a card holder or placeholders in place of dialogue and stuff. But though, it’s with the whole goal of getting feedback from the audience to figure out are the beats right?

I just like imagining like a scene and it’s like, the to the good guy, the bad guy running at each other and then it’s just the black screen of white text says, cool fight scene that is

that is very silent.

That is precisely the way sometimes that goes down. This is the the web development version of that. You take that balsamiq lo fi super sketchy looking prototype to figure out, hey, if I asked you, where do your eyes go, when I’d say search for something, and you’re like, Oh, my goes to the search box, you know, or Oh, it goes to the thing that you have labeled giant ad, you know, like something like that. So, having this process lets you do that you can start early then as you add fidelity to it as you add details as you add interactivity. You can continue that process and ask more detailed questions, more specific questions, you can give them goals to accomplish.

I did, I did UX testing one time, or rather I did usability testing by drawing the website on paper with pen perfect and then having like 10 or 20 different pages of this and then just putting it in front of someone and then like swapping them out. It works. I know.

Yeah, paper prototyping is a real thing.

Yeah, you can get you like legitimately useful feedback just even doing that much. So

let’s so the let’s take this process, right, we’re, as we talked about that iterative process. The whole point of this is that you design something that then gets actually built into a tool. And just to be clear, none of this D values, like interactive prototyping, what we think of as I’m going to go in, and very quickly write some HTML, I’m going to throw a foundation up. So we can just do buttons and forms and you know, a content section and we’re going to throw up, you know, Bill Murray images and all of that, like that. You can still do all that like that kind of interactive prototyping is also just as valid. It’s just a that’s generally free and just something you can do. It’s not a tool, so we didn’t talk about it. But it is still important. And one thing and this goes back To point four, it goes back 2.5 the way we consider these tools, and figure out which one is right for us sometimes can be a matter of how does it output stuff so that the developer can then take it and go build those things. So, like you’d mentioned, Frank, right, some of these, some of these tools will give you an inspector so that you can click that button and get the exact amount of padding that’s there. Because I mean, I can’t tell you the number of times I’ve had to go into Photoshop files with the measuring tool to figure out the scales that people yeah, using on different things.

I think it gets back to that thing I mentioned earlier about specificity. You know, when I, if I’m doing a paper pen thing, there’s no specificity there. It’s like this page has a button, it’s on the right side. And that’s pretty much all I need to know. But like if it’s like a really, like if you’re doing like a really well composed site, with fancy animations, I’m like, pixel perfect placement. Everything else. You gotta have that granularity.

Yeah. And I mean, you mentioned Aaron, you know, like when it comes to animations, and I feel like I’m shutting them out a lot, I promise I’m not paid by Adobe. But one of the things that I do appreciate and why I go to SD for animations is because when you string together a number of different, like screens for a prototype, and you have these complex animations, you can actually preview and record it as a video. And so I can give these videos to you know, mp4, I think, to engineers to like really convey All right, this is the expectation of like the speed and the duration of some of these, like micro animations and it like that level of granularity really comes in handy. And you know, each tool does their own thing and that with that kind of specificity, but it’s us developers love spec though.

We love knowing exactly what you want. There are so many times in design, especially where you’re handed something and every intent is not always there, you know, if there’s white space around something, you can’t always be certain if that’s a design decision, or just a consequence of the space that was available on the page, so to speak, being able to look at some of these tools and see those refined points of information can really help making make it easier on the developer. I also think, as a consequence, using these tools makes designers better. Yeah. You know, I remember for years, you could hire an outside design firm. That’s all they did. They didn’t do development, they only did design and they would send you your Photoshop files and be like, Here you go, here’s your website theme. And you would look at it and be like, I can’t build this. At least, you know, 1015 years ago with, you know, the CSS we had and things like that, like there was just, they would layer things or they would do drop shadows. And so, these kind of tools, give I think, develop our designers that context of development without asking them to be a developer. And this is part of cross pollination on teams. It’s why it’s important to know how marketing teams talk. It’s why it’s important to know how DevOps teams talk. You don’t have to be fluent. But I think the baseline understanding is incredibly powerful to making a team work really well together, making it developers, you know, somebody who can read a design just as much as a designer who can build something that can be coated easily. Or one of my favorites is like the variation on patterns. One button is 10 pixels tall and other buttons 12 pixels tall, another one’s 20 pixels tall, but has bold text inside of it. And it’s like there are variations on patterns, but it’s not made clear if it’s intentional, especially when it’s minor 10 pixels 12 pixels. These kinds Tools, I think help answer those exact questions and keep everybody kind of on that same page.

Yeah, and I mean, I think that’s, you know, like these tools helping to make designers better and like making that that transition from design to development better and easier as we think about these tools and how they facilitate the idea of pattern libraries and design systems. And that’s an entire other conversation as far as you know, like the value of these kinds of things and design systems, but it’s so easy to design something and like, duplicate a number of our boards or your screens and have you make changes to your buttons. And now all of a sudden, you know, next thing you know, you have 10 different shades of grey or you know, however many numbers of buttons and these kinds of like design systems allow you to save the time that you have not only make the work and make it easier for the developers to understand what your intention is and what the ultimate source of truth is, but really allow you to save time by Creating one component with certain number of variations and just keep that consistent. If I make a change to like the the main kind of source file, then that’ll be updated across all all the other uses of that button. So like that’s something else that definitely helps make designers and developers better and that working relationship better. And the last

I think big value add there is those kinds of things that kind of output when it comes to getting a third parties involved in your work. Because whether you’re a freelancer or you work in a company, inevitably you’re going to work with somebody else. And so having something that you can hand off and say, here’s, here’s our design system, here’s our pattern library, here’s whatever it is that you’re after, that makes, that gets them up to speed, so much more. So much more quickly, so much more fastly much quicker. There we go. I got there. Much, much quicker. Okay, final question. Your money’s on the table. You can buy exactly one of these tools for the rest of your life and it’s the one you have to use. Which one is it? Aaron? What?

That’s like a desert island question. But with UX design,

UX design tool, are you gonna buy

I would pick balsamic, but inside of balsamic there would be a set of matches. Okay,

that’s a fair, fair answer. Ryan, what’s your money?

I mean, pretty predictable. But I’m gonna say x d

60. I, I’m going to agree with Frank, I’m gonna, I’m gonna put my no money behind XD folks, let us know what your application of choices what your experience has been Have you use these are using one of the, you know, 20 others that are out there and you find one of them to be particularly useful. Let us know we’d love to hear and know what the pros and cons are. Or if you think, you know, we weren’t fair to any of these. I feel like we were pretty nice to all of them. Oh, so sorry, I don’t none of us apparently use sketch. So there wasn’t a whole lot to talk about there. Except that it’s for max. I don’t have a man But that is a fair criticism unto itself, folks. Stay tuned. We’ll be back in just a minute. And we’ll talk to Frank and we’ll talk about the rest of our season. The drunken UX podcast is brought to you by our friends at New cloud. New cloud is an industry leading interactive map provider who has been building location based solutions for organizations for a decade. Are you trying to find a simple solution to provide your users with an interactive map of your school city or business? Well, new clouds interactive map platform gives you the power to make and edit a custom interactive map in just minutes. They have a team of professional cartographers who specialize in map illustrations of many different styles and are ready to design and artistic rendering to fit your exact needs. One map serves all of your users devices with responsive maps that are designed to scale and blend in seamlessly with your existing website to request a demonstration or to view portfolio, visit them online at New cloud.com slash drunken UX that’s in you cloud.com slash drunken UX. Frank, thanks for taking the time tonight to sit down with us. We appreciate you giving us a little chunk of your evening to talk about these tools. I hope that everybody found it useful. And that you’ve learned a little bit and that you’ll go out there and kind of do some research of your own. But Frank, the floor is yours. The microphone is in front of you take a couple minutes tell everybody where they can find you. Where they can interact with you anything you got going on or anything you want them want them to know.

For sure. And I mean, first off, thanks, you know, thanks, Michael and Aaron for having me on the show, especially for for what I believe is Episode 50, which was you know, kind of a big deal. And I remember following the show, especially in its in its early stages, so it’s kind of exciting to be on here.

Crazy.

If, if I may, if I may add. For your listeners. I think one thing I would just love to call out there’s all these kinds of tools, but also Remember, the tool doesn’t make the designer the designer makes the tools you can make any one of these tools or even pen and paper work just fine what’s best for you to reaffirm Michael’s message and make it happen? As far as where, where you can find me I’m on LinkedIn, Frank Romeo, aro n EU is my last name. on medium, I will occasionally post some articles underscore ROME view X was like my last name x is kind of cute, you know, whatever. And then on Instagram, so I do, as Michael mentioned earlier, and creative director of design company finalized design company, and in our Instagram is finalized design, we’ve focused on a number of different like design and branding solutions. And yeah, and then I mean, there’s some other projects that are coming up in the horizon, but I’m going to keep those under wraps for now. But be on the lookout on my medium page and on LinkedIn for more from that and Twitter as well. Are me UX

face. Well, thank you all for listening this evening who this discussion? Terrible

and doing

great. I just I don’t have I

set them up, you’re supposed to knock them down. That’s the way this works.

I’ll knock them down by two more episodes

left. I think I said two more episodes last time, but I forgot that we have three than two now. We have one more interview coming up for you in two weeks and then we will wrap up the season by giving you an update from topics from our three top episodes over the first two seasons. So hit us up on on Twitter on Facebook. Let us know what you think those episodes are going to be. I already know but I’m not gonna tell you it’s gonna be a surprise. Let’s see if you want to check us out Twitter, Facebook slash drunken UX. You can go on Instagram at slash drunken UX podcast. If you want to chat with us, talk to us about the design tools and let us know what what it is you like you can come over by slack at drunken ux.com slack. You know, the thing about all these tools, make sure you know what your needs are, what, you know what problems you’re trying to solve with them. Make sure that you pick the thing that is right for the way that you work. That’s one of the most important things about this. I said at the start most of these tools, they’re not bad. There’s not like you can’t go wrong with any of them. But you can go with something that maybe doesn’t facilitate the way you work. So make sure you consider that before you jump in with anything. Try some of those free trials. Keep all of this kind of advice close to you and make sure that you always remember personas and your users


This episode of The Drunken UX Podcast brought to you by nuCloud.