this video is made for anyone who's working hard to become a ux designer
today i'm going to talk about how to make your first ux portfolio i'm aliena i'm a self-taught ux
designer and welcome back to my channel first of all in today's industry standard your ux portfolio
should be a shareable link that is presented in your resume and it should be a digital website
where people can view your case studies in today's video we'll be focusing on building the homepage
of the portfolio well let's start with some common mistakes to avoid because i've made all these
mistakes before and please don't make the same mistake the first thing that i don't see a lot
of people talk about is rushing through choosing a website builder and start building your portfolio
even when you don't have all the assets ready assets mean the visual of the portfolio the banner
of each case study if you skip one step in the ux process then have you tried to fill in the gap
and just re-do that step usually for your first job you will need three case studies at least one
of them shall be a real life project which means you work with actual client or did a collaboration
among a group of designers and engineers and work within design constraints so please do all
of those before jumping into you know thinking about i'm going to get this portfolio out there
another common mistake is skipping the feedback you know as ux designers we understand the
importance of gathering user feedback but that's the same when it comes to our own portfolio
so instead of just like staring to your portfolio the entire day and try to make it better what you
can do is send it to three of your friends and ask for feedback and they will directly tell you
what they think another very very common mistake and very problematic mistake i see among people
is unprofessional visual i know some of you don't like the ui side of things but if you
want to become a ux designer you still need to have decent ui skills and a lot of jobs are ui ux
designers these days so having professional visual design is super important and if you want to check
out more on that i've had this video here now on the other side of things some people have really
good visual presentation but no explanation this is another problem especially if you came from
you know a more traditional design background you might have a really good looking poster
but there's nothing explaining the process now when it comes to ux portfolio you need to make
sure that you explain through how you make certain design decisions now let's jump right into how to
build our first ux portfolio the first step is to design the structure of your home page and i
highly recommend you to sketch this out on paper so the first recommendation is this structure
now the benefit of this structure is that it showcases this four projects
another one that i recommend is this structure and this one showcases only three projects so if
you have three projects you can go with this one but as you can see everything's simple you don't
have to go with like a crazy design or a super creative design it's actually way better if you
go with like a simple design please select one and now let's move to our second step
the second step is simply to decide which case study you are going to choose and
present on your portfolio and in which order now usually we go with like a chronological order
but my suggestion is that for the first case study it has to be the best one that we're
going to present in the interview a real life project a collaborative project and a project
you're proud of the other three or the other two projects can be your personal projects
and once you have that ready please just fill them out i just filled mine out i simply name it
based on the product name that i worked for in the top left will be the project that i will highlight
by the way some of these are fictional projects that i've never done before
but i need to have it here because i couldn't present what i did in my previous startup here
but you shouldn't make things up yeah now let's jump to the third step this
step is to sketch out the banner of each project and i will present something here
so for my KEES app i sketch out two app interface look because it is an app and for my shadow a
student challenge it is a web design so i did like a web design look and for the mamo book
it is a responsive web so one desktop one mobile and then for google internship if it's like a
brand like google everyone knows it then you can just put a google logo in the middle now the key
is that you need to design this look based on how they work beside each other you know so let's say
if i decided to go with a more complicated view like present five interfaces for the KEES app then
i probably should go with something simpler on the right side which is the shadow student one and the
weight of these design all matters that's why you shall design it side by side just to have a
structure in mind these banners are you know what get you into the door of this entire industry if
you want more inspiration when it comes to how to design a banner please check out cofolios.com this
is a website that showcases a lot of successful ux portfolio now let's go to the first step and i
will take you through how i design the banner of my portfolio let's go to figma let's start with
building a frame the dimension i'm using right now is 1000 times 600 and i will give it a name
based on the project then i'm going to drag the user interface i want to present into this frame
they are super large so let's adjust the size to fit it into the screen now let's
take a look at the sketch that i did before it is two of the screens on the bottom
however i see that if i do something like this i will be blocking some of the key design
i decided to go with something one up and one done something more like this now for the next step
we're going to select a mock-up for our iphone the way to do that is to go to explore community page
on figma and then type in iphone mockup for today i will choose the flat iphone mock-up
you can duplicate it to use it usually it will gives you a little bit of introduction so here
it says paste your design here i already copied it now i'm going to paste it here and adjust the
size to fit this mock-up after pasting it ta-da is reflected over here in some of the template also
allow you to change the color of the mobile so for this one i'm double clicking it selecting the body
to change my mobile color into a white color i didn't go with the black color because i think
the black color is a little bit too strong on the visual and i want to highlight what is in
the content so once this is done we can select the frame that we want and then export it over here
i usually go with something higher than what i need we do the same for the other
one and then we replace what we have here with the new design that we have
now what we can do is to choose a background for the banner and usually how i chose the background
is i start with the main color of my design and i slowly move it to something that's lighter
oh and i think that's that's gonna be okay yeah and that looks good and the same
happens to all of my other design for shadow a student i will quickly take you through how i did
you know this kind of shadowy thing on the back over here because this is super important don't
go with a drop shadow instead of doing a drop shadow what i suggest you to do is simply create
another rectangle and this rectangle should be in the area you want the shadow to be in and then
you can change the color into dark black and then go with 30 percent opacity and then go to effects
and then choose layer blur click this sunny icon and adjust the blur to something like 30 or 40 50
whatever you see fit and then move this layer underneath the original bigger layer
and adjust it if needed for example i can make it a little bit lower to 20.
and what this does is that it gives you a little bit more of a floating visual now remember that
good design comes with iteration so if the first trial it doesn't look good for you just keep
iterating until like a combination look really professional now let's go to the next step which
is preparing the text that we will need for our homepage the first section is the intro section
the second section includes your case study titles and subtitles and finally is the footer section
now i suggest you to use grammarly to prepare all these text just because
you don't want to make a spelling error or a grammar error in your home page
now let me take you through how to actually build our portfolio on the website and view it on a
website so in this case i recommend you to use three platforms if you are not on a tight budget
maybe use squarespace because squarespace will give you a customized domain which is yourname.com
otherwise you can also use behance and notion behance and notion will also do the work
and today i'm just going to take you through how i use squarespace to build out the home page of
a portfolio let's first go to squarespace you can also try this out without really paying anything
so i'm just going to teach you how to do that go to get started once you land it on squarespace
and then it will ask you to choose a template click portfolio on the top left
and then go to photography scroll down and then choose a very simple template that resembles the
styles you design for me i'm going to go with bolboa bolboa click start with bolboa change the
site title to your name continue close before we go into design anything i suggest you to
do the following settings just to preview your website without really signing up to squarespace
go to settings go to site availability set it to password protected
and then click upgrade to publish go back to settings
go to domains click this thing here and then change the site id to your name
now let's go back and change everything we need to the home page starting with the header for
the header go to pages and then you will see main navigation main navigation is what will appear on
your header the template has work but i'm going to delete work click setting and then delete folder
we can keep the about page and we can design that later
and then for the instagram i will click the setting and change it to linkedin
for you you should definitely paste in your linkedin link here i'm not going to do so
because i don't want to expose my linkedin link save now we can see that it becomes aliena cai
about and linkedin the second step let's change the text and content for the body part go to
what we prepared before the intro statement that we have and then paste it here double click it
paste it here now when you paste something to squarespace or any website it probably wouldn't
look the way you want it to look so there are a few things you can change things around
first you can break paragraph into two paragraphs second is to change the heading style
to something smaller to bold it to unbold it change things around to make sure
everything looks good on your side and for me this looks better than what i had before
now for the body part the template already provides you a lot of sections but you don't
need them because we already designed ours so just delete everything don't worry you don't need these
remove remove remove remove remove remove after we removed every section that we
don't need let's add section click add blank click the add button choose image
and then upload all the image we designed in the previous step don't forget to download them first
and please make sure it's high resolution after you're uploaded you should be able to see it here
let's click add button again and then add all the other images
once you are done with adding the images you can now drag things around for example i want to place
my second image to here that's why i'm dragging it to here and the fourth image beside the third
image and ta-da there's like big structure ready on the portfolio now let's add the text to it
add text box by clicking the plus sign again text and copy it from whatever you prepared
you probably need to adjust the style a little bit to make it work and i usually add
an actual line into each of my text block so that it looks good on the mobile version
let's add the tags for the other projects as well
and make sure we change the style to align with what we did for the first project
sometimes there will be like extra text box that just provided by squarespace
but you don't need those so we can just remove those and now for the footer what
we need to do for the footer is that we can swap it to a really simple one
we can remove it first and then we add section and choose like the centered aligned simple one
here we go social links we don't need those we can delete those and then we use the text that
we prepared in the footer section here for me it's just turning trying to alienate alright
reserved save click done save now let's go to a guest account and then put in the domain name
if the content looks right we can do the final step which is adjusting the visual of the
portfolio now usually on squarespace the text the phones everything set up by their designer
so everything should be good but sometimes let's see for the description of my project
i want it to appear a little bit bigger so what i can do is go to set styles
fonts i can click here and then it will just automatically give me what i used
i know i was using paragraph two for for the description i wanted to be a little bit
bigger so i would set it to 1.1 it's a one and it's getting a little bit bigger so you can do
some little adjustment here that can be helpful another thing we can adjust is go back to here
styles there's spacing and we can add some more space margin to the portfolio for example five
if we save it now and then we refresh this page tada there's going to be more space margin on the
side and then looks it looks good so that is how i built my home page for my portfolio and
i hope this video helps some of you for the next step it will be actually creating the case study
connecting to each of this case and also linking the image and the text to the case study page
that will be for my next video so stay tuned and i hope you learned something from this video
i shot this video four times already because my camera just keeps dying
anyways my camera is dying again so see you next time have a good day goodbye