6 Things you SHOULDN'T DO on your Portfolio

hey everybody what's up Gary Simon here so today we're gonna be checking out a very quick personal list of six different things I think you should not do on your personal portfolios whether you're a designer and/or a coder alright so as always make sure to subscribe and let's get started before we begin this video sponsored by Dylan oat now as a front-end developer or a designer you know that you need a personal portfolio and if you use a website builder like wicks or Squarespace they lack total customization and they lock you into using their platform but to be a pro you need to use the tools that the pros actually use so level up start building your own projects and your own portfolio on an enterprise level content management system like WordPress there's Drupal now real web development sometimes requires knowledge of spinning up servers managing domain names and setting up an occasional staging environment and there's no better or simpler way to learn the ins and outs of hosting your website then with Lenovo out hosting the note cloud hosting makes it as easy as possible for you to deploy a WordPress or Drupal website in seconds with a freely note one-click app marketplace so click on the very top link here in the YouTube description to get your free note account along with $20 of free hosting and all the tools that you need to build enterprise class websites all right so my very first thing that I want to demonstrate as to what you should not do if your you have an online portfolio is giving me nowhere to go which is the case here there's also another a side note which you also should do you know I'm on a 4k resolution right now this is real small text a lot of white space really it should be about this big about 175 so make sure your media queries make sense and they work at all sizes even the very large sizes as well but this really my main concern is just it's not giving me anywhere to go you know I shouldn't have to scroll down I shouldn't have to look over here and notice that there's a lot of you know there's a lot of vertical space that I can scroll that's not good enough you need to give somebody you know a place to click and even just as important as that is if you do give somebody a place to click make sure you're giving them relevant a rel choice or a relevant direction the correct direction for instance take a look at this example this is a web developer contact me nobody is going to contact you before they first look at your work and also before they first learn more about you so contact you probably shouldn't even be there in terms of the hero section and your call to actions I you can have to call to actions one should be primary for instance one that says check out my work or look at my work or whatever and then maybe a secondary for contacting or learning more about that person or you know a place to learn more about me but contact me that shouldn't be it they're gonna want to see your work first alright so for the next thing that you should do if I scroll down here we can see we have like an achievements section and this person in particular is like info security guy and I was very confused as to what this is so I hall-of-fame whatever that means Dell MasterCard expressvpn these are big names obviously if I click on it it just kind of highlights it and nothing happens so there's a few things wrong here so I I actually talked to this person I who runs this website and this is their portfolio and he said these are actually the companies that he's worked for in terms of security or finding bugs or whatever and that's awesome that's massive but just to have their names right here that's not enough what I told me should do is to provide context I and I see a lot of this even in design portfolios people will have I you know maybe a little thumbnail of a website but they did there's no more information the like you click on it nothing happens or it just shows you a screenshot of it know what I told him he should do is first use the logos don't just put the name people are gonna recognize those those logos and immediately that's it's gonna boost I the the overall impact that it's going to have on a potential employer I and second provide a little bit of details about what happen or what did you do how did you help this company in some way shape or form don't just put the logo or don't just say the company name provide context people are definitely going to want to know what you did exactly for that particular brand you don't have to be specific I but you can at least have a few sentences I you know do you know ting what it is that you actually did alright so I think that's hugely important raise this up there we go so and it's the same thing all the way across there here so that's definitely one thing that you want to avoid include more information ideally you want to have case studies and I'll get to touch on that a little bit in a little bit so next up I see this one all the time progress bars progress bars for skills now I you have to put yourself in the mind of a potential employer and think about what they're going to think when they see progress bars they're gonna look at they're immediately going to look and see which one or which of these things you're the least proficient at just because they're going to be curious what is this guy what does he suck at the most for lack of a better way to phrase it in this case I guess it's JavaScript and what if you need somebody who's really good at penetration penetration testing but sucks at JavaScript so what what this is doing is essentially you're you're being almost a little bit too honest I'm not saying to lie but I don't think you should do it this way all right so i i'm a proponent and others have as well i've been outspoken a proponent of dropping these progress bars so if you want to let's say for instance i in this case he's not very good at javascript i wouldn't even mention javascript and I certainly wouldn't show about the fact that maybe I'm like a 5 or a 6 out of 10 or whatever I I think what you should do instead is to emphasize your strengths all right don't talk about what you don't know or what you don't know very well emphasize the strengths as much as possible and make those really stick out and then if you do want to mention the fact that hey you do know JavaScript don't put it out in in in this sort of I use zero to ten sort of progress bar format don't do that just just mention that you're pretty strong and pretty solid in JavaScript and that's all you need so don't don't do this sort of thing ever again next up lengthy about me sections especially before you actually allow the person to see your work or your actual portfolio examples I know this is kind of like a nitpicky thing but I've seen it a lot where people will have their hero section you know I'm a UI UX designer maybe I'm a coder I'm a back-end about whatever and then you scroll down in the next part that you see immediately is this real lengthy about Me section nobody wants to read multiple paragraphs before they are able to see your work alright so the main thing that's going on in the mind of a potential employer is going to be I want to see the work that this person is capable of producing if you're a designer they of course want to see your design work if you're a coder maybe they want to see I get hub links in actual real live projects or live web sites and apps and stuff that you help develop I they don't want to have to scroll past this that's this it's just an annoying annoying sort of thing fortunately for this example they actually did it correctly I they have the here section and then they have the portfolio and then this I but I've seen people do it the opposite so that's why I say this is pretty a little bit lengthy don't do that right out of the gate show the work first next up I'm going to show you ugly portfolio thumbs or thumbnails so I would consider this pretty ugly because you have a strong white like maybe three or four or five pixel border around each one along with a subtle glow and that just does not look good I and also outside of that I also think that some of the the thumbnails themselves could definitely be improved so instead of just showing a screenshot of maybe the main part of the app I think a good way to to counter that is to show perhaps some of these more like this example interesting ways to show it like I'm sorry that was a really bad verbiage there you should show it perhaps in if it's for an mobile app show into phones showing them the perspective skewed like this diagonal approach is really cool along with the logo it just makes it look a lot more professional when you do it as opposed to just showing a straight-up screenshot especially if the UI might be ugly especially so I you could just tell right away the quality of these are a lot better than the quality of this right here so pay attention to how you're actually listing out your thumbs additionally and this is going to be my final tip and I don't have an example here I'm just gonna talk about something crucial and so I've seen many different design portfolios I've probably reviewed over thousands of them I and I've seen so many that are so ugly and there's a debate that designers and developers have should you ever use a template for your actual portfolio and I'm gonna say yes if you can't design really well I think it completely stands to benefit you to use a template so especially especially if you're a coder maybe you're a front-end developer who's not a UI designer maybe you're a back-end developer obviously you're not a designer in that case maybe you're an identity designer you're really good with logos but you're bad at UI design because let's face it these are two entirely separate different things I in those cases yes usage certainly use a but or hire somebody to actually design your UI for you I otherwise if you try to take on too many hats then you spread yourself so thin and you get yourself into an area where you have little experience in and then you're completely just you're you're it's a buzzkill when a potential employer comes to your site and sees this ugly horrendous thing even though yes it came from the heart and you tried your best but you're gonna hurt yourself in the end you're going to get less clients ultimately if you're working with a UI design that has bad UX as well hard to navigate and just doesn't make sense and also ultimately just looks ugly so always use a template if that's you know that type of scenario where you're a friend of developer back in developers you know anybody who's not a UI designer but if you are an actual UI designer should you use a template for your portfolio my answer for this is no and the reason being that's what you're offering you're offering to design somebody's UI for you you're not just a friendly developer who may strictly work in the realm of HTML CSS JavaScript etc you're somebody who's actually going to do at least the UI design in Adobe XD figma sketch whatever so in that case yes you need to design your own portfolio and because that really ultimately that's going to be it's going to reflect your quality of work your your portfolio itself now if you get to the point where you put up your portfolio and maybe six months down the road you've gotten quite a bit better but your portfolio still sucks well then you guess where you have to revamp your portfolio to make sure it matches the skills that you're putting forth in your other projects in your portfolio otherwise you're going to be selling yourself short right out of the gate so if you are new if you're new to this you're new to UI design and but you're also trying to make money doing it meaning you need a portfolio site the best thing I could say in order to help you design something that's as great as possible you well practice I mean you have to practice all and you have to get the UI design fundamentals down as much as possible practice practice practice take my course on screen but there's an hour-long free one it's also on my youtube channel I have so many UI design videos you know outside of that and there's also my long UI design bootcamp on scrim bow as well which I recently launched and that's over nine hours long so practice practice practice practice and also take a look at examples that exist I on the Internet in terms of great UI design portfolios you can use those as inspiration when you go to build your own of course that doesn't mean copying but the greatest way one of the best ways to get better is to recreate what others have done as just a matter of practice I have a video on this as well as a way to get better just through a practice project not a lot of live project for yourself or a client not a portfolio just a practice project to recreate really solid good well-designed UI UI is essentially alright so hopefully you enjoyed that list of 6 things that I think you should do on your portfolio if there's some things that I left out I'm sure there's many let me know what you think in the comments let me know if you disagree with anything I said of course and as always subscribe I'll see you soon goodbye [Music]

Channel: DesignCourse

Views: 90,899

Rating: 4.9323382 out of 5

Keywords: ui ux, ui ux tips, portfolio tips, design portoflio, ui design portfolio, ui portfolio, ux portfolio, examples

Id: zIGoqlw_tMQ

Length: 15min 2sec (902 seconds)

Published: Tue Jul 07 2020