How to Create Your UI/UX Design Portfolio? | Beginner's Guide

as a UI ux designer having a strong online presence is essential to Showcase your skills and attract potential clients in this video we'll be discussing the different types of portfolios and how to create a successful design portfolio step by step without coding so let's dive in generally there are two main ways to create a portfolio free platforms and self-hosted websites let's begin with free platforms there are many platforms that allow you to host your portfolio for free but the most popular one is behance behance is a great place to start showcasing your work and getting feedback as it has a large audience and is easy to use to create a portfolio on behance simply sign up create a project and start uploading your work you can add images text videos Etc you can even embed your figma prototype here once your project is complete hit continue give your project a clear title and add some tags to help others discover your project include the tools you use to design this project and hit publish you can also customize your portfolio's appearance at the bio and include contact information next let's talk about self-hosted websites if you want to take your portfolio to the next level and maximize your chances of getting hired a self-hosted website is the way to go creating your own website gives you complete control over your portfolio's design and user experience and to be honest it's more professional to have your own cell phone set portfolio website you may ask should I code my own website no not at all even if you know how to code I highly recommend not doing it because this can take a lot of time and effort and can detract from the time you could be spending an actual design work so what's the solution you can use a website builder of course there are many website Builders to choose from but in this video we'll be using hosting which is my favorite for many reasons to get started click on the link in the description or open hostinger.com now head over to the hosting menu and from here click on web hosting here you can choose the plan that works best for you but in my opinion the premium web hosting plan is the best option to go for since it provides you with a free domain and unlimited bandwidth on the next page you can choose from these periods I'm gonna go with the 12 month option here you can enter your email address and finally make sure to add the design with RH discount code to get an additional discount once your account is created you can start the setup process here you will be asked a few questions so I'm gonna answer them quickly and here I'm asked whether I'm gonna migrate a website or create a new website I'm going to create a new website now we need to choose a platform whether we want to use the hosting your website builder or WordPress for this example I'm I'm gonna use the hostinger website builder but if you want to have more flexibility in terms of features and customization options you can use WordPress too now it's time to name your website if you already have a domain name you can use the nas option to connect it to your website but I'm going to claim my free domain here enter your desired domain name and see whether it's available or not you can simply enter your first name and last name next you should fill out this form to complete your domain registration alright here is where you should select a template for your portfolio website here as you can see we have different categories of websites you can go to all templates fashion photography Etc I'm going to select Portfolio and here as you can see we have many different portfolio templates the majority of them are good for photography portfolios but that's not a problem because we are going to customize it anyway I think this one looks good of course you can go ahead and preview these templates if you want to check them out before you select them for example here I'm gonna click on preview and this is basically the template we are going to use in this tutorial here as you can see we have the hero section I'm going to scroll down we have this nice animation we have our first project the second project the third one the fourth one then we have the call to action and the footer I think it's a very clean template for our portfolio of course we are going to customize it a little bit to make sure that it suits our needs okay so once you're satisfied with the template you chose you can simply click on start building here and here we are now we are inside the website builder and it allows us to just drag and drop elements and move elements around easily you don't need to code anything that's so intuitive the first thing I'm gonna do is get rid of these two images because I think for our purpose our hero section should be clean so I'm gonna just get rid of these two images select them and hit delete I really like this large headshot on the right side that's why I'm Gonna Keep it and I'm gonna modify it in a few seconds but before I do that let me go ahead and change the typeface of this whole website okay because I'm not satisfied with this typeface to do that you can simply go to to the website styles on the left side right here here is where you can find all your color styles and text Styles all right I'm going to scroll down and I'm going to change the typeface to monseret and here as you can see the heading typeface has been changed but not the paragraphs typeface because this project uses two different typefaces so to change the paragraph text as well I'm gonna click on edit text Styles and here as you can see for headings we have the monsera typeface but for paragraphs and navigation we have this IBM Plex mono typeface I'm going to change it to monserret as well alright let's start by customizing our navigation bar here we have a logo I'm gonna select this nav bar and as soon as I do that I can click on change logo here you can just replace this image with your own logo if you don't have a logo you can just click on this logo maker and just use the hostinger logo maker to create a logo quickly but I will already prepared an image I'm going to replace it here there it is I'm gonna select it and the logo has been replaced so our nav bar looks good now let's move on to the hero section here we have this headline I'm going to change it to hi I'm Arash and also I'm going to add an emoji here a moving hand emoji so I'm going to choose this Emoji there we go it looks good now I'm gonna hit enter here and I'm gonna decrease the margin between these two lines to eight and next I'm gonna select this part including the Emoji and just increase the font size I'm going to increase it to something like 96 and you can also make it bold just like this all right so far so good what else do we need we also need a subheading a description to describe what kind of designer you are briefly okay so for that I'm going to click on this add element here and just click on this text element there we go I'm going to bring it down here just like this and I can simply move this text element up and as you can see it snaps to the grid automatically so I'm going to place it right there move this up and while this text is selected click on edit text and just change its color to maybe light gray I already prepared this subheading so let me just copy and paste it here there it is the font size is too big so I'm gonna just change the text style here I'm going to change it to maybe heading 6 and I need to change the text color once again and let me enlarge this text box just like that next I'm going to increase the line height of this text element so I'm going to click on edit text and just click on this more options and from here you can just adjust the line height easily I'm gonna set it to 1.6 here we have two more elements I'm gonna get rid of this email address we don't need it here in the hero section but instead I'm going to select this text layer and just in enlarge it just like that and here I'm gonna type UI ux design interaction design and now it's time to replace our image with this one I'm going to select it click on change image and replace image I'm going to upload a new image here let me select it and there it is you can also customize it if you want you can make it rounded you can simply click on change image go to style and just adjust the corner radius okay for now I'm gonna keep it at zero just keep in mind that that option exists as well and also I'm going to make sure that it snap to the grid properly alright so far so good now we can move on to the next section here as you can see we have different sections with different projects okay and as I mentioned before this template works best for a photography portfolio because here as you can see we have different images like this with different dimensions but for a UI ux design portfolio it makes sense to keep it simple so instead of having multiple images here I prefer to have one single image that describes the project clearly so it's going to be the main thumbnail of our project so what I'm going to do is this I'm gonna get rid of these sections okay let's start with this one just select this yellow section and just click on this trash icon to remove it let's do the same thing here and here okay but I'm gonna keep this first section so what do I need here I'm gonna need one image and maybe one heading okay I'm gonna remove these additional text layers and also I'm gonna get rid of this image you can keep this one that's fine now I'm gonna select this image and just change its Dimension here you can decide what kind of layout you want to create whether you want to have a two column layout or a one column layout so if you want to have a one column layout you can simply quickly expand this image just like this across 12 columns or you can just make it smaller to take up six columns instead of 12 columns that's up to you for now I'm going to make it larger just like this and I'm going to decrease its height like this I think the aspect ratio looks fine for now I can move it down and just move this text up just like this alright perfect now I'm going to replace this image with a good thumbnail of my project I already prepared it and you need to make sure that the thumbnail of your project looks amazing it's so important because this is the first thing that the visitor sees your potential client sees so you need to make sure that it's well designed and it grabs their attention immediately so here I'm gonna change the image replace the image let me just upload a new file there it is so here is the thumbnail of my project just like that you can adjust the aspect ratio if you want I'm going to keep it as is for now now I'm going to select this text this top one The Heading and I'm going to make it a little bit larger so instead of heading 6 I'm going to choose heading 5 just like this and just expand this text boundary just like that you can also decrease the margin between these two text layers to eight so here I'm gonna paste the Project's name just like this all right I think it looks good so now if you want to add more projects to this page you can simply select this text element duplicate it move it down just like this and just increase the height of this section okay and just duplicate this image hit Ctrl D or command D bring it down and just replace the content of course you can change the layout if you want you can change the backgrounds color if you want you can also add a different section you can just click on this add section button and here as you can see we have some pre-built sections you can just go to Gallery headlines images as you can see we have different options make sure to check out all these options they are so helpful for now I'm gonna get rid of these two duplicated elements I'm gonna add just one project to my portfolio here so here as you can see we have this learn more about this project so what happens when someone clicks on this link let's give it a try I'm gonna preview it and I'm gonna click on this learn more about the project and we will be taken to another page okay so now it's time to go ahead and customize this project page this detail page to do that you need to head over to the pages and navigation and here as you can see we have two different sections we have the main navigation section which includes our main Pages like work about clients contacts all the pages that you see in the navigation bar and also we have some here hidden pages okay we have our project Pages here we have four different projects you can go ahead and remove them if you want but for now we just need to click on Project one so what I'm gonna do is change this text I'm going to type project one okay and here I'm going to type the Project's name there it is I'm gonna change the color like this and here we have a few other text layers we have model which doesn't make any sense so I'm gonna change it to completion date just like this I'm going to select this one remove it and just expand this text layer just like that and here we have client I'm Gonna Keep it I'm just gonna move it to the left side and just change the client name to whatever client you want all right good let me scroll down here we have the description of the project and also we have a few images I'm gonna get rid of these sections we don't need them so I'm going to select this one just remove it it this one as well remove it and I'm gonna keep this one okay so here again I'm going to replace this image of course you need to prepare some assets for this project detail page to make it look professional and detailed but for now I'm just going to replace it with the image we used before just like this you can adjust its Dimension however you want and here you need to add the details of this project what this project was all about what was the problem you were trying to solve and how you solved them okay I already prepared this information so I'm just gonna copy and paste it here let me just paste it right there there it is I'm gonna select it and I'm gonna change the style to paragraph one just like that and also I'm going to increase the line height to make it more readable and it shouldn't be bold just like this I think it looks very good I can change the alignment however I want of course we can go ahead and add more sections but that's not the point I just want to show you how you can structure your portfolio alright so now that's our project detail page is ready let's get back to our home page and we need to link this project with that project one page that we just created this one okay so to do that I'm gonna just select this text here and as you can see here we have this link icon I'm going to click on it and by default it's set to project one okay if it's not make sure to open up this drop down menu and just link it to project one hit save and also I'm going to select this image and make it clickable as well to do that click on change image and then go to action here as you can see we have on click nothing I'm going to change it to open link and here link to project one just like that now if we preview it look what happens as you can see this image is clickable and if I click on it I'll be taken to the project detail page as simple as that alright now let's go ahead and check other sections like this contact Section if you want you can just remove it entirely since you have this contacts page but I think it's a good idea to keep it here you can customize the information here and also you can modify the footer actually I'm not satisfied with the footer so what I'm gonna do is remove this footer and then add a new section from footer here I'm gonna pick one of these Footers maybe this one and here it asks me whether you want to add it to all pages or only to this page I'm going to click on add it to all pages just like that and here as you can see you have these social media icons so make sure to edit these social media icons basically you need to link them to your own social media Pages alright what else do we need well here as you can see we have other Pages like about clients contacts I'm not going to go ahead and modify every single page if you don't have many clients you can also remove this clients page to do that you just need to Simply go to the pages and navigation on the left side and here let's suppose you want to remove this clients page just click on this settings icon and click on delete and just delete this page entirely and now we are ready to publish our website but before we do that we need to check whether our website is responsive or not okay we need to see whether it adapts properly to different screen sizes so here as you can see we are on the desktop breakpoint I'm going to click on this mobile icon and as you can see the majority of our elements look good however we need to change the arrangement of our elements a little bit I'm gonna move this heading up a little bit move this down then move this paragraph up put it right below our heading and then I'm going to move the image down as well just like that next I'm going to move this text up and I think the hero section looks good on mobile as well let me scroll down here we have so much empty space so I'm going to decrease the height of this section like this and what about here here as well I'm gonna move these elements up you can just get rid of these images on mobile and then just decrease the height of this section now let's preview the project detail page so I'm going to go to the first project page just like this I think everything looks good however here we have some issues I'm gonna move this text up this one up as well and then I'm going to increase the height of this section to have some white space all right we are good to go to publish our website we can simply click on go live and just click on go live and your portfolio website is live now you can just click on view your site as you can see everything is animated I can scroll down it looks good let me just check the links okay everything looks good you can also go to different pages that's awesome here are some tips for designing a successful portfolio number one keep it simple your portfolio should be easy to navigate and showcase your work avoid clutter and unnecessary elements that could distract the visitor number two highlight your best work only include your strongest work in your portfolio clients want to see your best work not every project you've ever worked on number three use high quality images make sure your images are high quality and not pixelated number four include a call to action always include a call to action on your portfolio such as contact me or view my resume this makes it easy for potential clients to get in touch with you if you want to learn how to use AI tools to design websites and apps make sure to check out this video thanks for watching and don't forget to hit the like button if you found this video helpful have a great day and see you soon

Channel: DesignWithArash

Views: 106,755

Keywords: ui/ux design, ux design, user experience design, ui/ux design india, how to become a ui/ux designer, become a ui/ux designer, web design, figma, figma tutorial, figma design, figma tutorial for beginners, ux, ui, design, ui design, uxui design, uxui, learn ux, ux course, design course, designcourse, beginner ux, junior ux, junior designer, junior ux designer, entry level ux, how to learn ux, learning ux, user experience, user interface, ui/ux design portfolio

Id: uC1VK4ktsFc

Length: 20min 29sec (1229 seconds)

Published: Tue Mar 07 2023