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.