User Experience Design Essentials - Adobe XD UI UX Design

Wireframing (low fidelity) in Adobe XD

Daniel Walter Scott || VIDEO: 5 of 92

Download Exercise Files




We're going to start Wireframing in XD. Now, Wireframing, or Low Fidelity is the term used often. High Fidelity just means the version with the fonts, colors, and the images, but looks exactly like the final product. Wireframing or Low Fidelity just has some-- has one font, one color, real basic layout. For me, Wireframing is probably the most important part. That's the bit where me, as a designer—

That's where my value comes from, I guess. Working out the user flow. How they get from A to B, how long it takes, how many steps, how easy it is? That sort of Wireframing is where most of the value comes from for me, as a designer. Even though I love the High Fidelity stuff, the Wireframing, I find is quite important. 

Now, do you test the Wireframes? I use Wireframes to send to the cient. So they can check it to make sure everything's in the right place, but I don't use it for actual testing, for actual end users, or the Personas. You can. I find, I'm quick enough at getting the High Fidelity versions ready for testing, and I prefer to test with those, with all the right marking material like imagery, fonts, and all that sort of stuff in there. 

The other thing is, in terms of Wireframing I'll do them by hand first. I'll use something like this. In my book, real quick. This doesn't go to anybody but me. I hold it up, the microphone disappears, and you can't really hear me. Hopefully you can see that. Maybe you can even hear me. It's just real basic outlines. There's pages and pages of these. And I just go through, and kind of flush out the ideas where everything needs to be going, and then start building in XD, it's just quicker this way. You might prefer to go straight to the computer, that's fine too. 

So let's actually go get started in XD now, and look at some of the UI kits. Finally, XD time. "He keeps promising it." I promise, next video.