How to Create a UI/UX Portfolio

1. Intro: Hey, guys, today will be going over how to create aux you I portfolio. I'll be sharing some tips and tricks and best practices, but to put my money where my mouth is actually published. The website I created in this class and it did get featured on best folios dot com. One of the reasons I'm making this video is I've actually helped with recruiting and some of my past roles, and I've just seen thousands and thousands of portfolios, and I often see a lot of the same mistakes. So I'll be sharing some do's and doubts and some things that I would advise everyone to avoid but also really gearing things towards getting people a job. And not only that, but if you've already been working on your portfolio for a while, I'll be sharing some tips and tricks to get around work that has an nd a. That's a pretty common problem for most people. You do some amazing work, but that it never gets really use, so it kind of puts you in a hard spot of what you should do with it, and I'll be showing some tips about that as well. But I think that's about it. So let's get started 2. Overall Tips: Okay, So before we really dive into making the website, I think it's best to go over a couple foundational points. The 1st 1 is you are a designer. So what I mean by that is I expect a designer to have a certain visual acumen. I expect people to be able to make work that looks at least decent. So when I pull up a portfolio and the first thing I see isn't very visually attractive, it's a huge sign to me because I expect a designer to at least have some foundational experience with making things look good. And we all know that, like just making things look good isn't all a designer does. But it is a basic task that I expect everyone to be able to do. Number two is make your intent and skills really obvious. Eso What I mean by that is if I scroll around on a portfolio and I see eight different projects and are all in different fields summer physical products, summer digital, summer branding, summer graphics and advertising, I have no idea what a person's gonna be good at, so your work and your portfolio and he's just scream at me about what? You're good at what you're talented up because I'm not hiring you to do eight different things. I'm hiring you to be good at one thing. So just remember to make that obvious and make your intent very clear throughout your portfolio. My third point is probably one of the strangest ones for everybody. And that's gonna be to use a template and the new where you're thinking, Why would a designer? He's a template when my job is to design new things and put new stuff together. And that reason is because you don't want anything to distract from your work. I see a lot of people that try to design their own websites into some cool, new, flashy thing that ends up distracting from their work and prevents me from seeing and focusing on the work. I instead focus on the medium that works, presented in which isn't what you want. You want people to focus solely on your work, and the good thing about templates is they make a lot of decisions for you already. So if you're worried about what font, what size, what color to use on things. Templates already have that good to go for you. And they're also responsive on mobile. So if you ever think about being a mobile designer, it's so much easier Death? No, that stuff is going to be taken care of. So please, just squarespace, Wix, whatever site builder use, check the templates out, and at least use them as a foundation to build on the 4th 4th piece for this is Please, please, please do not upload the pdf jpeg, PNG, whatever kind of image with text grouped into it. This is a quick example of what I mean. The reason this is a bad idea is because this doesn't respond. So if it goes to different Web browsers or even goes to mobile, it's gonna squish down really small. And the text isn't gonna be readable. And not only that, but it's bad for search engine optimization. You'll see some of that stuff, and some of the site builders basically search engines. They're not gonna be able to read the text that's in the images. So you're gonna lose a lot of the descriptive text on your website and you won't be able to be searched is easily which is not what you want with your portfolio. 3. Starting to Build the site: okay, so now will actually begin creating a portfolio website. And I'll be using a friend's project for this portfolio. And she was very gracious and actually let me work with her to put this portfolio together . So this is a real portfolio. I'll be putting together eso. These examples are going to be live, and you guys can feel free to check out the website. Um, so you can reference other projects. I won't go through everything, but I will go through some of the big processes of how we created this website, some of the major parts of it, and I did use Wicks to build it. You guys can watch and kind of learn some about Wicks if you never heard of it or you squarespace or whatever builder you prefer. But kind of the tips and foundation of how to lay stuff out in the projects will be the same, and I'll be applicability. And I won't spend too much time on how actually put everything together and wicks. But you will get enough of a foundation to do it yourself. So let's get started. So if you go to Wickes dot com and you already have some sites. This is what it will look like. You can go to create new site here and again. This process is going to be pretty similar for any website builder like Squarespace or some of the other ones that exist. Um, and you can kind of go through, answer a couple questions and really just kind of choose a template. And most, the template libraries that exists now are pretty expansive. They have a lot to choose from. And they even now they have, like, designer portfolios you can choose from. Um, so again, definitely suggest to pick one of these and kind of tweak it and edit it to your needs. That's just gonna give you a really strong foundation. A lot of these already responsive the sizes. They're good images look great. So just go ahead and start with one of these. So if we go over here, this is the one I selected and actually picked it for a very specific reason. It's good and maximize this. I really liked this. Reveal animation right here. And that's something that I kind of want to build off of. But if you scroll down on the rest of the site. This one, it's pretty cool, but there's a lot going on. So what I'm actually gonna dio is kind of just pick it apart and just kind of take this main element and then delete everything else. And that's still going to use the power of the template as well. Because if you click in, forget it. Like at any this text, you'll notice that it already has themes. So all this Texas sized and kind of ready to go. So even if you delete a lot of this stuff, you're still getting like the power of the template. So my goal is to really just keep this kind of window and everything else for the time being, I'm just gonna delete someone to go through and start taking pieces off. But I'll fast forward this to because it's not gonna be any fun just to watch me delete a bunch of stuff. Okay, so now I really just have a skeleton of foot. That previous template was, but that's OK, because I had a lot going on, and we really have this main element, and that's what we want to go forward with. 4. How To Structure Your Portfolio Website: So this is what I'm going to use to display the featured projects on the work page. And the way I'm gonna break this portfolio out isn't really into three main pages. That's going to be a work page that's gonna function is your home page and about page metal house like your resume and some of your information and a contact form and then your project pages. So it's really pretty simple with those three parts. And the first thing I'm gonna do is kind of do the welcome image and header. And I'm gonna use that as a place to you have a description about what the what the designer here does and kind of an introduction, if you will. So what we can do? Let's go ahead and answer text, and then it's great cause I already have themes. Text here to you so you can just grab who having three. Actually, that's changed this. It's a little too big, strong heading to you, and that is like Teoh. And then what we could do is type in a name here, Um, and again, I'm using a friend's information here because this is gonna be an actual portfolio. So if I'm using someone's name, you kind of knew why. So what you can start off here with is just like a simple introduction of a name. This is pretty common. People put their name on their first page and then copy and paste this over. And then we can add some text about who you are on the most, you paragraphs one So for introduction, text and kind of like a background of who you are, what I like to dio is included your current job title or your the job title, that you want to have a kind of how you're getting your portfolio. And if you work somewhere, I do like to in Cleared that right here, right in the front blurb. Justo, prove that you're a professional or maybe you have professional experience. It's going to have that job title right there. And then just kind of a quick, quick blurb about what you dio. And then I always like to include something kind of quirky here. My friend actually builds tiny furniture, and that's going to be like one of the projects I'm including. It'll be a pretty small project, just a couple images, but it does add kind of a different aspect to a portfolio, and it shows that, like you're also a human being. It's not just all about work. And so I'm gonna send it us on the page just about. Okay, so once we have a name and I'll go ahead and, like, edit this header appear And what I did right up there with the menu was I just penned these elements to this green. All that means is when we scroll, those elements are going to stay where they're out, and that was actually left over from the original template. But it is an element I would like to replicate for this. 5. Add Personality To Your Home Page: another aspect is Who are you as a designer? That is important. Even though I did say to use a template earlier, you do need toe, have a little bit of flair like don't be afraid to be yourself in your portfolio and we'll get into some methods and tips later on in this class about how to do that. But definitely never be afraid to be yourself. It's okay to have personality in a portfolio. Okay, so now that we have a name and kind of a description of role previous workplace and then just a quick blurb about what goes on, I will also add a couple like an image or something going on here to the right just to make the page a little more interactive. So the good thing about using a lot of these site builders is they often have a lot of like shapes and vector art already ready to go for this. I'm gonna pull her in a couple shapes, Um, because this actually fits the style of a designer that we're putting this together for and adds a little interest on the right side of this page. So it's not just text but I'll use that same process and go ahead and add a couple shapes over here, and we'll fast forward through that. Okay? And now that I have their shapes on the page and the colors have just pulled in from some previous to previously discussed colors with this designer, So it's always good Teoh kind of have those decided beforehand and also like this text in general, I know I copied and pasted it over, but it is a good idea to go ahead and write most of the stuff out. As we move into projects, I will attach a document that I used to lay projects out and actually type my texts before I begin to lay it out. And I got show you guys an example of that once beginning, delaying a project out. But another cool aspect of using a site builder is you can use some slight animations, and I usually don't like to go too overboard with these. But it is nice to just add a little bit of movement to some of these elements and we'll preview this This Yeah, it looks, and what I'm gonna dio is just replicate that animation on each one of these shapes 6. What Projects Go in and How Long Should they Be: So one of the first things you'll run into when you're putting together a portfolio is what projects should you put in? The first part of that answer is put in projects that you want to do, like what do you want to do for a career? What kind of work do you want to get into you? If you like mobile APS, then most you work needs to be on mobile devices. If you like websites, most your work needs to be websites. It sounds pretty simple, but actually people get it wrong a lot. And when you split your focus and like two or three things, I stopped believing that you're really good at doing mobile lapse or physical products and websites. So usually it's better to stay focused there, and the second part of that is the topic of the project. If it's not anything you did professionally and ease of use something you're passionate about, and the reason that is is you just spend more time on things you're passionate about. You also talk differently about things you're passionate about, and that's usually very obvious in the work on. And it's also very obvious later on when you get in the interview process and you begin talking about it. And trust me, that makes a huge difference when someone's talking about something passionately, and the thing is, you're not really going to redesign the wheel or make a new $1,000,000,000 business with a case study, so it's better to stick towards maybe a problem you're familiar with. Don't spend too much time trying to figure out a crazy new problem or crazy new solution. But just make sure the area that you focus on is something you're passionate about and trust me that will save you a lot of time in the future. So a common topic of discussion is how long should portfolio projects be? And there isn't an exact recipe to exactly how long projects going to be. But I can tell everyone that don't make it too long. So your goal is to really explain the highlights of your process, and you could save more granular decisions for later on in interviews, Um, but there's just no one has enough time to see every single decision you made in a project , so it's better to just show highlights of those decisions and kind of keep it to the medium to short range for a project because no one's gonna be ableto take 30 minutes out of their day to read an entire project like a medium article. So just keep things on the shorter side. Um, and as long as that first part is good and your highlights of your process are good, you're gonna at least be able to get into an interview situation where you can explain a lot more of those decisions later on. But don't feel the need to really just go medium article on it and have a huge, long scrolling project, babes. 7. Designing your home (work) page: Okay, Now that this bit is done, this is going to serve is our home page and kind of the first thing you see once you drop in and the next thing, we're gonna want to immediately get to the work. Um, one of the things with portfolios is it's it's okay to have some kind of introduction, like image or bit right in the front. But pretty much the absolute next step just needs to be your work, because you need to think about it in the context of a recruiter. Like if someone's looking at 100 sites a day, they really want to get to your work pretty quickly. So you can either provide some links up here or just make sure the next part of this is gonna be your work. And so what we'll be doing here is I'm gonna replace this image with the first project. So once I get the first image in there, I'm actually gonna change the background color to match the phone here. It's a good idea to in advance have these kind of written down or saved in a certain spot. If you're designing it in another, like illustrator a W X D sketch or something like that. Good. And save the colors you want to use, so you can just kind of quickly applied the hex codes. That's what I'm going to go dio referencing another file for what color's actually want to use here. Okay, so we have the color won't hear what I'm gonna do is actually move this text over because I actually don't want this to overlap with the phone. The reason that is is because we're actually losing some text on this image. And even though it could be a cool stylistic element if it overlapped, well, sacrifice being over to read text for it. So I will pull these and just a little, um, we contract this down as well. Now we can preview this. Okay, so it's still getting that animation that we liked before. Get the one up there. I'm actually gonna pull these elements just to be a little close to you together. Okay? I'm gonna add a button here as well. And that button is going to be the one that takes us to the actual project so we can just pick the themed button they already have. Ready to go and then we'll change the text to Missile. Just save you Project Preview that the cool thing about using these themed buttons is they already have hover states and quick states. So it's nice that that added interaction was kind of done almost immediately. This is an animating mouse that we will add the white and animation, and that's just so it's the same as all this other stuff before. So if you preview that, we get it all the glider that's looking the way we want it go back to the editor. I can go ahead and update this text is well, so I will taken out here. This is actually my friends professional work. It's our work from Verizon Connect. And if you do have professional work experience, I always advise that is the first project, because that's generally the work that you have your most depth in. It's stuff that people paid you to dio. So it's very important that if you have professional work, make sure that's what's up front and center andan use case studies like work from school can come after that because I know it does take. It does take quite a few years before you do have a lot of work, But again, just keep your professional work always first on the page. So if you get this one more time, okay, it's looking good. Will come back to the editor. Now I'm gonna do here is actually replicate this exact same thing and I'll just make sure that this is actually doing the same thing I want. And it's got the reveal effect, and that was carried over from the original template. And that's what's gonna make this next part, uh, really look pretty cool. So I'm just copying and pasting this over awesome. That worked fun. And then this will be the next project page. So go ahead and drop this next image and and I probably fast for this bit is Well, okay, now that I have these two projects in, I'm gonna go ahead and preview. This will start from the top beginning that animation in and again, The first project is the professional work here, and the second one's actually gonna be a case study. And because we copy and paste these elements directly over, it actually gets that pretty cool reveal effect and the project comes down underneath. But I'm gonna push this text over a little because this is pretty crowded. Well, maybe we'll leave it. Okay, so that should be good for the 1st 2 projects. And just for reference to this 1st 1 is a professional project. In this next one will be a case study, and I'll go over ways to lay them out. This one, my friend, can't actually show everything because some of it isn't released yet. So I'll be talking about how toe explain what her role is there, Um, and for this one, this one to be a more traditional case study, and I'll go through the entire process of how this is laid out, and so for the next part. So we need to slide these elements down in a little crowded year, so just drag this down. If you do plan on using wicks, If you use this drag, it actually pushes all the elements down. So it's usually better to use drag than it is to a click and move something. So we track that down. Should me of everything actually gonna delete this background color as well. Actually, just gonna delete this whole thing, okay? And so I'm gonna feature three projects here, so we can just copy and paste this again. No, go ahead and change the strip background for this. Look, just make it a color is a placeholder. It's purple. So I won't be adding this project for this class just because it would be too long. But I will feature three projects here and then beneath that what I'll do you is at a slider. Is that a slider down here for other work? Because you probably have more than three projects. You should really aim toe have, I would say at least five if you have really long projects, which I don't exactly encourage. But if there is a lot of depth there, you can get away with having less than that. But I would generally aim for like, five solid projects s o. I will be adding a slider here like a slide show just so we can show some work. Uh, that has been done, so you can just add a slider down here and preview this So go back to the end of their not you back to the editor. And what I do here is also stretch this to fool with because everything else on the site is full with, um and make it a little bit bigger. Okay? And then we'll drag this up. I'm gonna leave a little white space here, actually. Okay, so just from the top, we have our introduction, and this is gonna be what you gonna do. And then we have our first project. You should always put your first project to your professional work out front. Here will be a case study, and then here will probably have 1/3 project or another professional project. It just depends on how much work you have. And then here what we'll have is, like, other work, because we have three featured projects. But likely there's more than that. So we can add people add heading three will be pretty punchy with it. And so if you go back up to the top, you'll notice that actually, my friend builds tiny furniture. Um, it's actually pretty interesting, and she's pretty good at it. On DSO we're actually going to include that in their portfolio. So this is what this little bottom slide show will be dedicated. Teoh, I'm not gonna change much here, but we can go ahead and change these slides, and what I'll do here is just upload images of her tiny homes. It's like tiny friend share tiny homes. And no, it's not necessarily related to her day job, But it is a pretty interesting thing that shows craft and personality and another aspect. So I do encourage everybody to put like one kind of side project or one like passion project in there that doesn't have to be related to digital products, so definitely feel OK to do that. It also helps your personality kind of define who you are, Um, but I'll upload those images and I'll just keep this one is a placeholder for now. But just now that when you see the final product, that's why. Added that, And so for the footer, this is pretty standard. The template you chose may have this laid out for you. Well, um, but it's always just good. Teoh, maybe put like social contacts at the bottom excess some presets for these and you. What you do is you just link each one of these Teoh your social accounts, and this also helps with Seo so it's easier for search engines to find you if everything's linked here. And I always like to add, um, a couple like buttons that lead Teoh other places on the site. So you just grabbed that button. This is the same one. I moved, uh, the same when I used in the menu bar. Don't change the text here and we can just make it contact. And so what that's going to do is just if they're at the bottom of that page, they always know where to find you. You can also put this is resume or something on those lines, or even have, like, a navigation to some other projects. But this is a pretty safe bet for a foot or design and again for the final version. I won't do it here, but I'll go out and populate this with other work just to show an example of that for the final site. And this will also have tiny furniture picture that we won't get into right now, So that's pretty much it for what our home page is gonna be. And again, your work page is your home page. We'll need to change that. I like, But you have your introduction. You have your first project, and you can either lay this out in a grid or some kind of horizontal like image like this Second project. Third, I like to feature 2 to 3 projects, and then you can have other work laid out. However, you seem fit, but we'll go back to the editor down, and I will fast forward some of this just to do some housekeeping things. And if you notice any slight differences in the final version, that's just because I had edit some things at some point anyway. So nothing drastic there if something's a little different. 8. How To Design Your About Page: So what we can get into now is actually going toe our about page, which isn't linked to anything yet. And I'm going to do some quick edits on this menu as well, and we'll fast forward do that. So go ahead and add a new page, and this will be our about page close. It's helpful to you because the the header on the foot already got apartment over. So what we'll do here is just add some information about yourself or Shannon in this case, the designer. And if you're using again a site builder, it can be helpful to kind of look around and see if there's anything you can use here. There's no point in redesigning the wheel. If something works pretty well already, I actually like this one. I think this one's pretty cool. This is the one I use and will definitely change this text here to match our theme. So in about pages, usually you can have a longer explanation of kind of who you are, what you dio that's just up for interpretation. There. Whatever you want to put, I do like to have very obvious button them for a resume. Um, because people are gonna want that. Teoh. If your work's good, they're definitely gonna want to see your resume. And it's good to keep that me about Paige and keep it pretty obvious. And I'll take the design their test a little as well. And it's up to you how much information you want to give about yourself here as well. Um, I definitely wouldn't give an exact mailing address so I wouldn't make that too easy to find. But I think it's okay to, like, say, where you live and maybe tell a little bit of your story here. It's just as a little more interest to your work kind of puts a face behind it. So it's so it's okay to have some information here, but again, don't be thrown up your Social Security or something. But the designer making this fourth, actually from Delaware but went to school and now works in Atlanta. Um, so what kind of make that an aspect of her about page as well. If I can spell Atlanta correctly, it is actually gonna use it differently in ways 40 heading to maybe so. This is pretty much the formula used for about pages, you can add just any visual interest here you want as well. Um, for this one, I'm gonna add in like an image of the state. It's a good or about page and then just got Stella Rare icon. And we're not actually gonna let it be this big and will send this back. And to keep in line with other animations on this page, I will make thes Clyde and just a little. You see how that works? They usually don't go over the top with animations. I like to stick toe one animation like I only use the glide here. I don't like mixing multiple animations. It's usually pretty crazy. Andan you can update. Of course, I'll update this image before the website actually gets live. But also add. And this is very important contact form. You can choose from any like pre made form you'd like. It's very helpful to have one of these. You definitely need one. So you just grab kind of generic win and I'll minimize this play with a size a bit. Then what I'll do is I'll go ahead in here and edit it and make sure it's our theme. But I'll go and fast for this part. Okay, now that that's fixed. So again, the main portion of this is you can have an image of yourself. Definitely feel free to do that because people are going to look you up on like then. Anyway, um, have a link to your resume, and what you can do is just turn this into some quick PDF download for someone to grab very important to include here. Um, you can feel free to tell as much of your stories you want. I do think it's pretty interesting if this portion is kind of long. That's definitely up to you. And just make sure there's a contact form as well because, believe it or not, people will actually reach out to you through these. I definitely get a couple a couple of messages on mine every week, so make sure you have some kind of contact form. And just in case you don't want to put like your phone number or things like that on your resume, someone has an easy place to reach you here. That's about it. For our, um, about Page will think. Look at that again. I think that's fine for the most part time, so we'll go back to editor. And then what we can do is just make sure they use actually linked to everything. And again, this will very and whatever site builder using. But if you're using Wicks, um, it's pretty easy to do this so you can just go in and link each one of these to the page and we'll do the same thing with contact. But here the contact button will actually linked to the about page, which is fine, so pretty that again go back to our work page. 9. How To Handle Pro Work You Can't Show: But now we can get into how we're going to present some of this work. The first thing we'll do is create a project page for this professional work experience. And in this case, we actually can't show a ton of what Shannon did for a project. So I'm gonna go into how you could get around that Sobel to you has just gotten Adam your page here, and then we'll call that hum. That's the project products she works on. So done. So the first thing I'm gonna want to do for this is have a beauty shot of what the product is. So every project you dio needs to start with a beauty shot. So what we can do here is just go ad and we can at a strip and what that's gonna be. So we'll just get like a regular image strip. We'll take this one, and we'll make this a lot bigger. And the purpose of this is you want this to be some beauty shot of your project. I lay every single project ideo like this. So for this one will change the background and we'll use civil grab one from over here and This is actually just like a generic marketing image for the product that she works on, and we're going to change the background color as well. Teoh the same calories down the front. So I advise everyone to start off with some kind of beauty image. And again, we can't show the specifics ever work here, But we can show this kind of generic marketing of it and then explain the product and her role later said. We'll go ahead and add another section here so actually usually like to keep text a little tighter, then the balance of the site. Generally, you want everything, every every piece of content to be within these kind of guidelines here to the left and right, but actually like text to be a little nearer than that. So what you can do is actually turn on grid lines and whatever product you're making. So we'll turn on the rulers and come in about You may be right about 200 so just a quick now here, Um, I do like toe layout project pages by hand. I don't actually like to use templates for that, but if you do find that the template you're using has a really good project page. Definitely feel free to use that or just kind of do something like I'm doing here. I keep everything pretty simple on the project page. I don't like to use a ton of animations or anything like that, and I kind of get into why in a minute you don't want that to be italicized. So what I like to Dio is kind of make the title of the project pretty clear. I break things up into, like, three columns essentially, and I always like toe left a line and keep important text by itself. And then do you like a blurb of text over here if we need it. So keep your project title pretty obvious into the left, and then you can put kind of descriptive text to the right, and I'm actually going to use this textbooks to measure here. I'll fast forward this bit. So in Shannon's case here with this project, she's done a lot of work. But she's only been there about two years, so she can't show a ton of what she's done because some of it hasn't been released, or some of it has been used for kind of roadmap presentations and things of that nature. So what we can do here is really just talk about what her role on the team is. And what I like to do is just explained that you can't go into detail about things, but give people context of the work. Just because you can't show them exactly what you did doesn't mean you can't explain to them the type of thing you work on. One of my biggest pet peeves is when people just completely password protect something I get that you can't share what exactly your work is. But with the worst and most frustrating thing to do is just put, like, a beauty image, get me really excited about what, What the work's gonna be. I click it and then it just says Password protected like it's like, Why? Why even put it there? I mean, I know people are putting it there just to prove that they have professional experience, but at least like give me some context of what it is because the thing with projects, as everyone has been in the situation where they know what it's like toe, have stuff under an nd a. So people interviewing a portfolio understand that, Um, and if you worked for a bigger company, it's also really helpful because they usually have marketing. Um, and they have marketing. Uh, they have, like, marketing content that they've already created for a lot of this stuff, so you can usually plug that stuff in hum. For instance, the product Shannon works on has a YouTube video, and what we can dio is actually just linked that video here and what that's going to Dio has just let someone understand the context of your work. It'll take a second and live there, and so at the top, you have the name of the project. Here's a description about Shannon's role. You can't go into detail about everything you felt design, but a video to give it context. You could do this in other ways, too. I prefer Don't overwork yourself. There's no point re doing professional work, Um, so just explain that you can't show everything. I definitely don't advise people to actually show stuff, and then we'll add another bit down here, and what I do is just copy and paste this text over. Okay, so something like this is gonna be fine. So I usually like toe have two or three methods on how to display text. Um, kind of a smaller text block that lets me, like, put a screen over here or just kind of a traditional like article set up or have a title and then text here. I like to be able to use both, but what will do you hear is actually talk a little more about the specifics of work, And I don't mean specifics is in say exactly what was done or what was going on, but just kind of like, essentially the piece on your resume, Um, and talk about what? Your role at the company Waas, what things you did in your day to day like life there worked arrogance. But just to give some context about what's going on because if you can imagine if we go back, we'll go back to our work page. You see this landing experience? He's growed onto this project. You have all this stuff here. You see something? You're pretty excited about what the project is. And if you clicked on there and it went to password protect like and just kind of shut you down. That's a huge let down. I mean, you don't even show a tease or anything. So if you can't, if you have things that's protective than India, please, please, please just, like find a way to show some context of what you did. It doesn't have to be that exact thing, but it is helpful to you at least show something and we'll have to connect that, but in a bit. But we'll go in and just this page hype. And for this project, this is actually all I'm gonna dio. But just using, like some marketing image from the product and a marketing video is already giving a pretty good amount of context about what she does in a professional rule. And then the last thing to add and I like to add this to each page is actually a gallery strip for other work, and you can select whatever kind of strip or gallery like, um, just the traditional pro gallery. It's fine, and without two years actually delete some of this because she won't actually have this much work. This is pretty extreme. Six is fine. Well, dio, stretch this And so at the end of every project, I always put options for other work. And that's just so if somebody ends one project, it's very easy for them to select something new. Um, so I can update these with projects as soon as they get a plated and purports published. But the idea here is that you'd be able to click a new project at the end of every project page, and that's just gonna keep people. It's gonna allow people to easily go through your work, a good thing to put on literally every page. This will drag this up a little. And again, let's connect this with the home page and see how it looks. So we're gonna attach this button with that page. We'll preview. Okay, So now when we click me a project, you actually get dropped into this. We have the name of the project, a description of the role, some context of what the product is she works on, and then a further description of the role. And people are gonna understand here that you can't show exactly what you do. You can also just explain that everybody gets that. But then they have a quick link to some other work that they can quickly select here. So they're not just left hanging, so please don't Don't leave people hanging with this. Um, this kind of work. 10. How To Create A Case Study Page: Okay, so now for the project, that's more like a case study. So this is probably to be a little more relatable if you have, like, a school project, any kind of case study things like that. Just something that you didn't do for money. Basically, um and this is the one I'll be going through the entire process with. So what we can dio is actually just go and replicate this first project page. So you just you duplicate and that way everything's gonna be laid out. The same from the name of this project is reaped. So go ahead and create that page. And then what we'll do is just change this beauty shot. And again, we'll be starting this off with the beauty shot. So I'll just go into this folder and select the header images. And then we'll also change the color of the page and then I'll go ahead and start updating this information here and when it's a product that, like people aren't familiar way there like a case study, I do like to add a simple, simple descriptor of what it is, right below the name. So this product actually is meant as a communication between farmers and food banks because farmers actually throw away tons of food that they could actually donate. Um, so I Do you like to add something simple there to explain, Like what was going on and again to the right, Also a description of what the project is. So I will actually pull this up. No, include this for everyone. Let me drag it everywhere. Include this for everyone. But I do have a project layout page for each one of these projects. This is kind of the formula I like to follow, and it's very helpful to fill this out beforehand. It'll save you a bunch of time because it's very time consuming. Just trying to type in this information as you go. But it will also help you fill out and lay out a page like this. So I will add this and description for everyone. But just so you know, I'm not just magically dragging and dropping all this stuff beforehand. It was placed and kind of laid out and again to the right. We have part of that description. So an explanation of the project and the problem here and you can also include any kind of teammate information like what your role was on the team for most case studies. You probably did everything on your own. So as long as you kind of explain that's a case study year, like Quick research Project, that's pretty obvious. So the next thing for this project will be kind of explaining the foundation of the problem . And to do that, I'll fast forward some designs. And the first thing I'm going to dio is actually place a some research here. Some like statistics that were done to help uncover the problem to begin with. Okay, so this is just a way to lay out some of the initial research that was done for this project. Um, I don't have it right now, but I will probably add a link to where this, um, this research came from always helpful. Teoh sight Your sources here just adds credibility to case studies, but also gives respect to whoever did the research because definitely want to give respect , give respect. Do you want Oh, you know, make sure everyone has the the rights to their own work. So definitely always drop a link to cite research. Done here. What will deal with this as well? Also kind of do a glide in animation with it as well. So preview this. Okay, so we have our beauty image. We have kind of a simple name and the description of the project. And again, normally, rolls would be included here, depending on the project and then a super succinct kind of description of what it is. And I like to display any research, new miracle things this way. It's much more engaging to do this than to just put it in like a big textbook. So I do encourage everyone that if you have any data like this, think of a way like this, you can feel free to use this method to to display it. But this is just a better way toe. Can I explain the foundation of the problem? Because that's what we're doing right here in this first step is everything here is just gonna explain what we did to uncover the problem. And then I'll add one more section to this as well, to just kind of round out some of that research that took place. And I will fast forward this as well so again here it is helpful to have, like wicks and squarespace providing icons and things you can use. Um, so just at any opportunity you can use the leverage that I encourage it. Um, it's just free here to use for people, so definitely, definitely leverage that. Okay, so now that we have that part done, I'm actually gonna add a slight fade in animation to it. I don't want everything on the page to always glad, right? Necessarily. But I do want this kind of infographic toe have a better kind of some animation to make it a little more interesting. And again, these air kind of foundational fax that really describe the problem. And that's what this whole first section is dedicated. Teoh is the process of uncovering the problem. So I kind of just falling out what was in that document and how late this things out. And we have one more aspect. Teoh add to the first part of this process, and that is a system and stakeholder analysis that was done. Some just copy and paste on this text over. And this is going to be the last portion of this like discovery phase essentially like the process foundation. That's what I like to call it. So you can scroll this and copy and pasting this from that document and what we could Dio is add an image of this. So this is a kind of a service in stakeholder diagram. It was done in this project, and a lot of work went into it. And it was actually based on a whole day spent with, um, spent with the users. So with a farmer, the distributor, and then feeding the hungry people in a food bank. So there's a lot of depth that went into this. Um, so we're gonna dio some of the text is actually kind of small in this diagram. So what we can do is actually set this Teoh. When you click on it, it'll zoom in. So when clicked, you can dio it could be magnified. And so if you do have any kind of big diagram like this, um, encourage people. Teoh always have the Zuman feature in case people want to zoom in and read some of the stuff in it. Um, always helpful, Helpful touch. That's appreciated for sure, But we'll send it us a swell, and this is just a quick note on this kind of research process. At the beginning, there was a ton of stuff that went into this system and stakeholder analysis. There was a bunch of reviews. There was a bunch of quotes. There was interviews with users. There was on site visits. But for this project, the highlight and the outcome of all of that is actually this diagram. So there is more content to put here, but because we have to be conscious of how long the project is gonna be, just having this and kind of ah, overall descriptor of what it is is a better use of this space. Because if we really blew this out and if you can imagine each one of these steps would have images and quotes and things of that nature, this would be a super long project. But again, the whole point here is to show the highlight of the process, not the entire process. On the good thing about having all this stuff kind of left over is that if you do get in an interview setting, you have much more that you can show here and then always looks good toe have, like your front facing portfolio and then having stuff that if you need to, you can blow out into a full blown presentation about your process. So again, this is just a highlight here, but it does a pretty good job of describing all these moving elements that a lot of research went into. 11. State Your Problem: and I usually like to make this a pretty bold in punchy statement. I like to put the problem at some point on the page and what we're solving for pretty obvious several Tiu. Actually, this is fine. We'll stick with size and then I'll grab one of my problems Statements from that document and well paced this in. Actually edit this text just a hair. We'll bring it down to 40. Awesome. And then I'm gonna highlight some about kind of important bits in this statement that our solutions gonna directly relate to you. No. Okay, so again, this is like the result and the result of, like, all of this research on again, there was a ton more research that actually went in and the context of a bunch of images, a bunch of quotes and a lot of other things that we could have written about here. But again, this is about the highlights and about getting to this point in a pretty concise manner. It's not about spelling each and everything that was done on this project on gritty much everything after this is gonna be solution based. So go ahead and start getting in the house. Really That bad out 12. How To Display Your Solution: and again I'm going to copy and paste miss over, and however you want to begin to lay, the solution out again is up for interpretation. I like to start it out with any branding elements that were created before I really get into, like, this solution and the major aspects of the design. So add like a quick a quick summary of the brand for the product. Okay, so now we have a quick kind of explanation of what the brand is kind of forward, some of the colors and the screens as well. And the next thing I like to do is just have, like, a key feature, a pretty concise key feature Call out because they're usually like to start with kind of a static beauty shot of the main page and then add some explanation of what's happening on the screen. So what we can do is just poll pull this text from appear then I usually like to relate what I'm calling out with these elements back to the pinch points from a top, just so it's very clear, Um, what it is we put why we address the things we addressed in the design and I find update this text. Okay, so what I usually do is just put some quick descriptors of some of the main elements on the page and just key features again of this home page. And then we can move down and they usually like, for this next step, usually pick three main other features of the app and then highlight those individually. I like to do that with this text on the right and then the image on the left, So a copy and paste this down. And the first thing I want to discuss is kind of the on boarding, and it varies. What will go after, like a key feature description, um, keep it pretty unique to the project and unique about, like, the solution, for instance, like on boarding, is not unique here, but the ah on boarding is unique, but on boarding is not normally like something that has to be unique. The on boarding process in this actually includes a lot of information input from distributors, which is a pretty cool aspect. And some of the things we noticed that we're a pinch point. So that's why I'm including a long story short just make sure you include things that air unique and interesting solution. Um, like a sign in page is an interesting, um, it's necessary, but it's not something you'd want to highlight so we can preview this really quick. Okay. I usually like to use gifts in these situations. It just helps explain mawr of what's going on. You don't have to put him, but generally speaking like it's going to save you some space because I can put a couple screens and a gift. Um, I don't have to have, like, three screens here to explain what's important about the on boarding. Um, that could go. I could do another video later about how to create gifts like this is, Well, um, let me know if anybody would be interested in that. It's a little easier than you think it would be. And so I repeat this process, um, for usually about three main sections of the solution. So you contract this town, and I like the alternate on the left and right of the page. Just so it's not always always so predictable about where things are gonna be, but again, I'll do this and kind of repeat highlights of what is what the solution is. But I'll go in fast forward here. Okay, so now that the main features a solution or laid out, we have the main areas highlighted here with some descriptors. And again, this is meant to me the highlights of the solution and the unique parts about it. I don't feel the need to go into super detail about each and every screen you designed. You can save that for the interview again, but you just want somebody to be able to scroll through and understand the main features and kind of what's going on. 13. How To End a Project: And so for every project there should be some aspect of testing that took place. I usually like to. For case studies leave that, um for the end, I don't mean testing has never occurred. I just mean in the sense that it's good to end with feedback or things that you learned. Um so for this project will kind of round this out with, like, a testing section that was done. Professional projects are going to be a little different in this regard, and that's just because, generally speaking, there's a lot more testing that would have gone on and a professional product so you can talk about it more. But that's still all the same in the sense that it should just be the highlights of testing . But this one, we're gonna round it out with testing and kind of what was learned from this. And the testing was actually done with the same group that some of the initial research was done with. So we'll add a couple of images here for context for that. So for this, there was actually a video of testing on, and that's what we're gonna drop down here if you have something like that. I think it's always good to include at least some kind of video imagery of your testing, because again, if it's like a case study or a school project, there's no proof that you actually did it. And it's just got a good validation for whoever's viewing your portfolio that you did. In fact, do researching or not just like making it up. Select Lee With this project, we do have kind of a cool testing video. And again, if you have something like this, definitely always encouraged to include it. It's a political combat really quick. Make sure that's all Americans. Okay, so like, here is a cool kind of overview of some of the research that was done and the testing after the fact. So just like a nice touch, a cool video, have for sure. And then the way I like to round out every single project, no matter professional school or case study is with kind of results and reflection. This is very, very important part, um, for your project to talk about how it went and what you would improve, what you would do differently, things like that. It's also very interesting Teoh to discuss failures here. You could do more than one paragraph. I'm just gonna keep it The one paragraph for this, But it is very interesting to hear if you failed. How did you fail? What did you learn from the results of the testing? If anything went wrong, eso definitely include some results in reflection on Be honest, too, because everyone knows that projects don't always go perfectly. So talk about what went bad. Um, it just makes you seem more human and makes you seem honest as well, which is always good for a portfolio. And then, actually, the last thing I'm gonna add here is the other work section from our last project. So I'm just gonna switch on over to that. And how fast for this. Okay, now that that other work section is in and again, just a reminder I will be populating this with some other projects before this one site gets published, but always good to round out the project page with that. And so it's actually go back out to the home page and your quick review 14. Recap: So here we have an introduction description of the name talk about who you are and what you do. We have our first project again. If you have professional work, make sure that's your 1st 1st and up front thing. We can click in view this project now. So we have our beauty image right here at the top name, product description and again, can't really show anything because some of this works under an Indy. A. So just context about what the work is and then explanation of the role of the company. Other work for the slider. Go back an excellent me double check to make sure this button is connected and I'll update this Texas Well, it is not connected. Well, guy didn't do that really quick. And just a quick note on the name here. Teoh. I don't usually just leave it as a name. I like to add some kind of descriptor Teoh. Just so it's because route isn't really hyper descriptive. Um, and it's good to kind of have an explanation of what to do This right next to it. Moreover, view project, and again we get this beauty shot. Let me scroll in get the name, description. And then we have our, like, foundational research here. Some of the information that was gathered at the beginning, a big stakeholder analysis done here. You can see a man, and then that kind of all comes together as the pinch points and kind of the big problem that we got from research at the beginning. The highlights. And then we go into our solution key features that we know here, a main scream, and then three features that are pretty important for our solution and then descriptions to the left and right of those. And finally, I always like to round out with some kind of testing or feedback. Um, now it's done really well here with this video and results in reflection. And just so we look, this is probably about a medium length project which I think is pretty good to aim for. Always start with the beauty shot has a reminder. Quick description at the top and then highlights of your process. That's the biggest thing here. We have highlights of the research done in the beginning, and then we have highlights of our solution. And then right at the end, we have reflection and then links to other work. And what I'll do is I will literally copy and paste this exact screen for every other project I add. So if you guys need Teoh, go view this live website after it's done and you'll be able to see all the other projects were set up just like this. And the last thing to review is the about page. And again I'll update this with an image of the of Shannon and just kind of some interesting information here. A link to a resume and a contact page again. You don't have to have all your information on your resume if you don't want Reina people to be able to stalk you. So it's good to have this contact form. Uh, just if anybody needs to get in touch, but that wraps it up for this class and I'll go ahead and start working to finish this portfolios just so everybody has it for reference. Um, thanks for staying tuned. Everyone 15. End: Okay, so that wraps it up for this class. I'll be putting the website. You Earl, in the description. There's some other projects I added that I didn't include in the video. That could be good to reference. If you're questioning how to lay out some other things, there's some user flows, wire frames, things of that sort that I laid out in other projects that were more important part of the process. So feel free to check that out if you want reference on how I laid anything else out. Other than that, I'm excited to see what you guys do and start putting your portfolio's together and let me know how it goes. But thanks for watching.