Build Your Online UX design portfolio | Christin Watts | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Build Your Online UX design portfolio

teacher avatar Christin Watts, Product Designer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      2:00

    • 2.

      Creating your portfolio website

      15:15

    • 3.

      Questions & answers

      4:16

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

412

Students

1

Project

About This Class

Are you eager to enter the UI/UX field but unsure of where to begin? You may start for your new skills and add UX designer to your resume whit this class.


I'll be taking you step-by-step through the process of making a portfolio in under an hour. This is the portfolio I put up as soon as I graduated from my UX bootcamp, and it was this portfolio that in only one month got me hired as a UX designer on a full-time basis.


I hope this class will be helpful to you as UX Bootcamps typically won't teach you how to make your portfolio website!

Meet Your Teacher

Teacher Profile Image

Christin Watts

Product Designer

Teacher

Hello, I'm Christin. I work as a product designer and content producer full-time in San Francisco. In an effort to increase access to design education and to encourage people to realize their own creative potential, I utilize my social media channels to share my expertise and knowledge.

See full profile

Related Skills

Design UI/UX Design Web Design
Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hi everyone. Today's video is all about how to build your UX design portfolio website. I'm Kristine and I'm a UX slash product designer working in San Francisco. This video is a step-by-step tutorial on how you can create your portfolio in less than an hour. This is the portfolio that I created right out of my UX design boot camp. And it's the same portfolio that helped me land my first full-time UX design job after one month of finishing my boot camp for this tutorial, I'll be using Wix to build my website. I also do not recommend anyone who's starting out in UX design to code their own website? No, no, no, do not waste your time doing that. I know some people offer that advice and maybe that's what they're really interested in unless you're becoming a developer and that's what you wanna do. Do not waste your time learning how to code because it is a whole, another beast. I don t think it's really worth your time is going to take away energy and focus from what's really important, which is that you improved your designs and iterate on the content strategy of your case studies. I'm also not a fan of having only PDF versions of your portfolio. If you're applying to work in tech, you should do what's industry standard? And what's industry standard is that you have a portfolio website. Ux boot camps won't teach you how to create your portfolio website. They'll give you project prompts so that you can create your mockups and come up with deliverables. But they won't actually teach you how to write case studies or how to use a website builder to publish your website. I stopped a lot of designers on LinkedIn looked at their portfolios, read a lot of case studies to understand how to structure my own case studies. Everything that I'll be sharing with you today was something that I really wish someone had told me or made content about back in the days. So you're welcome. I also want to make it clear that this video is not going to cover how to actually come up with the content of your portfolio. That's gonna be a separate video because I don't want this video to be one hour long. So I got you. But not today without further ado. Let's get building. 2. Creating your portfolio website: By the end of this video, we're going to create something that looks like this portfolio. This is my first UX design portfolios. So there's a lot of things I would have done differently if I were to go back. But I'm just going to show you what it looked like back in the day. This is a very basic layout of what a UX design portfolio usually looks like. There's nothing really fancy about this. It's a two-by-two grid with case studies. And I would recommend that you have at least three to five case studies, at least two to three of them being UX design-related. The other ones can be more visual design or graphic design-related. The first case study that you should have up is the project that you're proud of stuff and the one that you would be interviewing with and talking more about in your on-site. So we're gonna be building out one of the case studies is my Levi's case study. What it really is is a bunch of text and images just put on a page. There's really nothing super fancy about this case study either. It's really more about the content. And this video again, is not going to be about how to come up with the content of a case study. I already drafted the content of the case studies and what I would do is put them in a Word doc in my notes, I have all the content written out here just because it's easier to move things around, is easier to write and edit my case study on this, rather than having to change everything on my website and there's less back-and-forth when you write out your case studies before you actually work on building out your portfolio. So let's start from the very beginning. You create a new account and you go to create a new site at the top, right. And what that's gonna do is it's going to walk you through how to set up your portfolio. So I want a designer website. I want to just choose a template because that's going to save me a lot of time. The template that I chose. There's a lot of templates like, Oh, this one's nice. I would go with this one. I think I've seen this one being used by another designer. That one's pretty cool, but the one I used, why can't I seem to find it. Okay. I think it's because I'm currently using that template so I can't, I can't use it anymore. Let's do this one. I'm a little bummed because now my portfolio is going to look a little bit different, but it's alright, okay, yeah, this is a nice template. What I'm gonna do is I'm going to remove some of these things. The first thing I like to do is go to theme manager and change textiles. I actually like the textiles of this one, so I'm just going to keep it as is maybe the paragraph. I want to change it to something else. I like Avenir light, but Georgia works. Okay, let's just go with what is available here. So I'm going to add text, titles, themed texts. Put heading one. And this is going to be Hello, I'm Christine, going to put an emoji there. Then that is clearly not me. So I'm going to change image, upload media. What I'm gonna do is crop this to make it more center aligned. Like so. Perfect. Pop up. I'm gonna do Chun, Chun, john buns, Chun, buttons, buttons. It's irrelevant. That little texts is irrelevant. I'm also going to add a paragraph. And what's nice about it is you can customize each text, customize, customize the line spacing so that it doesn't look as tight. Yeah, I like that. Okay. I'm going to move that a little bit so the grid is there to help you stay within that space so that when someone is looking at your portfolio on an iPad, all your content, all the important contents isn't out of that grid, so there'll be able to see everything in a nice view. I'm just going to take it out. You can add social bar. What I like about the Wix editor is that you can Shift, hold Shift, and click all the content and just move it down. It's like working on Figma. It's awesome. And as we go down, we're going to use this space to put our case study. I'm actually going to delete this whole row because I am going to put. My work. My work. Okay. I'm going to just have a simple two-by-two grid. So before we do that, I'm going to change the logo here, add my own logo. So I'm going to put image, my uploads. We're going to add that to page and got myself a logo. Whoops, I drew this on Procreate. I was born and I was like, I'm, I'll make myself a logo. Actually. I'm going to hide about us is gonna be work About page. I'm going to delete this. Okay? What this is is you can put an anchor on this. You can add anchor to the site. So once you add that, this line, basically clicking on this will take you to where the line starts. I'm going to add a blog because I want to show that I blog, create a new page and put blog and have that be my second line items. So you see right here work blog about for this logo, we're also going to link into the homepage. So you go to page home. Yes. Done. If I'm on a different page and I click on this logo, it's going to take me back in this bio section was really important is that you make it super clear what you do, who you are, and why someone should hire you? My current portfolio says product designer, but when I was transitioning into UX at that time, I labeled myself as a UX designer because I wasn't really part of a product team and I wasn't owning a product from the initial ideation to the final rollout. I wasn't the product owner. You can write a short little blurb about what makes you special. But honestly everyone's bio is the same for UX design. So I wouldn't sweat too much or spend too much time on this section. Let's go to the work section in order to build out that two-by-two grid, you're gonna go to Add and click on box. Here we go. Here's my container box, and I'm gonna make this size the same for 67. Once you have this box, you're going to add a hover interaction. We're going to use a hover interaction later. And then you're going to add an image. I'm going to click the Levi's. I added it. I'm going to put this to 467, attach it to the box. And I'm gonna go to hover, and I'm going to choose effects, okay, So I'm going to make it grow. Oops, I'm going to customize that. I'm going to make it grow like a 110% ever so slightly. So if we look at that, Let's preview is going to grow. I also want a little shadow. You see a little shadow there. Actually the shadows too strong. So when you hover, I also wanted to have like a dark overlay. So I'm gonna go to container box, put this as the same dimension. We use this so I have it aligned. And then I'm going to make this opaque 50%. And then I also want to add text. So I'm going to add text that is white. And I'm going to call it UX design. And then I'm going to add another heading on top of it. Why? Center align it. Okay, so let's preview this actually. So every time I hover, it's going to say Levi's UX design. Now what I'm gonna do is I'm going to Control Command or Command C, paste and just paste this on the page. Then I'm just going to switch out the copy and the images. So I click this image, change the image, change image, put this for lineage, which was a graphic design work that I did. Change image, put, touch. And there we already have the grid. And I'm gonna go in and change. The title graphic design, Touch, marketing design, UX design. And I'm going to pull these guys down a little bit. So let's preview that. Have the Levi's rumor lineage and touch up. Now we're going to build out a first case studies. So I'm gonna go to pages and I'm going to create a page called Levi's hide. Yeah, there we go. Okay, so the page still exists, but it's now hidden from the menu. I'm going to start adding texts. I'm going to add my header. I always start off by writing out my case study first, and then I start adding images to complement what I'm writing in my case study. So I already have the title that way I'm not going back and forth and I have a bunch of texts here. I'm just going to copy and paste. So add texts themed text. I'm going to also put more line spacing, easier to read. And then I'm going to add an image. I'm going to bulk upload all my case study images. This is the main image. What I also love about this Wix editor is that you can add multiple images all at once. If I wanted to, I can just bulk select and add them to the page. I'm not gonna do that because that's going to be a little chaotic. So I'm just going to add two images. Eight, twenty eight, twenty center, align it. Boom. Then copy this title. And copy and paste the problem and process. Oh, something changed. Whoops. Oh, also you can Command Z and it will revert back to whatever it was. Back in the day. I I felt like I had to put up post-its. I think if I were to redo my portfolio now, if I had finished boot camp now I probably wouldn't put any post-its because that's something that a lot of junior designers put. Unless you let like a company-wide or like a very big team initiative for brainstorming session at an actual company. I just think it's not as valuable of an artifact to have on your case study. If you want to put it, you can you don't have to. I probably wouldn't if I were to go back. So now that we've created the Levi's case study, we're going to link that to this thumbnail here. So how are we going to do that? Is we're going to click on the container. Go to hover. Because you're gonna be clicking on the hover state. You're going to add to hover a button. So this is a hack that I found on Google because I couldn't figure out how to link a page to this box. So I'm going to change the design. Make the background transparent, go to Text and minimize the button text completely so that you don't see it. You're going to link it to a page. I'm going to click Levi's. We're good to go, so we're going to preview it. Oh, there's a hover on the buttons or we're going to keep that to 0 opacity. So the gray box and then show it did. I'm going to click on it. It's going to pop up the case study, but I don't want that weird transition. So in order to get rid of the animation, we're going to go to page transitions, click none. What that's gonna do is let's go back to the homepage. You're going to click on the Levi's case study and it gets rid of that weird animation when we're done and we made it. 3. Questions & answers: When I asked you on Instagram to submit your questions, a lot of you have asked me how many details is too many details? Can you explain what should be documented and what shouldn't? I tried researching online. The answers I get are so vague, I'm not sure which parts of the process I should highlight or emphasize before you build your website to spend a good chunk of time thinking about the UX of your portfolio and getting clear on the messaging. And the best way to do this is to write out your case studies before you add any images to each of your projects and answer these three questions. Number one, what was the products and what was the problem you were trying to solve for number two, how did you solve that problem? What did you do, number three? Well, as the outcome or results because you solve that problem with your designs. Another person mentioned, I keep hearing different things between focusing on visuals versus focusing on telling the story. Which one is it? You need to tell a story with compelling visuals? That is my answer. So the answer is really you should have both. I know that phrase, telling a story gets thrown around all the time in UX design without really means, is do people understand what you're trying to say to people? Understand what you actually did to solve the problem was a problem and actual business or user problem. And not just a re-skilling of an app that you like. And so I would ask yourself what details when matter for anyone who's reading my case study to help them understand what I did with this project. And my rule of thumb is if a high-schooler can read your case study and they can understand what you actually did. That's a good case study because anyone who has no background of UX design or your project should be able to understand what you were trying to fix with your designs. And instead of showing everything to be your default, you should thoughtfully consider what are the interesting parts of your projects that you really want to highlight and how do you bring that up to the top of your case studies so that you grab people's attention. And how do you naturally progress into sharing how you define the problem space? What kind of solutions you came up with efforts, how did you validate your designs and what was the result of the redesigns that you did? Another question was hiring managers see skim through so many portfolios. How do you stand out? Do you keep it super simple? Or a lot of info, clarity of message is really important. So that is something that you always want to consider while you're working on your case study is do people understand what I'm trying to say? If you're someone who's starting out in UX design, the one thing that can really make you stand out is having good visual design in your case studies, I see so many boot camp grabs portfolios that only have very low-fi wireframes. And they're really quickly, I'm gonna be honest, some of them are really ugly and I'm like, you're a designer. You should know the basics of visual design. I'm gonna get so much hate by saying that I'm just gonna be real. There's a way to make great textboxes and gray boxes prettier than the average. I tried to show 90% of the images that I show on my case study. 90% of them are high-fidelity mockups. I rarely show wireframes. And you might be asking, Well, Christina, I don't have background in visual design. I just don't have the eye for it. What do I do? You can develop an I and I really believe visual design is something you can improve on. I used to not be really good at visual design and now, like people tell me, I really liked your aesthetic. One great way is to study good visual design. And all of these sources are out in the public for you. You can check out a lot of different design system libraries of different companies like Google Material Design and Airbnb also has their design system out in public that you can see and you can see the style of their buttons and their components. It's really important that you familiarize yourself with the different UI components that are being used in different apps. Download a bunch of different apps to see what kind of designs they're using and what kind of interactions are using for different flows. That way as you study design and as you look at a lot of good design, that's how you can develop what good visual design is. And I will see you later. Bye.