Adobe XD For UI / UX Design | HU Shahir | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
4 Lessons (32m)
    • 1. Introduction

      0:42
    • 2. Overview to Basic UI Elements

      12:55
    • 3. 2 Important Tip in Adobe XD

      2:56
    • 4. Advance Tool and Login Page

      15:33

About This Class

UI / UX Design is a very tough and complex process of creating Mobile and Web application,If we take the UI / UX design process simple and set a short time for it without user testing and prototyping our software will suffers from features of a great and successful software that could not interact with user the way it supposed do .

There are a lots of tool available for creating UI / UX Design but choosing the right one is always a problematic and time consuming process . Adobe is known for its powerful software in Graphic Design world and Adobe has released  newly its brand new software called Adobe Experience  Design (XD) that allows artist to create powerful and cool looking UI / UX Design much simple than before .

In this class we will talk about Adobe XD User interface , How to create shapes, Text , masks , controlling different parameters and much more .

If you are ready lets get started :)

Transcripts

1. Introduction : Hey, guys, A tree from Polygon Motion and welcome to this class. In this class, we will talk about a new out of creative cloud application called Adult Experian Design or add up X'd. It is a lightweight application that allows you to create your you. I knew its design on you can build a prototype motion prototype for them or in tracking interactive prototypes on you can create a bunch of other things. And there's a lot of tools for you that we will talk about him in this class on if you're really let's get a star. 2. Overview to Basic UI Elements: okay at the first, let's talk about Arab experience design. Andi, Um, the here off the release off Experian design diversions and these other staff. Adam Experian design is a lightweight public application. Um, exist in adult creative cloud. It is one member off. It is one of them. Adult creative cloud Family member. It is lightweight on. It's more like SK job that I have, ah, class on sketcher that you can check it out. I've newly published that class about a sketch. It's way more like escaped, but some some things on some staffs and tools are at it into Adam Experian designed that make ah some some kind of difference between Experian design and escape. Andi in Experian design, you can, uh, create your design by the tools that you have on the on the user interface off Experian design. You can create shapes, different kind of shapes. You can use em age. You have ah, shadow. Ah style. You have Bagram bladders and these out of stuff on Ah, the thing that you have to notice that extreme design is now free because it is in better more on. Do you see in here the top the pop up is called Arab Experian Design cc beta. It means that it is not the final version. You get the this kind of this aversion for free. It is in test more on may be dear. Some box. There are some some some new tools that will add it to the new versions off Experian design . But ah, I found Experian design is a good ah application, like a sketch, but have more functionality. Andi, Uh, in the future, it will be a great and powerful um, application that that maybe, as I think Ah, it s Cage and take all the attention off the U. N ux desire. Because out of Creative Cloud is a powerful family and all the soft errors that are member off Arab critic Adam Creative Cloud family or one of the most powerful graphics off there was in the world like Photoshopped illustrate or after effect, Premier. All of them are very, very powerful on on. I think that Adam Experian design will get some future are bits and ah, new tools will add it to Arabic Spring design bird. In bitter version, I found Experian design very useful on the cool thing about this application is that if you're on Windows, you can download this a bitter and there's a version off windows available as well on the Windows 10 marketplace. And that is cool because s cages just for Mac OS 10 and A Most of the people who were using Windows doesn't have any access to escape. Experian design is good to start with. If you were Windows user. So that is it. That is pretty much all the thing about it explaining designed on, um, it is, Let's talk about are using to feast elements. It is very simple application, but create powerful things. I mean that if you are, ah, family with great ah software graph, Travelex photo shopper, illustrator or any are in design. Um, extreme design. It is much simpler for you. You don't need to any other things if you if you're already familiar with those softer bad hasn't starring violence you to start with use and if ease off Experian design on as long as I click in here a song as you click on experience design and can download actually from out of Creative Cloud for free, as I mentioned and once you download and install it, you see a welcome screen on. There is some tutorials taken, um, find and area. Or are the templates the dimension? If you're creating application for iPhone, there is some pre made in pre defying templates I from Seven Plaza from six. And there's a dimension for iPad and on android tablet and surface pro as well. And for Web and custom size if you have your coun Kasam size. So as in a starring panel, is a stall wits I from six and seven on, you see that that is pretty much all of thinking about exploring. Design has escaped is way more simpler than esque. H part of the overall application use enter fees is same like a sketch there is. There's not too much difference, is he? But And here you see that we have prototype Onda Cool thing is that in experience design, once you create your design, once you design all the things you can create some blanks and some some interactive prototypes on. Also, you can, ah, record the screen from the preview medio, and that makes Experian design a little bit unique. Then s cage on Okay, Air or some tool bars. You see that we have the fold more car. So we have some rectangle shapes, oval shapes, lines and victor pains that allows has to create some some casting sheep on we have fixed and also we have some art board creation. And also zoom are the liar manager we have in here. And also we have our symbol library that you can create symbol and how we have our inspectors, that all of the parameters that are related to in any shape in your are poor is well listed in hand. You can work with them and change solve the things. And here you have your Amenabar and you can access dese at things in Hazar. Well, lagged is and we have some a mask option and pat option taken that you see in him on also Ah, let's just our tow what? Ah, creating some shapes. For example, if I dislike the rectangle sheep and drag it like this, you see that the shapes created on you can place it in everywhere off your our board. To you see some visual representation off degrading in him and also thes are the around it car radios that weaken simply around the edges off the shape like this. Also, you see in here I have my alignment that I can align. Ah, this cheap according to my our port or I can align, um, according to atter shape that if I if we would have on we have our appearance and opacity We have our ah, the radios for all corners on reduce just for one car, for example, is it's it's a cool thing. For example, we can put at this top and left carver zero for their radios on. Also, just go for this one meaty this. Now you see that we can create this kind of shapes and we can control pre match all these areas with different radios in with different values and that will devil make a little bit different when you're creating and used these kind of things on your you I design. So I put this in the default more on air is to fill. You can use the fill and also have you seen here and you can just save the cholera. And I dropped a collar for your cattle palette Also. Now we have our borrow weaken sees these bars or we can just Zabel Ibarra as well on you see that now is if we see thes these parameters according to escape way. If we compare these things to SKG is, it's way more or less because an honest cage we have this admissibility toe Adam or fell toe Adam or Barley to two out of Grady into the, um to the color of your things. Although we can also are some greeting in here. But ah, the controlling on its cage is a little bit, as I think, is a little bit of a powerful and advance and okay, that that that is the beta version off the experience. I and we don't have to expect too much from the software bad. We're all waiting for great things and great tools that that will be added to this piece of software. And we have shadows, quicken, create drop shadow you're seeing here We can change the color of the shadow as well. And also the x and y position. Also, we have background bladder that I want to talk about it now. I don't want to wait. Okay. Lets me for this proposed. Let me Ah, open. Um, let me open this and put it and you see that you can drag and drop the image as well. And him and she it's It's very large. Bad Al, Just size it down like this on The cool thing is that you can around it the shape on and make the shape Ah, off the aim, Agent and control them. No. Ah, without using mask or some struck in these other stuff. You see that? But we don't need that. So And also now if I put this underneath of the rectangle and go to wreck tingle and check on the Bagram Blatter, you see that it will just beloved the background behind this battered and behind us shape. On this, a cool effect you can pretty much see this kind of finality is an almost every ah advance you in your ex designs thes kind of their like notification center on your iPhone and, um, these places and that is that there is a cool thing as I think we have access at this type of things on escaped as well in Bagram blur and you see that we can control there, open the overall brightness of this and ultra can control there did the blending option off the shape itself like this to create a kind of glossy ah, bad and and hair. And also we can do it for this one as well. And if I create a new rectangle in hair and also just booked us to Bagram Blur on Felder's , which a great color on put this. And in each of this you see that now I can control the amount of transparency and also the overall shape of it. Maybe just put this in hand like this, and I see that we can create amazing things like this. Um, very nice and incomplete. Place it if way I want. That is from inspectors, and you can also preview your design. And if I click on preview, you see that the preview is a peon here, and we can see if you build purse type. But we'll talk about and then next listen. You can just control it in here on. Also, you can record it in here that we will talk about it so and the next Listen, we'll talk about some outer ah tools and also about how to build a prototype on out of experience. Sign 3. 2 Important Tip in Adobe XD: okay before green into advance tools like building prototype on ultra masking. In these tools, let's talk about two knee feature off Arab extreme design and to watch the hottest features off Experian design that if I time consuming. And if I doing mantle thing the 1st 1 is their repeated repeat. Great. Let me create very simple shapes that representing the user data, for example, and maybe this kinds of things and a little bit of bar we need for it like four. Very nice. So on I want to duplicate ah Overy tiny lines that representing the fixed s Cajun mark absent, reduced a border for So imagine. We have this kind of things and representing the different user image. And we want to tip lick it them with that copy piecing without man holding things just with one collect, we weaken. Ah, just copy and paste and duplicate them in extreme design So it's very easy now just select all of your shape on in here. Collect on Repeat Great on. Once you click on repeat great a great These origen is appear. And once I change this, you see that does, um, elements and shapes are repeating as much as they want. For example, tree I can simply changed speeds between these elements like this, and also I can drag them in thes access. Also very good. And you see that? How cool is that? It's very, very nice on it is from a repeat. Great. And what if I import some different image to these elements? We were putting each image into different shape Mannelly and he and I have my ah image. I have tree an image from different people. Fees is simply I just slick them with holding the shift on just drag them into the 1st 1 And now you see that all of them are locating into different places and you're randomly organized that how cool is that? We can do amazing things with that weaken vie time consuming in in a large and complex project. And that is very cool eso And that is from nice features off Adam Experian design on in the mix Listen, we will talk about advanced tools like building did interactive prototype 4. Advance Tool and Login Page : can. Now, let's talk about some other ah tools, for example, creating fixed or a way to show using Wiktor pen. Okay, now let's create it Takes for this Bannon in hand. I just place to ticks in here, maybe. Mm. Start, start. Or maybe just go log in and also change the color of it can change its from ham. And also, you can change the phone off my face and fall int in here and politica. But as you can, for example, choose dip bolt won. And also you can add some styles. And my replies will fourth fixed Andi, you can change the size of it to this size on now if I, um, slicked the shape and also there Thanks I can align to fixed according to this shape. You see that? Okay, Andi, Now we have created our text. Ah, We can create custom shapes by using off this pain tool and Wiktor pain tool and you could drag it. And if I hold down, you see that we can create Basia like this. I want you finished. You can fill it and creed borrow Also Shadow. Very nice. Okay, that is from our victor that also you can create are both in him this kind of our power, our recon Use some pretty fine dimension. Like for example Ah, apple watch. Yeah. Can have multiple are boring and navigate by holding this pace and right, collect like this. Analyst, you consume in when Ham. Very nice. So I'm just cleat. Ah, Cletus and weaken duplicate our orbit as well. If I select this our port on all on, hold off and drag and drag it in here. You should have defecated all the things in here I can rename it too sick and a screen. And it's our first screen. Maybe just for putting this in getting started getting started and also a little bit smaller and ah, in here. But let's put this in hand on Tell it if it smaller I just use this for and also Ah, let's meet. Okay, now let's talk about a symbols. We can also create a symbol from it. For example, if I ah, select this shape on go to symbol and create a new symbol with me that I have my simple just very simple and Aiken use it across my APP project and that is very cool like this, Uh, and you can also create grouping great group for your object. For example, if I like this toe shape, I can simply press command G for grouping. And she knew Group is added in here and we can call it and rename it like this. And also let's duplicate this and put it in hand and put it in a new group and call it forms. Ah, are maybe just email Very nice. And put this as well in one one group. Comanche, Call it Log in on Now let's tweak this. Let you bid on change the color of it from granting to solid color on Put it in here like this and maybe just put it in hand. Also me, me, give it a little bit barter. Just, uh and here on taking this very nice and also calm this e mail and put it slick, but of him And put this to this side on just give it now a little bit of space and, uh, other from we can call it painting. I'm now I mean color on also like it for regular like this. Meet Tallec. No regular is good on. Put it in ham and deploy. Kate. Another one on also you choosed it a group Onda, hold all 10. Duplicate another one in here and call this past fourth. Very nice and changing grouping and put it in here. Have your log in on and just triplicate this Me. Me. So we have to this and hand Just have to borrow itself. Bagram broke a bladder off. And for this, maybe excuse for or maybe two. Very good. New account. Snap it in hand. Very nice end. We can create an overall group the's group, and put them in one group called power. Uh, inputs Very nice and weaken on off air door. Lock it very good. So we can place our local in here. But I think let's create a circle of circle logo on hand and put this input elective it. Yeah. And also put this way more down. Don't if I want to add some data from the actual mobile screen. So, for example, Iose, I have to Ah, for example, of re creators are finding on interest Are things like that. But I don't need Dad now on the extremes trying Lange's kids We have a built in user interface library. If I go to file and open you Iike it and go to for Apple. I was I was on then how we have all the things on weaken have locker screen. We have our, uh, status were and these others happened by person Command on equal, equal and petition mark Question Mark, you can just zoom in and zoom are very nice. And I can simply copy this control she on go to my our project and control we this and put it in here Very nice. And I can just scale it up like this army I I can go to the experience, design my other project. I can copy this one as well for this. Sorry on, but this and yeah, very nice. And just lead this on deprecate this one in difficult. This one Put it in here. Now you see that? How easy it is to create on you I on the UX design and out of Experian design rs cage because all things are pretty much Ah Rady. And you don't have to put all the tyre too much time on designing your you. I knew X and we have you like it's we have creating symbols and these other staff. And also we can go for and ah, part in how we can example duplicate this on you can mask it out, fight slicked all of them on them. Here you can some strike them also, you can intersect them like this. And also you can do another things like excluding overlap like this. As we have convert to pad, just convert them all into pad. And for example, if I want to ah, control some of the pines in here in this jail, it's because it's LF we cannot, um, aided this and simply go to power and convert this to part. Now we have ah access to these points. Very nice. Okay, on. And let's talk about protect. For example, I want to build a prototype when the user clicking here getting star it must be driving to this screen. I can simply go to prototype and once I choose this, stop or I can use the control tap on here. And also simply just if I f a is like this, for example, this Roo Roo is appealing. It means that which elements off the outer skin. You want to connect them, for example, You want to connect this into this scoring and simply drag this in here on this, um, pop amino on glance appear you can just change the target. You can change a transition. For example. Push right. For example, you can you have different other stuff. We can change. Ah, animation type. He's out and easy. You conducive for example Easy in now on. You can also time duration of it. Default are there Ah, cast. Um, Now if I just preview this you see that once I click in here it just drive to the next speech. Aunt, it's very good. And I can create, for example ah to new account as well. If I opened this on, it's like this log in. And if I slit their here, it's just it. It has to be. Go back to here and push left that fight. Preview this getting start Log in on the cool thing that I have mentioned here that you can record this, for example, if I click in here, the current recurring is star and just simply clicking here on clicking here on top prompt for saving. For example, I want to save this two disc top use artist on click safe. Now, if a closeness and go to disk top. You see that my father to be in here on I can see this quick that it's very, very great future and very powerful to have this kind of things, and it's avoid time consuming to build this kind of emotion Interaction. If you want to. For example, use it for N. M. And, uh, Infographic video. Your motion graphic artist. You need this on a screen. Ah, often phone on your project is much, much simpler than creating them by yourself. That is a cool future, and the expiry in design on that is pretty much all the things we'll cover that and we can save. There's we can export sense of our overall project. For example, if I choose exports, you see that you can explore for everything's you can export all our boats. I'll also you condone select your templates for which platform you want export, and also you can share it on and previewed on a perhaps er and here. If I click in here and just previewed the title and dragon image for displaying the icon of display. And also you can create your link of for example, if I time this may be new and create my link. Just wait a moment And now my link is created on Dykan Simply just assure the link our copy , the embedded court and half. And if I click in him she had its superior on my browsers Safari on it will open approach type and designed that we have created. You see that it was my design thinking. Have all those interactions and you can sign in and chat with your friends Feed bags on these at our staff. So that IHS from Adam Experian design, that is that is not too much more about this lightweight application. Hope you guys enjoy from this class. And don't forget to check out getting a star A sketch class from Polygon motion on a scale sheer. And my name is he shares you guys next time