Creating Killer Design Portfolios from Scratch

hello everybody already got a fair amount of people in here how is it going how is it going everybody adroit sheesh what's up in the ball Nabil no deal what's up JD yes hello as if we weren't already talking all right so today is a different type of stream we're not doing the same thing where I run through a million different designs today I'm probably only gonna have time for two that's it but we're gonna be working from scratch and I want to look at specifically portfolios portfolio designs that people have submitted in my discord server you can go ahead I already know which one I'm going to start with some is something somebody submitted previously and I'm gonna start by redesigning their portfolio from scratch and then I'm gonna take another one based on somebody who have submitted here already in my discord server so the discord server link is linked in the description here in youtube so you can just I come here and if you're a first-time first-timer in my discord server you'll be in the role section you have to click one of these emoticon reacts and then you'll gain access to the feedback forum where you can submit your design here's the thing there's a bunch of people who already submitted their portfolio URLs the chance is that I'm gonna you choose yours pretty slim but still I there's a chance I could choose it if I think there's enough for me to change and to teach I and I'll be doing this off-the-cuff by the way at least for the second one I have an idea of what I want to do for the first one and so yeah that's what we're gonna do we're just gonna basically just take a look at the UI and some UX considerations of your design portfolios I'm gonna try to help make them a lot better at least in the a couple examples that I feature here you can't send a super chat if you want if you send a super chat I will try to delegate a few amount as some sometime at the end where I will do quick by other portfolio or design reviews anything you design I'll review in my typical fashion but you have to send a super chat and mention your discord username so let's go ahead and get started alright so the very first one that I want to get started with is by a user called Nazz in my discord server actually I wonder if this is it yes this is the one sown as I know you're watching because you just submitted it again this is NASA's I portfolio so he's a web designer and web developer you can see that I pretty simplistic but there's a number of issues that I've identified and I want to redesign this at least just this top portion of course there's a lot more content going down here but I'm going to redesign just the you know the desktop above the fold portion up here and identify problems I that at least from a UX standpoint initially here and also from a UI standpoint so I'm gonna redesign this and first of all I who've been watching me in the past known that when you're I've always advocate when it comes to menus on desktop you don't want to have the whole hamburger icon menu situation going here when you click this you can see he has six different links that's enough that's not that's not a ton of links it's not just a few but it's in that that medium range where I you definitely have enough room to put those links on the desktop so this this requires your users are your potential clients to have to click here just to see what the navigation holds so in terms of UX that's that's not a good pattern it's understandable if you're coming out here at you know a mobile resolution you don't have enough room for all those links so that's a more acceptable pattern but not on desktop that's a that's one of the things we're gonna change we're gonna change this a lot actually we can see is the headline the primary headline is stylish app and web designs well what I want to see is a stylish app or web design that's what your client your potential client is going to want to see and they you should show it right here because you have all this space especially on desktop to show some sort of depiction whether it's literal like an actual screenshot of a stylish app or web design that you created before in the past or more of an illustrative concept and I think that's gonna be the route we take we can see there's some design elements like this little pen graphic here I the color kind of clashes especially with this this bright green and the gray here I don't think that's effective although I will still implement this idea in a different manner that's more effective at least in my opinion and we have some other just elements here like the circle graphic and this little element right here I think we can we can work all this stuff in and make it much more effective from a UI and UX standpoint so let's go ahead and get started so what I'm gonna do is just push this off to the other monitor you're not going to see it but I will bring it back and forth periodically just so you can get an idea of you know what I'm changing up here so let's go ahead and do this wow we got 300 people here it actually helps to change up your YouTube I titles apparently so he did use a a gray background so I don't want to change this up so it becomes a completely different design I want to keep as much of it as possible just so we can still work off the same concept I get out of here what are you doing why can't I move this over okay there we go so we're gonna take this and we're going to make this a grey background a very light gray like um I'm gonna do f7 f 7 f 7 I think there we go so it's a really light gray and we'll just add that to swatches and we're gonna put his name up here like he had before that's totally acceptable for a personal design portfolio and they're the actual you just having your name where the logo would usually sit that's fine so I Nazz miss ash Ravi I I can't even pronounce it I'm sorry dude he also had a rounded font for this so let's make it [Applause] we're gonna I know you can't see it right now let's make this bigger I he had a rounded font I'm gonna reuse new neato which is my go-to hundred font these days there we go and just right around here sizes like thirty three position it right there so here's what his was he's using a really bold and really heavyweight sort of rounded font it especially for the headline it's actually kind of hard to read it's so bold so definitely gonna tone it down a notch there I'm not going to include the web designer and web developer tag line or the slogan or whatever right here just because I think it's unnecessary people are gonna understand who and what he is just based on the the ad cop here the headline right here anyhow so we can get rid of that at least so we're gonna put this right here we're gonna duplicate it and we're gonna work on that right here I sorry I'm reading the comments right here so I'm gonna put in his navigation so the navigation links again his is in a hamburger menu format I we're gonna make them we're just gonna show them all at once because that makes much more sense so home about by the way in terms of a UX perspective the home link alright there's been research done on this and you should all you should have a home link in your main navigation you shouldn't just require people to rely on clicking the logo to go to home people want to see a home link as well it's just an interesting tidbit so we got about sorry guys I can't read all the comments and focus on this as well so I periodically I'll try to look back at them services I probably should look at them okay somebody's being ridiculous I have to get them services iportfolio I also I should look at them in cases or some type of technical issue like nobody can hear me anymore or whatever and in contact so it's take all these now right now in terms of visual hierarchy these are exactly styled the same as the logo the logo should really stand out the most so the way we can do that through design here is a number of ways first we can make it regular second we can take the scale down there we go and third we can change the the color so maybe we'll work within the same blue but we'll desaturate and make it darker let's also get this blue here and add it to the swatches there we go and just take them move them over and okay looking at his let's bring this back we have this dark mode switcher okay so that's really quite prominent I mean look how big the dark that is toggle button is in contrast to the actual logo it's like so much importance has been placed on this because of the scale in the location that it doesn't really make sense this should be more of an afterthought tucked away maybe at the end of the navigation on the upper right so that's what I'm gonna do I'm gonna take this I'm gonna redesign it because it's there's a little bit too much happening here I I'm gonna make it much more simple we're gonna put it right over here in this section all right so let's go ahead and do that so what you do to recreate that is take a rectangle tool let's drag out or nice rectangle and we'll get the border radiuses here and bring them all the way in and then I'm going to get the border I really don't like thin high contrasting borders like one pixels or one point large because it makes it look just I it just makes it look cheap and I just don't like that usually so that's a little bit of a subjective preference there and instead of making it white which we could barely see it because the light gray background we're gonna make it a little bit darker than the current background color so we'll just go like this very subtle very light and then I'm going to take a the ellipse tool hold shift and alt get rid of that border might make might want to make this a little bit darker all right so now I'm looking at the size of it and maybe even scale it down just a tad bit more you know ultimately you would have to play around with it like I'm on a mock-up or whatever a prototype and just to see how big or how large it feels but certainly for a desktop it's fine you know in that manner so there we go so that's how I'm just going to treat this navigation so we've gone from if I can find the design we've gone from this so far just look at the the upper portion to this right here so if I if I just hit play we could see a larger version I think this is more effective so now let's continue on here and look at let's see here look at his original design so what he has his stylish app in web design so that's fine I'm flying with that ad copy it's better than just saying I am a web designer or web developer that's that's kind of boring everybody says that or a lot of people ideally when it comes to ad copy and this kind of this goes back to more of a UX perspective I you want to use ad copy that emphasizes the benefits over the features in general so the feature is that you're a web designer or web developer a graphic designer or whatever okay people don't really care about that they want to know how you're gonna benefit them so I something like stylish app and web designs kinda is more of a feature but you you really want to emphasize most importantly you know how you can benefit in them so coming up with good ad copy is is it's it's it's it's an art itself I in its it's a skill you have to understand marketing and I behavior in and also it's one of those things where you would want to do usability split testing with this just testing different headlines to see if they result in a higher I objective of some sort so if you if you want some people to click on something if that's the goal or if you you know you want to increase the amount of people contacting you or if you want to you know you want people to scroll down you want them to stay longer on the site you want the bounce ratio which is the you know the time it takes I for people who who exit the the you know your website if you want to increase all those things you have to do split testing and there's a whole methodology on that as well and I may be creating an actual series on that I'm gonna I'm looking for sponsors for that and usability split testing sponsors okay so stylish app and web designs you want to see a stylish app in web design I that's what I would want to see if I was a potential client I we want to see please we have all this room so that's what we're gonna do we're gonna keep this this headline but we're not going to make it the focal point of the sec of this page we want the work or some sort of graphic to be the focal point all right so i it's going to be stylish app and web designs okay so let's make this large wrap ralph i I do have a video I have one video from five years ago i back in 2014 of the importance of split testing you can I just look at it it's an old video though I definitely am going to be revisiting that topic let's make this bold by the way all right so I already yeah I like this color we're using the same color as the navigation up here it's pretty large when I'm designing sometimes I experiment with the placement of the words and stuff I actually kind of like this plus if I put this on a second line and web designs it's going to free up a lot of space here to put in some sort of illustration or example of a stylish app or web design so let's go ahead and bring that up just a tad alright and I think maybe I'll increase the size slightly right there all right so I think we could also have enough room to put in maybe a sub-headline a small sentence or two so I'm just going to put in I something relevant to maybe expand on this headline I helped deliver the crap what am I going to put I helped deliver a a great user experience that looks stylish okay that's so stupid I would never use that but I'm I'm not really thinking right right now my mind's going a million miles a second you get the point I could have just put lorem ipsum text in there I something like that right there so the size is 31 the size is 68 it's good separation between these two I in terms of design so that we can really establish that hierarchy I'm also going to put in a call to action here so he had a call to action on the previous design which is right here it's this little scroll indicator I think instead of having that if we give people an actual direction to click on maybe a couple buttons it would be more effective so what we'll do is I will put in a button right here and we'll get rid of the border we'll make the button color this is going to be our primary call to action the same blue here so really we're just reinforcing those same colors here and I think I'll yeah just maybe a slight border-radius again a lot of this a lot of what design is is subjective subjective preferences but I try to focus on only tackling what is objectively right or wrong when I teach and it's hard sometimes I do let my own preferences get in the way I'm gonna put in see my work so this would take them to the portfolio section I were they actually because that's that's gonna be the first thing that a client would want to see they want to say what is this person capable of I want to see the work he's done now again that's an assumption on my part I you would want to test this ultimately which is a part of UX design and being a UX designer so let's go ahead we'll bold this up and depending on how much space we have left these may be a little bit too let's see here too wide for the second one um we'll make this one I'm not sure he has like a skills link look at my skills I don't know see my work and look at my skills I think we'll just go with that for now for this button you really don't want to get when you have to call to actions like this you want to emphasize one more over the other because obviously when it comes to information and displaying content and objectives there's always going to be one that's more important than the other the one that you know a person's gonna want to see in more the most so you don't want to have to design the button in the same exact manner I you want to separate them visually and you want the one that's most important to stick out the most alright so we need to de-emphasize the importance of this look at my skills button so to do that we can just make it contrast lest you know we could do something like this I of course we would change the foreground element to be darker if it's light we could go all the way white and take the white text then and make it this color here and then maybe also make it regular so that's something we could do you just barely see the button container that's fine I don't know maybe I might want to change this to more like a that could work so a lot of its subjective so we have this here and now what we'll want to do is over here put in some type of depiction of a stylish app or web design so for my thoughts let's take a look at what he has by the way it's go back and see this so here's what he had alright this is what he has so far and this is what we have all right so we're already starting to work this up quite a bit but the focal point we want to put in i some sort of stylish app and web design and again this could be literal or it could be abstract or it could be illustrative I'm gonna take the illustrative approach just because I don't want to go on and try to screenshot somebody's design or something so we're gonna do like an illustration a very simple illustration so I'm gonna take the rectangle tool let me check the the make sure everything's going fine here with the I do YouTube chat alright everything's fine now alright so what we'll do is let's see here I think we're gonna put like a mobile phone I type of viewport and let's take the fill to get rid of the fill and give it a border maybe thicker maybe around yeah seven could make it white or very light um let's do I'm going to duplicate this I'm gonna give this one a OBE I the way we have blend modes now in Adobe experience design they just released that update like a week or two ago those work in some color here so I think I'm gonna try using the new blend mode feature alright take this we're going to make it white and I'm going to right click arrange and send to bring to front okay I'm gonna duplicate this one kind of like get it pushed over here I'm gonna try a different color like this and let's play around with the blend modes so darken that's kind of cool so this is going to be a more of like an abstract representation of like some sort of interesting stylish design stylish I think of colorful or possibly that could that could relate to that idea and you can play around with other ones like what's multiplied that makes a little bit darker in the middle color burn nothing lighten so I I think I'm just going to do darken and I'm gonna put some just like kind of a skeleton UI filler in this middle section so I'm gonna take this get rid of that border that's ugly there we go there okay so just trying to get the thickness right duplex um paragraph or something here take these two replicate them maybe maybe right here I'll put like a placeholder image and this time this one will be like it'll have a border no fill it'll be white I think we use well we'll go around here possibly we'll take in the line tool make this white increase this well maybe I'll leave that like less thick what we'll see duplicate it put this up here not sure if I like that don't worry I I'm gonna make it look better and then I think I don't know maybe we'll put in like a button or something here so you know what I really wish Adobe XD would remember your previous stroke and fill settings like like why why did they do that very frustrating okay I'm not even sure if I like these right like that what is this this is what does that stroke with nine okay so this is seven you want to make sure all your strokes are pretty much even I kind of thing spaced out here just a bit I'm going to take everything in here deselect that I might make these a little bit there we go just trying to get a little bit more white space around the other elements so that they're pieced out a little bit further maybe I'll put this down here I want it to really be pieced out more take these three duplicate them I push this down in what would be really cool is if you had like an actual I SVG animation where maybe this content right here was kind of flowing up out of the viewport and maybe new stuff was coming in there's a million different things you could do with SVG animations so that would be really you know a cool thing so let's take a look at what he's done we're almost done with this one um the original right here he had some small elements like this little circle graphic in this little star element and this pen I want to work that in as well but just do it in a different manner so let's do a pen what we'll do is get the pen tool and by FISH aliy it's always easier if you have something that's symmetrical like a pen or something to do it vertically first or horizontally so it's going to do shift here make sure we line up with the starting point i I'm holding shift here to get to 45-degree angle we'll do the top of the pen there we go and then come out right around here and there we go we're gonna make it bolder and for now we'll have at this a little bit of a higher contrast I want to work in kind of like a similar shape this isn't perfect though let me see here actually it doesn't have to be perfect but that's fine and then we'll take the pen tool I think his was pretty similar to this one we'll do seven round end cap we'll take this and push it down duplicate duplicate duplicate this I'll let her push this one down a little bit more okay now this is contrasting way too high so what we'll do is take the border or yeah at the border element and make it more of an afterthought because we already have some you know a fair amount of stuff that's happening here oops there we go let's make this a group maybe we'll push this up and he also had some other elements here let's see let's take a look at the oh god it did not mean to hit my damn email no okay good I could just do that I get so many such spam I just didn't want a bunch of like nasty poor damnit adult emails are like showing up because it gets banned so much all right so I what we'll do is I can't believe I just like showed my emails on there they're probably all spam anyway he had some other elements right here like the this little element in that element I'm gonna work that in here so mother-effer what we'll do is I'm gonna work in kind of like a similar idea like the little star icon there's gonna be like plus icon seven yeah and then I don't even care and then we will where's the rotate I thought I could rotate this why can't I rotate this that's freaking annoying I don't understand what is happening do I have to rotate it up here I thought there was like a rotate option I was how annoying 90 degrees there we go alright and again we want to use like the same color so same border color and we can work these in just randomly depending it depends on how many you want you know whatever I placement of these things it's kind of important because it can throw things off a little bit if they're not placed correctly I think these are all this stuff right here is standing out a little bit too much so I want to even drag them down in contrast a little bit more so there and then you could even do more stuff I mean you could add polygons if you wanted to I mean you don't want to go too crazy though so like we could do a triangle we got a border here again you want it all match up of course Adobe XD doesn't remember for some strange got off a reason they never work that in you know what are you gonna do maybe make these a little bit larger there all right so that right there is the redesign so let's take a look at the first one this is the first one and we changed a number of things we got rid of the tagline don't need that we changed up and got rid of this I there's a gradient on here which I don't think works well we got we changed this up we we showed the actual navigation instead of having the hamburger menu and we made in actual you know design that you know a stylish a poor design of some sort depict it in more of an abstract manner so we hit play here this is what we came up with all right I hope you guys think it was a lot better I think it would perform a lot better as well so how long have we been doing this 32 minutes that's almost perfect all right okay all right so let's take a look at other people's submissions here there's probably a lot of them and so the one that I choose is going to be the one that I think I can do something with in the limited time that we have it so if I don't choose yours it's it's just you know it could be because I don't think there's enough for me to work off of or whatever or it could be I just hate you that could be a - I don't know now I'm kidding I don't really hate anybody in the discord server people I had to just get rid of so this one I kind of like the colors here this is an effective use of a photograph background it's really squashed out as a watermark as it should be you can really see what's up here I think this is a little bit funky right aligning these two things I I understand why I did it but I don't really think I could do much you know with this particular example to really drastically improve it so we're not going to do that one oh that's the one we just clicked this one looks pretty good I'm looking off on my other monitor by the way here's one that I think we could probably improve quite a bit I so i asus just a a word mark for his name is is an initials passionate programmer you know we might actually work with this one there's a number of things I'm noticing it's kind of wrong you say say hello and then contact me it's like the same thing right contact me and say hello so you have two links that are going to the same location I yeah like the problem solving label these aren't equal so you'd want to fix that by the way the person gave me a super chat thank you very much I think that was a droid that was earlier all right let's uh I think we're gonna focus on this one so this person is not a designer this is a programmer so I think it would make sense again this is kind of like the same concept as the previous one where he says a sty he'd make stylish web designs and app designs but didn't show us a programmer is generally not sitting behind six screens this reminds me of matrix I so I think we can showcase code and either a literal or abstract manner now a literal manner would be a literal photograph of code and maybe it could be used as like a watermark and a background or something abstract of course that could work very well as well I'm a fan of that but because I just did an abstract representation in the previous example I think we'll do an abstract or a more literal representation in this one so we'll work with a photograph this time we're gonna trying to find a code photograph a picture of a monitor with code on it and working in and revamp this stuff right here from what I see alright so we'll try to get this done again maybe in like 30 minutes so let's rock I'm gonna go to unsplash.com to grab a photo that I think will work so let's just type in code now what you choose is pretty important because you can really screw it up I'm if not him and there's matrix code of course and so we want to choose something that will work well with maybe whatever idea we have in our heads in terms of the direction that we want to take it I'm just kind of searching here trying to get an idea of what's available so that we can make this work I kind of like this one up here I'm not sure if we can make that work you see maybe not I don't want to spend too much time on this but really in reality if this were a real project I mean choosing the right photograph is very important so you don't generally want to rush this type of stuff like I'm about to that looks kind of cool I mean we would really have to squash this in order for it to work as even though it's kind of dimmed out it's not high vibrancy there are elements there are a lot of small elements like the the UI navigation and this code editor which looks like Visual Studio code it's really sticking out a lot I'm gonna open that up in a new tab as one of the possibilities that I'll use and you know let's continue on we might search for another search term like programming this is sort of cool I like the fact that it's kind of skewed might use that I think that's a the front-runner if we could squash this big time I think it'll work and I may bring it in the Photoshop as well just to because there's a lot of colors in here and when you you you work with a lot of colors it can really clutter things so we may desaturate it a lot all right so I think I'm just gonna go with this one download free all right I'm I'm thanking this dude let's show his that portfolio up here awesome okay cool all right so it's the fact that this is also JavaScript helps as well all right so where did that image go on my other monitor here I'm gonna go to my downloads well let me click it again there we go showing folder all right so I'm gonna open up Photoshop how many people we have watching so far 361 this is great than expecting this all right Photoshop is opened up on my other monitor let me get it over here let me first just open the image in Photoshop and the reason I'm bringing in Photoshop is because Photoshop so raster based so we can make adjustments that we couldn't make first in figma or Adobe XD and therefore we're gonna make them here so I image adjustments I hue and saturation now we could completely desaturate this thing like that kind of leaning towards doing that anyhow but I don't know if I want it to be completely black and white so I can colorize it by clicking the colorize button right here and take the saturation right around there that way we have a little bit to work with alright I kind of like that now I want this background to seamlessly kind of go like transition from this section so there's a little bit of cutoff right I could tell like this whatever this item is here there's a little bit of different color right here it's gonna cut off it's not going to look right when we get it in in fact I'll just show you let's take this we're gonna copy it we're gonna go to back to Adobe XD here we're going to go to new web 1920 by 1080 there we go let me just I'm gonna save this in case he wants it I'm gonna call it Nast there we go and I'm gonna first get a container for this and then well not first I think we'll just paste this in why is it not pasting damn it Gary get back to photoshop you can paste right what's happening I thought you could paste from Photoshop like what is happening in my life right now maybe it's so large it's a really large image so yeah we don't need a fifty nine hundred pixel image we can get down to like eight like 1900 there we go so this is the full size it's pretty large as it is also it's a little bit square so I think I kind of want something more like that what I'll do is just there we go that still works let's go to Adobe XD there we go there it is so oh we cut off that area anyways so we're not going to see that cut off like I mentioned I don't want to just paste this in because I want to be able to control I wanted to yeah when you put it into an actual container you have more control over its location and its size and scale and all that stuff so what we'll do is save this say this off-screen where's you looking at my files you know snooping around like you will be doing to my email that was shown earlier and actually let me just save for web there we go this could be a JPEG because it's you know just a straight-up where's my seems like they changed this up this is is optimized 360 kb I'm not really too worried about that the file size just for this example so all the other quality can take your quality down big time you can still not notice a huge difference and get a lot less of a file size so you can definitely optimize this more so let me save this I'll save it to my desktop and what the hell it's not even giving me the option to save the photo what the hell oh there's the file there it is I have two different resolutions on my monitor so it's like screwing up the UI a Photoshop okay there now what I do is I find my graphic wherever it is let's close this stuff out I really hurt hope this I I said herp I really hope this works that's my idea for this sometimes stuff just doesn't work out how you anticipate it well and this is how I anticipate this working out so we'll see I let's say I want to get this back up so we can see the chat here this is the before this is what we're redesigning all right so again we're gonna have to really squash this in terms of the opacity the opacity doesn't look right because I still want this to be darker but there's white behind it so what I'll do is we could do the two ways you could take the art board and make the background the same color as this get rid of that stupid stroke Adobe loves adding on everything or we could create we could duplicate this element change the color to this but put this in the background and keep the artboard white so we maybe will have a container so let's open up the layers I called it Yale by the way the graphic I don't know why and then we can just squash this like that all right so let's see here now we have a background that's a little bit more relevant to you know what this person does and he said his eye he has a little logo of where is it that is all right so that that's where element it's it's it's you know it's creative I'm gonna do the same thing make it white and we really want to make this sucker bold so I don't know I don't like that one Monserrat new neato that's pretty much what I stick with for my tutorials here medium semi okay that this will work I'm not really too caught up on the logo itself I'm not gonna worry about changing that up he has say hello and contact me you just he has a lot of it let me see what he has here we have his skills education goals contact me I mean you you can stand to have more nav items than just contact me you want people to be able to click and access these points even if it's just a single you know scrolling page so Bob let's put in a few links here so we'll put in screw it we'll just put in home make this medium my work you only have three and contact something like that alright again we may need to squash this even more but we'll see after that what else does he have he has his name I guess that's relevant but in terms of what's called information architecture does it make sense to prioritize visually over anything else his name as opposed to his what he can offer and that's again that's going back to the features over benefits so I don't think so passionate programmer could definitely work on that ad copy so we'll see what I can come up with and I want to make this more different than the other one just to sort of show that you know when you're designing there's a huge realm of subjective design decisions where you can go really creative so that they don't all look the same alright so I'm gonna be really thinking about that but you know there are standards when it comes to creating user interfaces and that is like having your logo typically on the upper left with a navigation on the right at least in desktop in a real strong headline to allow people to know and notify them or educate them on what it is that you know the purpose of this site is so a strong headline so it's a pad he's a passionate programmer how could we were rework that into something else what are the benefits of a of a that a programmer can bring to you I don't know this is why lorem ipsum is so much easier to work with because you know think about the ad copy let's see stop thinking in the fact that there's 400 people watching you right now I'm like that's going through my mind and it's preventing me from thinking of good ad copy um maybe somebody has a suggestion in the chat let's see here what would be good I bring your projects to life bringing your projects to life something like that I screw it I'm going with that I bring your projects to life maybe it's not appropriate to call it ad copy I but this is just copy this is to not there you go getting ahead of myself let's check its experiment with the boldness I like that I bring your projects to life all right I like that I do like that okay I bring your projects to life now that's a little abstract so we can expand on it Oh his name it'd be worth mentioning the name may be above it which is you know let's see I cannot pronounce that I'm just going to copy that here now again this goes back to separating the hierarchy or establishing it and you know bringing it down quite a bit maybe make it medium not italic that's his name maybe we can give this color did he had he had color worked in and just kind of like this teal color so there we go and the reason I wanted to give it color is because I'm gonna have a sub-headline right here so so let's see here did he he had passionate programmer but I made all right so he doesn't have three type elements but I'm going to because we need to elaborate on you know I bring your projects to life that's a benefit that's great but the sub-headline should kind of address the feature the feature is you are a programmer I now this one will make white so I'm a programmer with two decades experience a little bit hard to see this because of the photograph based background his including type so you may need to squash that this a little bit more and also you can always I here's what I'm gonna do it we're gonna go back to photoshop we're gonna take this thing and we're gonna push it over here alright because I want the this photograph right here to kind of start where these numbers are like in the middle that way you can easier more you can see the actual type and it's not gonna you know create a conflict of interest or some sort it's not going to pollute the eye with all this type here so we're gonna move it to the middle and that'll also give it an interesting design aesthetic as well so we have to work with this though here in Photoshop first to make this work so I'm gonna use the eyedropper tool I do know you're that the chat has gone away but that's okay I'm not too concerned about that but we have to work with this first so we're my layers window up that's on the other monitor so we're gonna take the background give it this color and we're gonna need to kind of use the eraser tool it's already large will do like seven hundred and just kind of oops not that one but just kind of I fade this off there we go and then same thing with over here possibly or not I think we'll leave that so now we're gonna save this again I'm gonna save this and yo ha I was just looking at my file names that was mentioned here pop up windows suck that's a graphic a JPEG interesting see here oh my god the fact that I'm switching back and forth between these items it's not letting me save the file name come on let me go sorry just taking a little time okay yo okay so now watch so what we'll do is I need to open up that location users sorry one second here all right so what we'll do is we're gonna select that element and we're gonna put this this new one in ah look at that let me hit play I like that kind I think it kind of like that I would probably play around with it more if I had more time maybe I would rotate it more so that it starts more around the is and kind of comes through I kind of don't like that as much as I thought I would damn it damn it damn it let's see here well this is the process of design unfortunately let me just scale this up there we go all right we'll try this again I may even you know what there we'll save that all right so let's try that again we'll bring this in I like that better I think yeah I kind of maybe it's rotated too much now but you know what screw it so let's continue on here oops don't click on skype so now what we'll have here let's take a look at what he had going on before so he had an illustration he does have a call-to-action he has some of these elements here for github and Twitter LinkedIn which that that's okay to include there as long as they're more of an afterthought so have a project I'm not sure if that really makes sense to ask a question in a button so I'll put in have a project I don't know hire me I'm not gonna think about the copy too much and you could do let's see here I'm almost wondering because we we already have the relevance here of the photograph background we don't need to have a separate column like illustration like we did before I sometimes if you want to be real simple you can just take everything and Center it that's an option again it's subjective you could definitely do this if you wanted to I mean this is a very simple but I would say effective I revamp of his portfolio so yeah the call to action very subjective as long as it stands out it'll work I so hire me that's one such way I again people probably want to see your work and what you're capable of before they're gonna hire you so it probably makes sense to put in something like you know my work people want to see that most and so yeah if personally if this was my project I would probably have two columns of some sort or I'd work in another illustration may I that says something about code but for what this is it is you know clearly it's very simple but it's elegant and sleek with the background here and it's relevant so yeah I think this works well you probably work in color right here probably make that a little bit smaller to getting this coat color code here scale it down just a bit very simple is what this is trying to think if there's any other quick element that I could add here that would make sense and I'm just experimenting here this isn't centered up correctly I mean okay uh yeah I think this is fine so this is the first one there's a issues with alignment big-time this should be centered vertically more so but we went from this to this and I think it just does a better job and it doesn't look quite as I would say generic I with this graphic right here and it's a lot more simple so this is a very simple take on it so let's take a look at the two revamps that we did so this one I'm just going to call this is and the previous one let's see here we're gonna open recent Nazz so here's one we did for a designer naz's example shoot if I can find it on my discord right here so this is what Nass had this is the one the very first one that I revamp tanned this is what I came up with hit play here alright I didn't have any prototyping or anything but I designed this from scratch second up we did this right here we went from this to this hit play just to get larger will really be cool this was a video based background look it looks like it would look exactly the same but the video background would maybe kind of a scroll code in a very subtle manner so that's not too distracting and that way we can work in some movement in the design alright so yeah color on the CTA that would work too you don't necessarily always have to but yeah so let's see it is now an hour and three minutes that worked perfectly I can't believe it came up to an hour awesome stuff have 380 people watching very very good all right I so also there's a there's a super chat let me check my dashboard here Jordan Felder Jordan where is your design I'm gonna do a quick review before we wrap this up it's Jay Felder okay this is Jordan Felder's design thank you for the super chat we're gonna do a quick review here don't send any more super chat people because I have to be done my kids are gonna get antsy I'll answer some questions at the end too all right so this is called the author incubator I've seen this already he must have integrated some changes but I can't remember what the first one looked like so let me work with this just real quickly let's see here I'm gonna take this padding let's see here it says widget this is on a class widget let me see here let me open this up mmm wow there's a lot of divs here what is happening what was created what was used to create this I wonder because that's a insane amount of do so right here well work with this one padding I wanted to get rid of the padding at the bottom so I put that 2-0 I also want to take this element right here there it is and that the the padding Jesus on the top oh that's what happened okay okay and then what I want to do is take this margin bottom it's not working maybe I have to chart target a different element here oh my god what is with all these divs Jordan what are you doing I this is going to be margin-top I will do 1.2 um I just wanted to push it I not done yet all right so let's see this also the the line height on this that's not working you want to wise as a span an h1 line height right there that's better all right so so this right here this free master class for coaches blah blah blah I think we want to lessen that text so you should only have probably one line of text here just because it's real content heavy in terms of text I separate things out just a little bit differently I'd still like to work with it more easily by using like a prototyping tool or design tool that way I can quickly change it up working with code it's slower so it's not perfect all right but I think this is better representation than what you had so if i refresh this I it was things were just spaced out funky like way too much space I was probably myspace was probably a little bit too close but somewhere in the middle ground would be a lot a little bit better I like the fact that there changed up like in terms of color and you know this is much larger but I think that they're just all spaced out a little bit strange so I work on the space saying Plus this whole section is container you have all the space at the bottom but hardly any space at the top so you want to push that all down so it's centered more vertically the call-to-action button works yes show me how you want to Center this vertically because there's a lot of space underneath so try to get the spacing right might want to squash out the background a little bit more cuz this is a little bit hard to read and I noticed you probably wanted to show her face but I would still this is a large photograph you could probably still squash the overall height of it because just there's you know this is this amount of text but we have this large container here you definitely want to increase the contrast on these elements because people aren't going to be able to read that that would fail the contrast test it wouldn't be double-a for WCAG 2 but other than that it's a yeah structure pretty well again it's not even worth putting this here if people can't read it anyways so either remove it or increase that contrast big-time all right good stuff I think I've you probably did improve it from what you see first submitted anyhow so I that's it all right thank you guys I will talk to you guys I real soon so yeah we might do more of these types of live streams let me know what you guys think in the comments about it and yeah I will see you guys real soon goodbye here's that awkward silence when I try to close the stream out

Channel: DesignCourse

Views: 28,357

Rating: 4.9501247 out of 5

Keywords: design portfolio, web design portfolio, designer portfolio example, how to design a portfolio

Id: _DnRVy9C04U

Length: 70min 3sec (4203 seconds)

Published: Fri Oct 18 2019