How to Design Beautiful Mockups

on today's episode i'm going to show you how to make beautiful mock-ups for your projects in your portfolio and it's way way easier than you think let's rock [Music] hey designer friends what is up so today i have a rant with you together with like a technical uh practical tutorial and the rent is this there's nothing that pisses me off more than going into a designer's portfolio and see that they just paste the screenshot of their work this does such a huge disservice to them because the way that you present your work makes you know makes the whole difference between whether i think this is amazing work or whether you know i i don't i don't care about this and i just scroll on the presentation the book cover matters right what's in the book matters but the book covers matter and so the way that you present your work on your portfolio is super important and never ever just paste a screenshot of your work so i want to show you a few practical things that you can do to make the presentation of your project in your portfolio better and there's basically two things that i want you to remember i'm just going to show some practical tips but the overall thing that i want you to understand is there's two important things when you are creating mock-ups or presenting your work and that is number one context like this thing that i'm looking at right now this image where does it live right if it's a website does it exist in like a computer or a browser if it's a mobile app does it live live on a you know give me a context of what this screenshot is i don't know that just because it's a rectangular it's a mobile app give me the context and then the second thing is depth right we love when we look at physical things or photography the world is 3d right there's shadows to things there's lights there's perspective nothing is really flat and so when you paste an image that's super super flat on the screen it just looks unnatural right it doesn't look like the real world so let's go here and i'll show you like a practical tips so here's let's say i've done this project and this is a screenshot from a video that we did last week about design mistake which if you haven't seen you do this and by the way are you subscribed to flux if you want to become better designer and make a living as a designer so make sure you're subscribed and liking this video so here's like two design examples if i'm just pasting them on my website it looks it looks really really crappy so the number one tip is as i've said right if you want to give contacts to things so if this is a website it lives within a computer and if this is an app it lives within you know a mobile phone for example so the most most simple thing to do is go on google and write something like macbook png and then you'll get just like a bunch of devices right and so if you click this you see that it's a png because it has this checkered background i'm just going to copy it and i'm going to paste it i'll start with figma but then i'll show you why i'd like to do this in photoshop now just by doing this and giving this thing a very very simple context bam it already looks so much better because now i understand oh this is a website right this is something digital that i see on my computer it's not like a poster right because it could have been a poster it could have been something else now i understand oh this is a website that i'm looking at now why am i going to show you this in photoshop as well because as i said things are things are need some kind of a depth right so i'm going to copy this thing and i'm just going to go here in photoshop and i'm going to paste this let's say this is my mockup and i have some space here and let's say the background for this website is white right so i have this again it's a little bit flat although we have this image so there's two things i can do here number one is add a little bit of shadow right because things in real life have shadow very simple way i'm gonna select elliptical marquee and just going to do kind of like a little circle and i'm going to fill this up with black so now you can basically see i have this rectangular it looks like a shadow i'm going to put this below here i'm going to reduce the opacity just a little bit right so it's not fully black and i might also go here into like filter blur like gaussian blur which is the classic little bit of blur and now you see this looks much more more real right because it's here it's got a little tiny bit of shadow so that's one way to add a little bit more depth and realism into it one more trick that i like is i can go ahead and you know merge these two things actually let's do these two things and duplicate them and then flip them around so basically flip vertical so now i have this website in a laptop and a a vertical flip of it why is it cool because i can put it right here at below it and then i can mask it right so i'm going to add a mask and do a little bit of a tiny gradient mask here let's see that we have black and white gradient and just going to mask it a little bit like this and reduce the opacity now this creates the i'm going to reduce the opacity a little bit this reduce this creates the illusion that this macbook is now sitting on this kind of like a plexiglas or this kind of like where you do product shots or something like this and by the way sometimes i might do the shadow and reflection at the same time now look this looks wow considering if before we just had this image bam now this looks so much more impressive and gives the work the actual presentation of where it can be let's copy this and bring this back into our website and now this is just one example right there are another there's a gazillion other very very cheap and even free ways of doing this right there's this website called startup stock photos you can find here photos of devices and then you can go ahead and plant maybe your website within an actual computer or of course you can go into unsplash or something cop right laptop and then you'll have some more laptops and again very very easy right i can take this thing i can copy that into photoshop if it's a free image i can take the design only the design itself and put it here and then i'm going to just give it a little bit of perspective right so i'm going to use free transform which is basically means i'm going to be able to grab these corners uh by hitting the command while i'm dragging it in free transform mod and then i can just put it here in some kind of perspective and it looks like it's on the screen right i can do this better i can even go ahead and add some kind of a shadow tiny bit of shadow so that it looks like the lighting match the lighting in the actual image and now we have this very nice mock-up right so let's see how that looks within the website so of course you can decide on what is the art direction that you want for your website whether you want it to be flat or you want this to be kind of like a full-on image you can choose but whatever you do just don't just paste up the photo and of course the same thing we can do for mobile design we can go ahead and paste this in a device but there are gazillion other ways right actually if you just go on google if you want a little bit of inspiration and you crit click you search for something like mock-up website you'll see so many things if you go to images so many ideas that most of them already include the concepts that basically i covered right there is context right it's on a desk there are a little bit of plans and there's depth there's something before there's something afterwards there's shadows all of these things even this one which is very very simple it doesn't give context but at least it gives a little bit of depth and all they did was to give a little bit of perspective a little bit of shadow and things look like um you know they going behind but by the way putting things behind and afterwards to give depth i love this you know i love this thing if we even go here and we do a little bit of drop shadow and if i had another screen here of the app right i don't have right right now but if we had another screen here this already looks better right because there is some kind of composition and there is depth behind them so everything here is much much is not as boring as just pasting your artwork so remember these two things context and depth and use that when you're doing client work when you're doing your portfolio don't ever just paste jpegs or screenshots in your website i hope you found this helpful i'm excited to help you become better designers so i'll see you in the next video peace out [Music] you

Channel: Flux

Views: 5,882

Keywords: become a graphic designer 2020, freelance web designer, graphic designer job, ran segall, web design, web design business 2020, web design freelance, web design freelancer, web designer career, web design 2020, flux academy

Id: 09g2FUVt6PM

Length: 9min 45sec (585 seconds)

Published: Thu Nov 25 2021