7 Tips for a Better Design Portfolio - WITH EXAMPLES

chances are if you're a relatively new designer your portfolio probably stinks but I'm here with seven tips to help you correct that situation hey everyone what's up Gary Simon here so today I'm going to be going over seven tips to help you make a better design portfolio and specifically speaking I'm talking about the area in your portfolio where you're listing out your projects so usually people will do this in the form of thumbnail galleries but really this is where my tips are really focused on trying to help you get that part better and also how to showcase your project so they're not so boring and bland and this can really improve your chances at getting hired either by an employer or by a client so as always make sure to subscribe if you haven't yet and let's get started before we begin though 'la note the sponsor of this video makes it easy to host your site your app or service on whatever technology stack you use with one-click apps like wordpress drupal getting up and running is easy with back-end access to your server customization options are all but limitless a fully configurable dns manager allows for you to easily switch or to name over to your new server and ssl certificates can be installed for free using open source tools so sign up using the link below to get $20 in credit on your new Lunada count framing your designs so here we can see an example of three and different portfolio projects laid out in a gallery thumbnail format now right now these aren't what I would call framed at all you can see there is a background color that is slightly different and this can make it a little bit difficult for the user or the potential client or somebody who might hire you to distinguish between these two projects I've seen a lot of times in my live review I people laying out their gallery thumbnails like this with the examples that have the same color background like white for instance so instead you can do something like this which will really help separate out the designs and sometimes people even add in different design elements into the background itself just to make it a little bit more interesting now here are some examples of this practice here in the real world we can see the design has been laid out here with a gradient background in a subtle shadow same thing here and same thing here in this example the Vice mock-ups so one way to give your UI designs context is to feature them on an actual device of some sort so if you're designing for tablet you can show it with an ax tablet like here in this example and this isn't a requirement it's just one thing you can use in your presentation arsenal so to speak in this example we can see a high fidelity phone for a close-up of the actual mock-up and one thing I've been noticing recently though our designers who admit the physical device from the mock-up but instead they're rounding out the corners and just featuring subtle elements of the phone like this cutaway example at the top featuring your animations so if you created an interesting animation in your UI you should definitely feature that animation on your portfolio here's a flutter example and here's a website example now you may be wondering yourself how you can achieve this if you don't know anything about video well if you have a few options the easiest is to use a screencasting tool to record the animation or interaction taking place as you use it so whether you have a live example or a prototype example you can record the screen as it use it now another option is to use something like Adobe After Effects to create the animation from scratch positive - this is the animations tend to be very smooth but the negative is that is time consuming and there is a learning curve another option as shown here is just to take an actual video of yourself using the actual project embedding your prototypes on your portfolio site now if you use Adobe XD or figma you can embed the prototypes you've created on your portfolio site now this is awesome as it allows your potential clients or employers to use what you've created so here's an example of an XD prototype that is embedded on this website up here and here's the info page at figma comm with information about embedding your designs on your website floating UI elements now when I say floating I mean taking a given UI element like this as seen here and extending it outside of the perceived device this can provide more information about a given UI but also makes the project preview look more interesting providing more info about your projects so a scene here like in our first example we have three different projects in a thumbnail gallery view and one thing that's common that I see a lot of designers do is simply showcase the actual project in like a lightbox example like this ideally we'd provide more information about the project like in this example in this example we have a full presentation at the top and then we have more information about the client and you can provide more thumbnails and just different looks of the user interface prospective UI designs when users are using your UI designs whether it's on a desktop monitor or a handheld device rarely is the UI design presented in a perfect 90 degree angle one way to reinforce this is to present your UI designs in different perspectives [Music] now here are a few ways to get device mock-ups so one option is go to dribble calm and do a search for the type of mock-up you want here I've typed in perspective mock-up and this gives me a list of a bunch of mock-ups now some of them are paid a lot are free so just you know take a look at the one you want and see if there's a free option or not another thing you can do is go to behance and do the same exact thing the handstand dribble sort of competitors you can see all these three different mock-ups that they offer here that other users have created there's also paid options I prospective mock-ups comm is an option and also one of my previous sponsors yellow images comm they offer a lot of 3d based mock-ups that you can use as well so if you want to learn about creating UI animations for example in after-effects obviously you can go to YouTube just type in something like this UI animations tutorial and after effects I have a lot of awesome tutorials here that you can learn from here's two of mine actually right here like creating sleek UI animations and After Effects CC 2018 this is I over a year old but it's still relevant and also there's something called mock-up frames calm I featured this in this tutorial as well right here where I show you how to use it but basically it allows you to upload a UI I prototype animation of some sort and then it will allow you to place it in a perspective phone mock-up there's a lot of different options if like iPhone Android PC and web and then it'll allow you export in mp4 move I gif png frame rate all that very cool stuff alright everybody hopefully you enjoyed that if you did make sure to subscribe as always and I'll see you later [Music] I'm this this isn't gonna be in the video so you don't have to make face I'll cutting it out trying to get my hands right [Music]

Channel: DesignCourse

Views: 65,631

Rating: 4.9452887 out of 5

Keywords: design portfolio, better design portfolio, portfolio tips, design tips, ui design tips, ui design, designer portfolio, web design portfolio, dribbble, behance, ui ux, ui ux portfolio, ui ux design

Id: lPGM-GgIqmo

Length: 8min 28sec (508 seconds)

Published: Mon Nov 04 2019