Artboard in Adobe XD

 

 Hii welcome back to Fairy Designer. In this series, we're gonna be covering Adobe XD also known as Adobe experience designer. This program was created to help web designers create experiences that are more easily creatable in the web development side. 

So if you know from way way back there used to be a program called Fireworks by Adobe that was very similar to where it was meant for designing websites but websites have changed in recent years from going to responsive design and being very flat with fewer images so Adobe wanted to set out to create a design program tailored to web developers and designers to make sure that they designed things that will be scalable and usable in multiple formats such as ios, Android or web. 

So to start the series we're just gonna be doing the very basics by covering the artboard tool and in later blog we'll get into other tools as well as how to create some really fancy designs and into a little bit of UI theory and UX theory is also known as user interface versus user experience design. Let's get started. 

So I'm just starting up Adobe XD right now and right in the Welcome panel we can immediately select what device we are going to be designing for so whether it's iPhone, iPad, or the web you can also click on these little dropdowns to select different device types so such as our Android mobile now there are also new add-ons that are going to be changing the way Adobe XD works so these add-ons we're not going to cover them today but just to give you a brief little look it allows you to add new features to Adobe XD making this program very extensible for the future. 

We'll be covering a few of these later on but right now we're just gonna be running a completely vanilla version of Adobe XD. So for this, I'm gonna start with a simple web layout someone's gonna click on the web layout and this will start my project. So to begin let's just look at some of the actual settings of our artboards so in the center of the screen this would be what we refer to as our artboard. 

You can also see on the left it will list any artboards that you have currently to see the settings of the artboard I'm just gonna click on the top bit of text here and I'll select the artboard over on the right in our properties panel we can see the artboards actual width height settings as well as the ability to switch it between landscape and portrait below that we do have this option for responsive resize we're gonna be covering responsive resize in a much later episode so I wouldn't worry about it just as yet for scrolling this feature is very good for when we want to make sure that we are designing all of our content to be above the fold of the page as it's referred to. 

So on my artboard to show how this works I'm going to scale it up just by selecting the bottom little handle here and dragging down so you'll see there's this dotted line in between that just shows where my screen area ends so if I was to design all my content put in some sliders and things it's a clear indicator of where the monitor is and where the user will have to start scrolling so you can choose whether this artboard is a vertical scroll and if it's mobile whether it is a horizontal scroll for instance and then the viewport height itself below that we have the appearance of the actual artboard this allows us to change the fill of the artboard so I can just click on this little color picker here and I can select any color I want now if any color picker in Adobe XD you can save your swatches since this is an area where we want to make sure that we are saving all the colors that are gonna be utilized within our project. 

It's a very good idea to keep the swatches so if I select a background color here that I'm gonna be using later, right below I'm gonna just click this save color swatch and there we go. That color swatch is saved and it will show up in any other color picker throughout Adobe XD you can also select from existing colors on your artboard by just clicking this pick color from the screen this allows me to select any color I want. Perfect. 

Now I'm gonna switch that back to white and the final setting for our artboard is the grid layout. So this is extremely useful as a lot of websites these days are designed using some kind of a grid layout also referred to as a column layout. So if I check this on as you can see it immediately adds in my standard twelve-column grid layout and you can customize it a bit here. 

So I can choose how many columns I want so I'm just gonna click inside the field here and I can type in a number or I can even use the arrow keys just to go up and down to select new columns you can change your gutter width which is the white space in between each column. I can increase that or decrease and you can even set your column width though it's automatically being set because I have an exact measurement here of my columns and then it's just separating them by the gutter width but you can also manually change this.   

And then the final settings down at the bottom here allows me to set whether this is a left-to-right margin based or if I want to put margin along all sides of the screen so just by clicking on this little option here, I can raise the actual top margin the right margin the bottom margin and the left margin whenever you see for values like this it is always going to be in that order top right bottom left just think clockwise. 

I'm gonna keep this as a left-to-right only and there we go now when it comes to adding more artboards we can add them for multiple devices or just have multiple screens for a lot of our websites that we design here we like to make sure that we design every single page in a single document that way the developer can go in and see all the pages or a client can even go through and actually navigate the website. We'll get into how to use prototyping in a later episode. 

So, for now, to add in more artboards over on the left here we have our tools panel and near the bottom, there is the actual artboard tool. 

If you hover over the tool you'll notice that it has a little tooltip that tells you the actual hotkey to activate that tool. So I'm going to just select the artboard tool here or click an on the keyboard and then you're just gonna scroll over to the right of the artboard here and I can click and drag and draw a new artboard there we go. So if this new artboard I should start naming them to make sure that I don't get too confused. So I can just double click on the actual title of the artboard and I can rename it so this may be my about page so this also means I should probably name my first start board. 

So I can go to that artboard and double click the title or over in the artboards panel I can double click the name here and just write in what I want the name to be. I can also for organization click and drag these artboards just to rearrange them so now this artboard isn't exactly the same as my previous one I probably want ones that have the same screen size so instead of drawing a new artboard as long as I have the artboard tool active over on the right I can select from any of those existing artboard sizes. 

So I can roll down and I can see that there is that same web layout that I used before so I'm going to click on that and you'll see it'll automatically add that new artboard in at those dimensions. If you want to design the same exact project design but at different device resolutions, you can select a completely different resolution to pop next to it so that the client or developer can see what you want your project to look like in a mobile view. 

If you want to just duplicate a complete artboard and all of its contents select the artboard once again using the artboard tool and you can just use copy/paste or my favorite is holding the option or Alt key on Windows and just dragging the artboard down and then I'll let go and there we go. I've just created a new artboard and once again you can also use copy/paste. 

So I can go edit copy or command+C and then command+V or edit paste and it will paste the artboard it's the next step here. So that's the artboard tool in Adobe XD. In the next blog, we're gonna get into how to draw shapes in Adobe XD in all of their settings. So until next time!