How to Create a Social Media App like Instagram in Adobe XD

Hey everyone, welcome to this new video today on Adobe XD. And we're going to— I really like this kind of design, so we're going to keep improving it. I think it's a new day today, and so yeah, I was like, what should I create today for the YouTube videos? And I was like, well, this is pretty good design, I feel like. And so yeah, I'm just going to keep working on it. So for now, my goal is to do what 2 things. The first thing is to create like kind of like, you know, a Scrabble design where you can just scroll through the first page here, the first screen, have the possibility to like. We're just going to do like we keep this one. It's fine. We don't need to— well, actually it's pretty easy. We just have to copy-paste the stuff. So it's all right, I think. And Yeah, we're just going to— and the other thing, maybe if I have time, would be to kind of push this, tap on this photo and get it like full screen. This is not the right one because it's a landscape, so it doesn't work, but I'm going to try to find another photo where you can have a full screen photo which would look maybe better. So yeah, that's the plan kind of. So let's work on it. So now I'm going to try— the first thing I'm going to try— I need to do is to kind of group everything here. Oh yeah, I need to group everything basically. Image run. And then we're going to try to find a kind of space. So 30, I feel like, is about right. Let's try and find out if it's good or not. Let's check it out to see if the— just to look at how good the space is. Okay, pretty good, I feel like. Um, so now I like it, so I'm just going to, yeah, change that. Let's say Italy. Perfect. Then we're going to switch the photo here. So for me, when— if you have the— not sure what is it called already. Here it is called User Profile. So you just Shift+Command+U or Shift+Control+U and you try to switch with something else. Let's try to maybe— and you just click on the shape. So if you are outside, you need to double-click to go inside of the group and then select the right shape. And then you just Shift+Command+U or Shift+Control+U over and over again until you get something that is good. Let's try to get a girl and a boy. Okay, actually this photo is quite cool. So, um, And then we'll try to get it another one. So let me think about it like that. So we get this good, perfect. So now I'm going to try to In fact, maybe it's— actually would be better for you to try to look at it to see. So I'm trying to find a way to like, okay, what should I put instead of edit post? Because maybe it's you here. So let's say that you are this person, you can edit the profile, and here you are not the person, so you cannot edit the profile, right? So what do I put instead? Do I put nothing? Do I keep it like that? I feel like this could be quite good. I can try a lot of different things, like maybe putting something bluish to put the, you know, kind of turquoise maybe. What do we got here? Oh, let's keep— let's go back to, uh, this one for now. Okay, so now we have the image 1, image 2. Let's try to get an image 3 as well. 30, perfect. Let's group all of that together. Flow. So this one is image 3. Actually, no, we don't need the flow. We don't need the flow because I'm going to increase the size of this screen. So this is something new, something I didn't teach in any of the videos so far, which is my bad. So the screen has a limited You know, a limited size. This is the size of the iPhone X and 11 and something else XS, I think. And so the thing is that if you usually if you do that, if you increase it, you should not like it. The screen cannot be this big. So there is this little blue thing here that you can move around, but I'm not going to do it. And this allows the the software to know that this is the limit. And if you want to, you can scroll down, and when you scroll down, you can see other things. So I can go there. So you see that the normal screen is there because of the blue thing, and then I can still scroll down to, you know, check out other designs that are under it. And so now I can just switch that photo again, try to find something good. So this is not really good. I need to try— ah, perfect. Is it a boy? I think it is, yeah. Huh? I'm not sure, I'm sorry. Okay, let's just try to call it, I don't know, John. Okay, and this one, 28. Perfect. Okay, so we got already these things here. So now what I'm going to do is, uh, what would be the smart way to do it? Okay, so I'm just going to simply increase that as well, maybe a bit more, because simply because— let's try to do something else first. I'm going to put that there. That's good, perfect. Just to have the right size on the screen, on the first screen, and then work on the second screen. Perfect. So here we have how much? I'm not 51. Okay, 61. 61, right? Yeah. Okay, so that's good because like 30 and 30, and so 60 is quite good. So now what I'm going to do is simply— so this one here, group it again as well. Image 1. So remember, here you have 30 of a space between the 2, the 2 images, the 2 groups. So I'm going to do the same here, 30. Just switch that up. So Ctrl+C, double-click on this one, delete, Ctrl+V, and it didn't stick right. So I hope it's the right— I'm just going to check. What you can do is if you're not sure about where it is, you can just keep the photo here. You know it's the same name, right? So you're just going to do that. You have it perfectly framed. Now you delete the other one you wanted to remove before, and then you just switch that up. So I'm going to— actually, I could have just copy-pasted everything here. Let's do that. Let's go in there. I don't know why it does that though, because since I have the photo is at the right place, I just put the photo right here. Keep Shift so that it doesn't move no matter what. I'm still on the same, on the same line. I get that right here and then I can remove the rest. Perfect. And the photo as well. Profile. Okay. All good. So now I'm just going to switch that up here. Um, 250 and 50. It's a little bit, you know, messy, messy, but I don't really have a plan here. I'm just trying to build it and show you like, what usually is my process, even if it's kind of— it can be slow. And I'm going to do the same here. So let's go to 30. Perfect. So since these 2 are already 30, the software already makes it easy to do it. It already shows you that, well, you did 30 for the previous one, so maybe you want also 30 here, which is the right thing. So now I'm going to do the same here. Take all of that, Shift, you select all the elements, Ctrl+C. Then you go on the group here, double-click. You take it, you drag it down, keeping Shift on it. You get the right frame, and then you just delete them no matter where they are. Perfect. Perfect. And here, let's just do— I'm not sure— 400, and then 260. All right, let's try 100. Okay, good. And let's try to get also 60 here. So usually what would happen is that— oh yeah, actually that, that won't work really. That won't work because Here is the thing that happens. Tap that and everything is here. So it's not really, it's not really the smart thing to do. The smart thing to do would be to have one interaction per screen, and that's a lot of mess. Like, let's just— so you see that this would be what would happen if everything you had to— you wanted to switch everything. Like, you click one button and you have everything that switched. Because the problem here is that If you have just— basically here you have 2 screens, but you don't need 2 screens. What you need is 1 screen, 2 screens, 3 screens, and then you need basically 1 screen per possible interaction. So 1 screen here and you have the 2 here that are out, then you have another screen where you have the 2 here, another screen where you have the 3 here, another screen where you have the 1 here, etc. So it's not feasible here, but I'm just showing you like this is what should look like. I mean, you should always keep the 30 here. This is in the hypothesis where everything is right here. And so this is what you should have. So basically, yeah, this is kind of what you need to have here. I'm just going to double-click on the frame to switch it— not switch it up, but let's just try to go a little bit down to 60. Okay, how much are we? Okay, so you just go down to here. Let's zoom in. Okay, perfect. So you have 60 here, 61 here. Is it 1 pixel? Is not a big deal. Um, for the video. Okay, so now we got this just to show you, but, um, it's not really practical. So it's just like you can go on one thing here, you like it, and you can see How it would look like. What I would like to do, something else I would like to do, so I'm going, just going to remove these 2 because I don't really need them. Take that too, drop it to 30. Perfect. Remove this one. So to remove the rulers, it's a good way to show you, you just need to click on the right, um, left-click on the, on the ruler, on the, yeah. Row, and you drag it up to the top of the screen and then it disappears. Okay, so now we have this thing here. Just, you know, let's just keep it like that for now. So what I would like to do is to kind of do the story, you know, Instagram without the stories. And so maybe having the stories up there would be kind of funny thing to have. So I'm just going to increase the screen here. Just by a little. Okay, remove this one. I'm just going to remove all of them for now. I don't really need them. I know that I'm not going to change anything here, so it's not really a big deal if they got removed. I can still put them back again. So what I need to keep is this one here because it's the top of the— it's the limit. I cannot design above it. Well, you can if you want to, but for me, for this design, I don't want to. So this is the limit and I need to keep it here. So what I'm going to still do is remove that one here, remove that one here. I'm going to keep the 2 here and take all of them. I don't really need to group them really. Shift so it doesn't move. You see, I move my mouse but it only goes up and down, which is very convenient. And I'm going to just drag them a little bit, like perfect, 200, just for now, just to work on the, on the kind of story here. So what I'm going to do is— maybe this is too big, I'm not sure. I think 60 could be good. Let's just do a circle. So Shift to create a perfect circle. Let's look at it. It's way too big for me. It's too big. So let's do 60 for now. Let's see how it goes, how it looks like. It's always try and repeat, so don't be worried about will it look good or not, or it's bad if you redo everything again and again and again. It's part of the process. So now, okay, perfect. So I have that one. Let's try 20 to see if it looks right or not. I think 20 is pretty good. It's not too far away, but it's not like too close, because if it's too close, it just doesn't feel right because it's part of the same group, but At the same time, it's really independent between each other. So you don't want to be too far away or too close. So what I could do as well, for now it's just like a wireframe, so I'm not really trying to do anything fancy here. It's just to look at how it should look like and kind of think about the overall design. But what I could do is just to duplicate this one here, Repetition Grid, and you just drag it on, like click this one here. And repetition grid, you know. But I'm not going to to do it now because I don't really need it. So now what I'm going to do is I need the first thing I need is yours. So since it's us, I feel like it should always stay here. And I'm going to what am I doing? It's a line. I'm going to try to do a Actually, no, I'm going to go on the icon here and let's try add to see if there is something interesting to get. Okay, let's get maybe this one here. I feel it's pretty good. I cannot— the bad thing here is that I'm actually— I'm not sure because the bad thing is that it's— I cannot switch that up. I cannot switch like, like here when you have these settings here when I can make the borders kind of round. So it's not ideal. And how about this one? Okay, this one is good. Let's switch that up. So now you have that here. Pretty centered. Yeah, I think it looks about right. So that's already something good. And now I'm going to just kind of like create the same thing for each person here, like the usual, you know, the usual Oh, okay, I have 2 options here. I have option 1, which is do like Instagram, so you have the little ad here for your profile, or I can just do like that. Um, yeah, I'm going to do— I don't know, I'm going to do like Instagram. I feel like it would maybe look better or more— the thing is that it's not that much about copying and not being, you know, different. It's more about How does the user feel like when he sees this, when he or she sees this design? So when you just add a plus, it's like, is it to add someone to follow? Is it to add your own story? Is it to add something different from the story? You don't always know, and this is what's pretty bothersome. So let's try to get a good— let's try to get 20. What is here? Okay, nope. Let's remove this one. So you just drag it out of the, of the visual screen here and it's going to disappear. And I'm going to— let's see how it goes here. And the problem is here is that it's not really— it's more like, you see, we see through it and I don't really want to see through it. So what I'm going to do is a simple trick. You just take this one here, then you take a circle— I mean ellipse. You go around it, very, very easy. You put it below it and then you just group it and you have something where you don't see through, which is perfect. So now, okay, pretty good, I like it. It's right in the corner here, so you see that it's perfect size with the circle. It's at the end of it on both sides. So if you want to see, for me on iOS it's Option, I'm not sure, maybe it's Alt or something on the Windows, but here at least it's Option. So you just press Option and you can just drag your mouse around whatever you have, and you can see, um, in terms of size and everything. So this one looks way better, I feel like way, way better. So now what I'm going to do is simply take the photo of the, of the profile of the person, of the user, drag it here, go around the corner because this is, as I did here, it's right the corner, so I don't need to anything fancy. Then just get it until it's the right shape, put it under the Add feature, or do the opposite, and then you have it like that. So what I can do now is simply remove this one here and maybe try to add a little thing like that, you know, like on, on Instagram when you have a little border. Actually, maybe that I'm going to think about that. Let's do— let's go to 20 to see. I'm not sure, I'm not sure about it now. I'm going to check it out later. So now let's just do this one as well to always keep the same, you know, mentality where— so just, you know, it automatically does it on the software, you know. I just drag it on the corner until it matches this on the same line, get it, and remove it. I'm doing that now because I want to have the same same, um, same pattern kind of where you know that, okay, the user here you are following are actually the user you can see on the, on the design. So people are not like, well, I don't see the people you follow here, I don't see them on your stories, so it's kind of weird. Okay, so now what I can do is actually remove the border because I know where the shape is. And I already selected it, but if you don't know where it is, keep the border. It's better. I'll change the color. Okay, perfect. This one is actually cool. And for this one, the last one. Yeah, let's not put this one on. Let's put something else. Okay, that's kind of not ideal. I want something a bit stylish because it's a— yeah, perfect. Something a bit stylish because it's a social media app, right? Okay, got this one perfecto. So now what I want to have is the title of the names. Or maybe I should add something around here first. Why not? Let's try to get something first here to just, you know. I don't know why I feel like this could be cool. Okay, let's just try stuff. What does it look like? Yeah, not, not, not ideal. Not ideal at all. You know what? Let's just keep this like that this way for now. Just for now. Still not sure how to do that. Then what I'm going to do is. Select maybe 5 would be good, but I'm not sure, 5 or 10. I'm just going to try now. So let's write your story because it's your account. So seeing it right now will be— but you already kind of know it since it's your photo here. You kind of know that it's, you know, you. So you can add it, but having written your story is another step to really tell that it is yours and you can switch it or you can modify it. So I'm going to reduce the text to 14 just to see how it looks like, center it, be careful about that. So it's very easy because this line here is in the middle, so it's very— it's also good is that you should work with what you already have. This line here has been added for this padding here. For the frame. So I already have this one, and if I reuse the same ones, then it creates more sense to the overall design, and it just looks better. So it's good to use what you already have. So, okay, so this is what I have now. Um, maybe let's try 12 just to look— to collect— look at it. Okay, let's go one more up. Uh, no, let's go one more down. Um, I prefer this one, but I feel like it's still too close to the overall. Let's go up. Let's see this one. Let's go up. How much are we here? Okay, let's go that. And let's try again 14 just to look at it. Okay. Ah, this one's actually interesting. Let's try on the other ones. So you center it. I think it— no, it's not Emma. Is it Emma? I think it is Emma. Okay, you go there. This is Emma, and the other one is John. Okay, let's go John. Let's look at it. Okay, why not? Let's put it down to 12 now and do the same thing. Let's put it in the middle. Oh, come on. Okay, let's— this one same and this one the same as well. Okay, this one is better, I feel like. Maybe let's go to regular to see if this is any better. Actually, I like the other one better. Okay, cool. Let's go. Let's keep this one. Let's go with some and I don't know, steel. Okay, perfect. So we should be good now. Perfect. This is actually, um, a call to action here, so the best thing to do is to make it very pop out. But for now, we don't really have an extra color. We already have this color here. You know, so option one is to keep the same color, but the thing is that it's not the same action. You don't want the same action for the user, so it shouldn't be the same color. Let's go on that and let's switch it up to some blue. I believe you can see, but that looks very good. Let's maybe try a gradient. You know what? Let's try a gradient. Let's try green. Yeah, like that. Maybe a little bit more. Yeah, shiny. Okay, good. Like that. You need to have it not too much white or shiny so that the, so that the white doesn't disappear or You see here, you still see the white, but it's still more difficult than the green side. But I like it, it looks cool. So now let's just do— let's just add a border here. Oh, actually not a good idea, not a good idea. Let's take this one here because we already have it behind, so we just can just put it up here so it's the same size. You see, I just dragged it to the corner of the other one. And now I'm going to just add borders. And actually, I don't really need to add border, I just need to increase the size of it. 1 and 1. So it should still be centered. Perfect. Okay, not enough. So just, you know, look at it. Nope. Make sure to always select this one and not the group. It happens a lot to me. Okay, let's rename it Add Story. Okay, looks pretty good in my opinion. So what I'm going to try to do is simply copy-paste this one here. So I want to make sure that this is Emma. So I'm going to remove this one and copy-paste Emma here. Then I'm going to increase the size by 2, maybe, maybe by 2. And I'm going to add the gradient like the same one I did here. So I'm going to drag it here. I don't put them right away to add more A better look at it. So it looks a little bit better, but you can choose whatever you want. Okay, pretty cool. Maybe one more because you see it's kind of different here. So one more here. Okay, pretty cool. I like it. I don't know what about you guys, but looks pretty cool. So now we're just going— no, let's remove it by, um, just a gradient because I'm just going to copy paste it, you know. Actually, no, let's, let's— oh, whoops. Let's do repetition grid while we are at it. Let's try it, let's try it out. So now we're going to go down like this. Perfect. And this is Sam. This is Steven. Whoops. Then we have mine John here. Oops. Okay, perfect. So now I'm just going to take these two here, put them up. And here we go. Always save it. I don't save it that often because it's not really an important file for me. It's just like a video for you. But yeah, if you have— if you have, um, it's an important file for you, I advise you, strongly advise you to always Ctrl+S or Command+S to save it. Okay, so now, and what I love about design and doing these things here is that You can always get inspired by what new design you add to your already done design here. And it really looks like very different. You're like, wait, I could really change that and improve that. And this is what I am going to do. So since it's already added a lot here, I'm going to just drop them by 2, perhaps, maybe, maybe 1 actually. Yeah, let's go for one. I'm, I'm still not sure about that. I feel like, I feel like I'm still not sure. Let's try something else. So we have light, we have thin. Regular and regular in 14. How does that look like? No, not really good, not really good. Let's keep that for now. Let's keep that. Okay, looks good to me, looks good to me. Perfect. So now we have that here. So now what I'm going to do is try to get 10 here, perfect. And then get 30 because 30 is the normal. So maybe 40 actually to really— because it's not the same section. Here is the same section here, so you have 30, but here it's not the same thing. So maybe 40 would be better. Let's try both, you know, it's always like that. Let's try. Okay, and let's try 40. I mean 30, sorry. I like— I prefer 40. I don't know about you, but I prefer that. Okay, good, good, good, good. So now what I would like to do is maybe decrease that name here. I'm not sure about it. You know, it's like Not really a good thing. So, uh, let me think about it. I need to like— okay, let's not do that. Let's not do that. Let's remove these things here. Let's try the first one here, and then let's see how it looks like later. So what I'm going to do is add this one, add story. And do the same here just to look at it, just to see if it's good or not. If it's not good, I'm not going to keep it. Yeah, I think it's too small. I think it's too small. Let's try 10. Perfect. But this is too big. Let's try 18. Center it. Perfect. Maybe 12. Oh, what happened here? This is not what I wanted to do. Okay, it feels very empty now. I'm not sure that switching the names and stuff was a good idea. Let's keep it back. You see, it's good to always try. You try stuff, you learn from it. What I'm going to do is maybe go a little bit further away. Okay, what about 12? Is it better or is it worse? It's worse. What happens if I do that? Better. Better. Yeah, better. Okay, let's keep it like that. And now what I'm going to do, uh, I'm not sure about how to say that. It's not really menu. Um, I don't know, I don't know how to call that, but it's okay. It's the It's just doing the 3 bubbles here. Let's take this here. Is it too big or is it perfect? Okay, I think it looks good actually. So now I'm going to do that here. 4. 4 good or 4 not good? 4 good. It's a bit too big though, so Ctrl+G. Oh, oh, let's look at it. A little bit too big, so I'm going to just— where is it— ungroup. Perfect. So I have this one here. I'm going to just make it a little bit smaller. Copy paste. Perfect. Okay, this one's better. Group it. Additional settings. Okay, perfect. Then what I'm going to do is center it with the photo here. And now let's look at how it looks like. Okay, good. So now you can, like, for example, you can edit it if it's your account. But you don't really need because it's already written edit post. But you can like achieve it, you can copy the link, share, all of this good stuff you can do. Perfect. So now we're going to just— did I switch that up? I think I did. Yep. Yep, I did. So let's take that. So I'm doing it live, right? Obviously. But what you can do before that is simply to really work hard on the wireframe. I'm going to talk more about the wireframe in future videos, but you can just work more on the wireframes without adding any photo, anything. And then once you are sure about the design, even if you're not sure, you know, but you can just like create a component and Everything you're going to modify here will modify also as well on the other ones. So you don't need to do what I do here, which is just copy-paste everything. Even if it's not— it's really small here, it's just like 3 small things on one screen. But when you have like 20 to 40 to 30 screens, it's really not convenient to do what I'm doing here. And I don't advise you to do what I'm doing here when you work on really big projects. This is here just again a video course, so it's not that much of a big deal, but it's pretty cool. You can see the difference. It's pretty cool. I like it a lot. So what I'm just going to do is switch that up. I'm just going to remove these 2 here. Here, I'm just going to add the same stuff here. Remove that because I already have— I still have the rules, you know, I have the, the guides here, so I know exactly where I need to place my stuff. Perfect. So select the photo. So now what I'm going to do is simply— oh yeah, I need to group all of that here. I need to group all of that. I'm not really going to— I don't care that much. I know that it's all of this stuff here, so I'm just going to group it Stories because it is These are stories. So now I'm going to lower it down and add a story here. Perfect. Drag that down to here to really show the difference. And I'm going to add that here because it's 50. Let's check it here. 190, 190. Perfect. So I'm going to put that here, drag this guide To the, to the end. Let's add this one to 30, copy paste the 2 of them, go on the screen, open, and then perfect, perfect, perfect. And this one. So now what happens is when I, I double-click on this one, go to prototype, it's already here just to check it out, to check if it works or not. This one as well, same, because I didn't really remove this one, but I just want to make sure that everything is all right. Then I can just go back to design, go here and try it. And here we go. So I've just added, I've just added the story here and just added some extra, extra stuff. Let's, let's remove the— actually, let's do that first. I'm going to remove that and let's just switch photos to really bring something extra. So let's go to downloads. Let's try to get a nice photo. Nope, nope. Okay, this one, perfect. And this one as well. Try to get something good. Maybe that, not really that. Okay, this one, perfect, perfecto. So now what I can do as well is simply, you know, this one, remember, photo blur. So what I can do is copy paste this one, put it down, then 1, 2, 3, 4, because, you know, remember, there is the little indication here. Then what I can do is simply look at that. Same, that's the same. Do the same here. So 20, then 75 here. Whoop. Oh, 70. My bad, my bad. 70. Remove this one. Here we go. Perfect. Looks awesome. It looks awesome. Same here. Copy paste it, drag it down under it. Oops, whoops, what happened there? 2, 3, 4, then 70 and 20. So 70 here, blur 20, and voilà, perfect. So now we have different photos. I'm just going to Save it. Ctrl+C, Ctrl+V for the 2. Shift to select the 2 one— I mean, the 2, the 2 elements. Then you drag them, keep Shift, you drag them both down until 30. This one already 30, and then you have it. As easy as that. Then you can like it, and you see here, you switch screens and you still have them here. Perfect. And you still have the stories. Um, yeah, let's just— well, maybe it's too long, I feel like. So yeah, that's all for now. It's kind of like the designing, uh, I don't know what to call that, designing Instagram redesign or designing a social media platform, just improving, working on the prototype. It's not really working on the prototype that much, it's more working on the overall design to keep something the same pattern. Um, I really like this, it's pretty cool. If you want more of that, you can just, um, let me know in the comment section. You can share it with people that you feel like will have value from it. And if you have value, please look at the description, you have more info on everything, and leave a like. Thank you very much and see you for the next one.