By Howard Pinsky
Hey everyone, I'm Howard Pinsky. And in this multi-part Adobe XD series, we're going to be building out multiple screens for a mobile-focused social media application, starting today with the profile. Let's get to it.
Alright, here we are in Adobe XD with a nice blank artboard that we're going to be using to build out our social profile. And there are many elements we're going to be adding throughout this video. Now, the first thing I want to do, because I know I want a nice dark design, is select the artboard, either by clicking on the label at the top, or double-clicking on a blank area. And over within the Color Picker, just set the color at a nice dark shade, just like that. Next up, we're going to add a nice big banner, right here at the top. That's going to go behind the user's photo. So with the Rectangle tool, shortcut key R, I'm going to go ahead and drag one out, just to about here. We can always adjust this a little bit later on. And I'm thinking, we're going to go for a nice neon vibe. So I'm going to hop over to Finder or Explorer on Windows, grab this image from Adobe Stock and simply drag it directly onto this square. It looks pretty good. And of course, if I need to, I can always double-click into this box and adjust the scaling like that.
Now we will be adding two icons right here at the top, one on the left, one in the right. But we will get to that a little bit later on. But what I do want to do, just to make sure that we can align all of our items, is drag out some guides. So over on the left, I'm going to hover right in this area and drag out a guide, let's say, around 32 pixels from the left, and also one 32 pixels from the right. Perfect. Now, in front of this banner, we're going to have many elements, including a container that's going to house the content that we're going to be adding later. So with the Rectangle tool, one more time, I'm going to drag one out. I'm going to leave a little bit of room right down here. So I'm going to drag one from about here all the way down to the bottom right-hand corner. And to keep with our nice dark vibe, I'm going to open up my Color Picker, sample a color right down here. Maybe I'll add a little bit of blue to this design, just like that. And then what I want to do now is bring in some of the color from this banner at the top. So that it spills into the top of this container. So with the container selected one more time, right down at the bottom of the Properties Inspector, I'm going to enable a background blur.
Now the default settings are looking a little bit off. So we're going to make a few changes. First, I'm going to go ahead and increase the amount of blur all the way to 50. I'm going to set the brightness right at zero. And then I'm going to increase the Effect opacity right here at the bottom to bring back some of that color, this darkish blue that we set just a few moments ago. And now, if I deselect the shape, it's looking pretty good. But there's a few additional changes we might want to make, including to the border, and we may want to give it a little bit more of a rounded feel. Now in terms of the border, what I like to do with these darker shapes is set the border color to a pure white. And then just bring down the opacity somewhere around five to ten percent looks pretty good. And I might want to bump up the size just one pixel. Now, to round up the shape, I can either select the rectangle and then use these handles on the inside to add nice rounded corners, or if I want more of a custom curve, I can double-click on the shape to convert it into a path at a point right about here in the middle. And you'll notice, if I just go ahead and move it, it's a pretty harsh line, so I can double-click on it just like that to create a nice curve. And I can either move this one up a little bit, or I can select the ones on the ends and move those down. And if necessary, you can also adjust the curve by clicking on that middle point and pulling on these handles. Now, if you really want to make sure that that point was added in the center, you can drag out another guide that will snap. And if I double-click, it's looking a little bit off. So I'm going to pop it right there. Command or Control+semicolon to hide your guides.
All right. Next up, we're going to move on to our profile photo, which is going to go right here in the center. So with my Ellipse tool, shortcut key E, I'm going to drag one out, holding down my Shift key as well. Pop it in the center, right there. And with that in place, we now need an image. So back over in Finder, I'm going to hop over to this folder here, where I have some great-looking toy faces, including one that I purchased of me. So I'm going to pop that directly into this shape. And now, to add a little bit of separation between not just this shape, but a shape we're going to be adding in a moment, I'm going to set the border color to a nice dark color and increase the size quite a bit. And I may want to push it on the outside as well.
Now, as I mentioned, I may want one more shape in the background. And this would indicate whether or not this user has a story available. So I'm going to go ahead and duplicate the shape that I currently have, Command or Control+D. And instead of a solid color for the fill, I'm going to go ahead and choose a linear gradient. And the top color is going to be this nice, reddish pink. And then the bottom color is going to transition to more of a purple. That looks pretty good. I'm going to make sure to move this to the back. I'm also going to rename this Story and then make it a little bit larger. Perfect. That's looking pretty good. I'm going to go ahead and group both of these elements and call this User. And we may want to make this a touch smaller.
Next up, right below this user, we need the user name. So with the Text tool, shortcut key T, I'm going to go ahead and type out Howard Pinsky. Now, in terms of the styling, I definitely want to switch this over to a more of a white color. And then for the typeface, I'm going to go ahead and switch this over to Sofia Pro. I'm going to bump up the size of this to around 24 pixels. You can also control this right here directly on your canvas, by pulling on that handle. You know, what 32 looks pretty good as well. And I may want to bump the weight up to around semi-bold. And finally, just in case I do want to make changes to this name, I'm going to make sure to center it. Great.
Now, right down below, I'm going to duplicate the shape. And I'm going to add in another text layer for my hometown, which is Toronto, Ontario. Now, because this is secondary information, I definitely want to make this a little bit smaller, or quite a bit smaller. And I'm going to drop the weight just a little bit to about medium. And also shift the color down a touch. You can also adjust the opacity as well, whichever you prefer. And then make it a little bit smaller. And then move it on up. Now, down in this area here, we may want a description, or a user bio. I'm going to go ahead and turn my guides back on. And with my Text tool, one more time, shortcut key T, I'm going to drag out a box right across this artboard so it snaps into place. And now I can start typing out my bio.
All right, I'm going to go ahead and shift the color back up to white, but everything else looks pretty good. I'm going to leave it as that. Now I'm thinking, right in this area here, I may want to display some of the users that are either following me, or I'm following them. So with my Ellipse tool, one more time, I'm going to go ahead and draw one out right about here. And since we want a few additional users going across this artboard, this is a perfect opportunity to use a Repeat Grid. So right at the top right-hand corner of the Properties Inspector, I'm going to go ahead and press Repeat Grid. Then I can drag out a few additional ones across like this. And once I have a few more, I can hop back over to Finder or Explorer. And I do have a few additional users selected. I can drag them directly into XD. Now, what I'm thinking is, I may want them to be overlapped a little bit. So hovering in between any of them, I can simply drag them on back just like that. And then to add a little bit of a border in between each of them, I'm going to go ahead and sample this background color, and then increase the size in the Properties Inspector. And now to complete this area, I may want, right over here to the right, the amount of users that are following me. So with the Text tool, I'm going to go ahead and type out 25.4 K followers. Now, for the styling of this particular text layer, I definitely want it left justified. And then to focus in on the amount of followers, I'm going to select just that area. And then bump this up to bold. And if I pop this into place, I'll go ahead and snap it to the right guide. And then if I need to, I can always adjust the spacing here.
All right, I'm going to go ahead and pop these into a group, call them Followers, and shift this up ever so slightly. Next up, below this group of users, we may want two buttons: one primary button to follow this user, and then two, maybe a button to message. So with the Rectangle tool, I'm going to go ahead and draw one out, leaving a little bit of room on the right-hand side for the other button. Then I'm going to completely round out the corners of this particular button, just like that. And I'm thinking for the styling, don't need a border. But for the fill, we might want a nice, actionable blue. So I'm going to go ahead and choose a color right in this range here. That looks pretty good. And now with the Text tool, I'm going to type out the word Follow.
Now, since this is the primary call to action, I will increase the text just a little bit, bump the weight up to bold, center it, and make sure it sits in the middle of this button. It's looking a little bit chunky. So I'm going to go ahead and just slim it down just a little bit, like that. And check out my preview at the top right-hand corner to make sure everything is looking OK. Great.
Now, over to the right, we may want one additional button, again with my Ellipse tool, drag one out, holding down Shift, so it's a perfect circle. And for this one, I may want it to blend in just a little bit. So I'm going to go ahead and choose a nice gray color right there. And in the center of this, we now need an icon. So in the Plugins panel, right down at the bottom left-hand corner, I do have the Icons 4 Design plugin installed. I'm going to type out Envelope. And this icon right here looks pretty good. Going to pop that into place, set the fill to white. And I definitely want this a little bit smaller. So I'm going to shrink that down like that. Now, back in my Layers panel, I'm going to make sure to organize some of these icons. This one is going to be called Message. And this one is our button, which is called Follow. I'm going to make this a little bit longer, like that.
Alright. So we have a lot of content up here at the top. What I want to do now is start organizing it a little bit more. So I can not only adjust the spacing all at once, but I can also rearrange some of this content as well. So I'm going to go ahead and select all this information right here, making sure not to select this background container. So I'm going to hold down my Shift key and click on it. Then I'm going to pop all of this into a group, Command or Control+G. And this will be called Bio. And once the group has been created over within the Properties Inspector, I can go ahead and turn on a Stack which will define it as a vertical Stack, because the content is moving down the artboard. And this will allow me to not only dive into this group and rearrange content as I need to, but I can also adjust the spacing. So with my Shift key held down, I can just pull in. Just like that, all at once, or I can exclude the Shift key and adjust the spacing in between individual layers.
All right. The final thing we're going to add is right here at the top, we may want to add two additional icons. And I showed you already how you can use a plugin like Icons 4 Design. But now I'm going to hop over to Nucleo, which is a third-party icon manager, grab an icon like this one, copy it to my clipboard and paste it into place. I'm going to go ahead and change the fill to white.
And what you're going to notice is that the icon is very difficult to see right now. Now I can go ahead and increase the size just a little bit, and it makes it a little bit easier to see. But one thing you may want to do, especially when you're dealing with very colorful images in the background, is add a little bit of a gradient back there. So with this image selected, I'm going to duplicate, Command or Control+D, and then switch from a solid color, which right now is the image, over to a linear gradient. Now, both of the colors are going to be set to appear black. But the one at the very bottom, I'm going to drop the opacity to zero. And then, depending on how much of that image you want to come through, you can either select that first color at the top and decrease the opacity over here, or simply decrease the opacity of the overall layer. And now, as you can tell, the icon is much easier to see. And then finally, over to left, we may want a simple icon to go back. So I'm going to go ahead and turn on my grid, Command or Control+apostrophe, zoom on in. And then with my Pen tool, I'm simply going to use this grid to click, click, and click. Now within the Properties Inspector, I'm going to set that border to white, increase it quite a bit, round out the caps, and round out the joints as well.
If I take a look at the preview play button at the top right-hand corner, that's looking pretty good. I may want to make it a little bit larger. And then increase the size a touch. And previewing one more time, we can check out our completed profile.
And that's how you can build out a profile screen using Adobe XD. Well, most of it, at least. In the very next video, we're going to be building out some content cards and exploring how scroll groups can help you interact with them. I'll see you soon.
Create a profile page for a social media mobile app that displays user details. In this tutorial, you’ll learn how to use the Rectangle and Ellipse tools to draw out backgrounds and buttons, add text with the Text tool, and incorporate icons from plugins and third-party websites. Explore working with guides to arrange elements in your layout. See how shapes work like masks to scale and crop images when you drag them in. Experiment with adding Repeat Grids to quickly display sets of images. Try adding gradient fills to backgrounds and adjust opacity settings to make your design elements stand out.
