Tutorial Como usar o Adobe XD na Prática. Layout de Site Passo a Passo!

Save people, my reputation is Bruno Kons, Im a graphic designer and today Im going to show you how to layout a website in a adobe’s relatively new program, the adobe XD the first thing we are going to stay up here against the yen too follows the button thousand here will appear iphone and ipad network to size now of the iphone settlements but I dont even know you can do it cost a site that on the side we will too work with 1,920 for 1,080 to spawn the layout of the website this one is our good article where the people will work in 1920 by 1080 here are the arrows all the tools to people need it here are the resources and here our laws will leave our laws here or even conversion the good part and the identifies here the self-control – and lessens received more now if i sounds with the arrow and move to it on one side accommodating the alt and it will redouble now with shift I will do the same thing down and viewing the alt and will reproduce once again the two that I selected let’s work on that first here i will zoom with z shortcuts I will choose the displacement rectangle to make a rectangle from one end to the other of 30 summit pixels and if rectangle is coming from on the cable which is the fill give the first keep me here on the cable now and Im going to choose a darknes gray-headed nighttime opa I think they heal well so ok closed now I’m going to hold out this enter placed it down so I didnt hold the shift so it wasnt straight Ill do it again hold the switching goes down it will do the same thing that will repetition down here Im going to make this gray a little bit lighter its in it here at 30 pixels i’ll keep an eye on it i’ll make it 90 pixels allure previously has the top and now I’m going to get it on here you can align it if you are required pipeline for example is out here we come here clink in the midst of the expanse in the midst of the iac the authorities concerned will drag it up with the change he will use the magnet will learn from who works on top I did the same thing with the top possession the I went down and made another bar now Im raising it Im going to leave it more or less at 300 pixels we are nothing more than acquiring rectangles this here now i’m going to make black this one is going to be my boycott I’m going to pull an likenes there, it can be this one, it’s not is everything specific and Im going to play straight on that one I established and its going to see automatically opens that epitome the more it increases but the image – disappear settled 400 410 pixels there really to make a grace I’m going to come my png badge, it’s a transparent background, I did 347 for 89, let’s go play there in the central constitution up here because otherwise it will go inside of these disallows ever plays out of yours to act as a chunk goat she burned in true-blue when i do website i generally utilizes thousand thousand usable website area pixels in the middle of it because there are still people who have a problem with decide right then a thousand pixels or guarantee that everyone will see all the content of my website will not be a problem I will gather a bar here and go back a thousand containing her maintaining the transformation over there I go over there in the middle now yes the window the other side to vote that so to do with shift down I I entered into with her straight-from-the-shoulder ready she is there in my thousand pixels right in the textbook tool I’ll gave a thousand pixels here simply to know that this here is my note of where I can employ my material now i will make another latvian the dimensions of the one i should have done before but it can be now also no problem heroes and 410 towering and i’m going to leant the color wire I’m going to take the ball out of it I once clarified because I’m going to keep this here the second button with the mouse the right button is the anj and play video games the frontini is to bring it forward now Im going to framed it on top of this prohibit and I really did it and now if I here in the opacity elect 60% then I wanted to write something on top so a little bit darker is going to be better for me now I’m going to draw these icons now these three lily-white social sectors are png with transparent background adopt the three with alteration deeming the mouse or abridge all of them proportionately is this is cool to put in this bay now I think its good so Ill distribute it a little bit them now a verse tool or situate contact at Bruno with the fleck com fleck br making any website but if you want to go out to say to choose a typeface yes now we will see it can be saved sauntering here closed let’s set a extremely thick pa can interfere in an hour now i’m going to do this draw flit bike i’m too going on the cable must elect grey implements is had to be able to move introduced here in the middle of decreasing a little its size 13 pixels and now i will stay here in the preview merely to see the size of the good one is good now Im going to line up with attracting the half sock the icon gave it next to it now Ill comprised the pee-pee with the two adopted and Ill go to my pixels over there is to follow that bar Im going to take the devil, its simply youtube opel harbour now with out so never apply on back to be stitch with babu ons it was on the youtube icon’ projectile’ he chew the other one now the line is fine and closed now i’m going to the text implement or write that my website and kiprono com.br trip lasix is to contact the mother in the word aligned here with the center of the composition now choose another font there a bit thicker and I’m going to increase the spacing between words now a little bit cooler because again I think it’s cool like this, right here, click on the banner ready when you are go to the tool and rectangle make a rectangle that on top I will make the wire and I will leave fashion the first school now I will decrease the capacity Im going to articulated the white-hot cable as well that Im going to apply here to round the line and here I will position three to be a little thicker cool this one that I I will also align urban against the genus 2 the group here and now align the Cubans both now everything is fine now they will do the buttons here person I will choose a typeface I will do with the same font and the tip does not use numerous fonts but’ mute’ a complicated innovation foresaw cool now i will align with this bar I time tidy up now rapidly and closed publishing on the residence I will line up on the bar and now with the alt hampering the tabbed robot alter it will create another job same thing when you buy it can also be now I’m going to tell you who I am when you met and if you want to account on the one hand the accounting closed right tool I will leave it more or less is to leave it here but I will leave a space for then positioned an icon there and let me see it predicted that’s it beauty keep everything together the body came 17 also from the resources knockout now i will align it again the bar predicted again with adequate space i I can play with my boj art it was very big low-grade is a little now should not prophesy everything right I will just attach a little more said that it is a little distant from each other put everything together and I will be increased with the top consider the displacement also to decrease everything proportionally now i will settle nafea there at the end of thousand pixels again here a preview is always involved predicted all the time for I’m getting better back good for now really more tidy up a little bit on now align the bar again and now the last preview is all right with us I required now i will attract the tool now i will draw the wanted inquiry icon the tiny length I think it will be cool it is also png that was translucent so you can place it anywhere and then I’ll leave it at the very end of the site I’ll get all my buttons I will keep it a little more popular so as not to stay in such a big infinite reduction a little bit more I think it is like this now I’m going to get a man about contact right I will share now or decrease with out with switch producing now to the middle to do this over here this over here is already in the middle as I craved now I’m going in the text implement I actually get this soldier now I “ve brought” it with the alt to repeat right now by clicking on it i will increase the size I think it’s ok, I’m going to align it, in fact , now I’m going to attract it regardless from lincon this icon restrict c ensure v now bad about here little arrow closed the line in the middle of this icon likewise control c see v same thing now the mouth contact simply draw here ball think that inep nel the imam cures a lot of beings align here in this program I’m going to get this one with altmann I reproduced now settled black that thinner font I write anything offends bananas and that is that thing i will place here aligned in the middle now I will also get it here I will set it centralized there is a little the size of this cool ink font now let’s midst it here restrict c limit v will pluck there too only to make the same text then each one homes the textbook you want to control c button v we will likewise positioned it once looking like romi click predicted the same is that it was right now let’s close the preview now and exit for our second artebord now to make it like a portfolio sheet chores there i will reach the rectangle implement a 1920 1080 rectangle nor will i utilize this good art as a basi here I will decrease it with the alter you can stay in this proportion leave more or less here and now that is the “cat-o-nine-tail” prance I will want that I’m going to please click here and hip grid to repeat itself grid I’m just going to pull on one side this very simple one pushes it up and I impede recurring the first sound that we did, we attracted it down and will repeat it too build nine squares since we can play with the tool a line it with artebord exactly click here aligned and now glance what madness I have that nine images already braced are my tournaments i’m going to rename one here and get 12345 select all now i will pluck more entire there and someone will happen wonderful, right, putting it in the order of the photos there already right here and it is feasible used to facilitate a lot of piece by automating a good deal, right well I’m just going to make some adjustments here in the surname contact framed everything color or improve a little now likewise the spacing of this nothing too long that too the relevant recommendations of this video showing the tools or not how to do the organization now i will make now i will make a 1920 1920 length rectangle that the part immensity I will articulate a gray-headed one little bit clearer than on the second mouse button or the freedom button ruy anj I will here for tuba then it will be at the bottom of our form now I will advance a little video I will really draw more ways here to separate it a little than the white-hot front to be done it has to leave its margin and the strand there is a requirement to uncheck because it is a way it has no padding it exclusively addresses now if i want to vote for an image i’m going to make an entire rectangle in that immensity the second mouse button anj and percentage beck now I’m going to pluck the idol that I want to kept and simply throw it in the rectangle to be the freedom length that we need you can mix it up now I will take this same whole here supporting alter and the audi and I will bring now as if it were a set menu of an internet site on each sheet it preserves demonstrating up now let’s have a little bit here in the images and now it’s a really cool part I can make a button from sheet one to sheet 2 in this program if I use programming is only wolf I will first group the whole page 2 hand-picked between them the 1 against the person or persons now group g done this grouped I I’m going to apply it to example undertakings on top if urgent business doesn’t is an indication race to where the group and it will automatically open these attributes right this is saying where it goes with the transition and what is the type of transition 0.4 seconds only I’m going to go straight click on chores it will automatically go to my works page and it would be really good to send the client’s make to see how the relevant recommendations of your website is getting lost without having to know how to planned it, you can do the same thing on the other hand i’m going to firstly say group everything there is up to be able click here on residence oh our first sheet click on home and I’m just going to playing straight-shooting there will appear again these attributes conversion the preview and when to apply at home click on jorge henrique home banking hassles very good very good this program very very interesting for those who want to do the organization for those who want to present a scheme for a consumer to be more professional not to mention that it is an adobe program so it works a lot of the artifice of photoshop illustrator very easy to move if you want to export come here in these three in like this while play can export now for example i will choose time a briefcase that what to stop them from leaving this tutorial do not forget if subscribe to the channel there can be here oops it’s not the list 2 x of exported feat o duckling those two skill clods underneath and not only for nothing but is here the two that we did one ultimately the other you that we can erase and that was it the chaps don’t forget to subscribe to the channel don’t forget to enjoy the video and if you liked if there was any doubt send it to me if you know how provide answers answer I don’t know good will too do that hug

1920 1920

As found on YouTube

Share this article

Leave a comment