Let's go ahead and zoom on in here and, starting with the place call icon, I'm going to choose this phone icon right here, pop it on top and, in the middle of the green button, and change the color to white. I do have Icons 4 Design plugin installed. So what I'm going to do is, I'm going to hop over to my Plugins panel right down here at the bottom. Now, of course, inside of these buttons, we need icons. And then the button on the right is going to be red to end the call. So I'm going to switch this over to a nice green color. And this one is going to be to start the call.
So this time, I'm going to grab my Ellipse tool, shortcut key E, and drag one out on the left-hand side. Now, down below in this area, we're going to want two buttons: one to call and one to end the call. And I'm also going to drop the weight to around regular. This might be some secondary information. And then, one more layer, right underneath. I'm going to make sure to center it and experiment with different typefaces. I'm going to grab my Text tool, shortcut key T, and type out: Howard Pinsky. Now on top of this group of photos, we might want some more information about what this call is or who's making the call. And then again, because we're going to be eventually rearranging and resizing these images, I'm going to just make sure to ungroup the grid. I'm going to drag these images directly in. So hopping over to Finder, I'm going to select one, two, three, and four. But what you can do is, use a Repeat Grid initially to add additional photos very quickly, and then ungroup them. And since we're eventually going to be rearranging these photos that appear in this area, I want to avoid keeping them inside a Repeat Grid. So, with the Rectangle tool, one more time, I'm going to drag one out and then round out the corners just a touch. Now, I'm thinking right in this area here, we're going to display the additional users that are on this call.
I'm going to make sure that the artboard is selected and simply change the color to black. So, within the Properties Inspector, I'm going to go ahead and drop this to around 30 or 20% and then to make it a little bit darker. And now for this image, we want the opacity to be much lower at the beginning. And with that in place, I'm going to hop over to the Finder or Explorer to find an image. So with the Rectangle tool, shortcut key R, I'm going to drag one out across this artboard. And I'm going to start off with a nice large image of the person initiating the call. And this one is going to show all the people that are part of this video call, a call button, and an end button. So, over to the right-hand side, I'm going to grab my Artboard tool, shortcut key A, and create a new artboard, which we're going to use for our first screen. And today, we're going to be tackling video calling. Let's get to it.Īll right, here we are, back in Adobe XD with various screens that we've been working on throughout the series. And in this video we're going to be designing and prototyping a video chat experience using audio triggers in Adobe XD.