0 1 00:00:00,120 --> 00:00:04,860 Before I show you how to install the website and move it to your Webfow account, let me give you a 1 2 00:00:04,860 --> 00:00:10,980 tour of the website. And show you what's what. And show you what's the design thinking behind all that. 2 3 00:00:11,160 --> 00:00:16,350 Some of the content you'll see on a page, is a place holder text, like this headline. And in the next 3 4 00:00:16,350 --> 00:00:21,360 video, where I show you how to install this site in your Webflow account, you're going to replace the generic 4 5 00:00:21,360 --> 00:00:23,670 content with your personal info. 5 6 00:00:23,670 --> 00:00:27,440 The website is quite simple. The way portfolio websites are supposed to be. 6 7 00:00:27,450 --> 00:00:31,820 We have only two pages, a home page and CMS pages for each project. 7 8 00:00:31,830 --> 00:00:35,010 The content of the website is in a first person narrative. 8 9 00:00:35,010 --> 00:00:38,950 This is sort of a style that I love for portfolio websites. 9 10 00:00:38,970 --> 00:00:42,760 If I'm looking at someone's portfolio, I'm interested in the person behind it. 10 11 00:00:42,840 --> 00:00:48,060 So I want to see a friendly interaction, so I can sense the personality of the person. 11 12 00:00:48,060 --> 00:00:52,470 I also want to see a clear information of what you do, what is your speciality. 12 13 00:00:52,470 --> 00:00:54,360 What is this website about. 13 14 00:00:54,360 --> 00:00:56,700 Clear, direct language, you know. 14 15 00:00:56,700 --> 00:00:57,810 Can I work with you? 15 16 00:00:57,810 --> 00:00:59,700 Are you available for work? 16 17 00:00:59,700 --> 00:01:01,080 How can I work with you? 17 18 00:01:01,080 --> 00:01:02,860 What are the steps? And so on. 18 19 00:01:02,910 --> 00:01:05,010 Also very direct showcase of the portfolio. 19 20 00:01:05,010 --> 00:01:08,910 Some portfolio websites have it on a separate page and that's just too much work. 20 21 00:01:08,940 --> 00:01:14,010 I have to find a link, click that link, wait for the page to load, then again to finally see your work. 21 22 00:01:14,100 --> 00:01:20,010 So, I like showing portfolio pieces on the home page instantly after the hero section. No looking, right 22 23 00:01:20,010 --> 00:01:20,830 in your face. 23 24 00:01:20,880 --> 00:01:25,350 How you display your portfolio peaces is important too. A lot of portfolio sites, that I've seen, they 24 25 00:01:25,350 --> 00:01:30,450 have very confusing, creative, but often confusing way of showcasing past work. 25 26 00:01:30,450 --> 00:01:31,870 Often they use just thumbnails. 26 27 00:01:31,890 --> 00:01:33,540 No titles, no description. 27 28 00:01:33,540 --> 00:01:36,030 You have to get to a conclusion on your own. 28 29 00:01:36,030 --> 00:01:39,450 Not cool, making me work. Here as you can see, everything is super clear. 29 30 00:01:39,450 --> 00:01:40,650 We have a title. 30 31 00:01:40,830 --> 00:01:42,510 If we are not sure what this is. 31 32 00:01:42,510 --> 00:01:45,100 There is a smaller title saying latest work. 32 33 00:01:45,210 --> 00:01:47,140 No way to get confused about that. 33 34 00:01:47,180 --> 00:01:52,190 A description of the project, which is super important, because many designers don't do that on the home 34 35 00:01:52,190 --> 00:01:52,730 page. 35 36 00:01:52,770 --> 00:01:55,440 Clients might not even visit the project page, 36 37 00:01:55,440 --> 00:02:00,990 they'll want to get information right from here. And it's important to tell them what sort of project 37 38 00:02:01,020 --> 00:02:01,530 this is. 38 39 00:02:01,530 --> 00:02:02,520 Did you design it? 39 40 00:02:02,520 --> 00:02:05,310 Was it an individual work? Team work? 40 41 00:02:05,310 --> 00:02:06,570 What was your role? 41 42 00:02:06,570 --> 00:02:08,330 What's the website for? And so on. 42 43 00:02:08,370 --> 00:02:12,930 They want to know this essential information, to understand what the heck are they looking at. 43 44 00:02:12,930 --> 00:02:18,960 I've added some tags as well, to give a scannable information on type of projects. Like Webflow development, 44 45 00:02:18,960 --> 00:02:24,240 concept project. Saying that it's a concept in a tag, is a subtle way to be honest about the fact that 45 46 00:02:24,240 --> 00:02:29,400 it was a concept project. Concept project means that it wasn't real, paid project that you did for some 46 47 00:02:29,520 --> 00:02:35,880 existing business or a product. But you did it either for practice, or for this course, or for some, any 47 48 00:02:35,880 --> 00:02:40,500 other reason. You want to avoid awkward disappointment later, when your client asks you something about 48 49 00:02:40,500 --> 00:02:42,920 that Chat App company you worked for. 49 50 00:02:43,860 --> 00:02:48,390 And of course, pretty mockups of the project. How you show the screenshot of the project is important 50 51 00:02:48,390 --> 00:02:48,920 too. 51 52 00:02:49,050 --> 00:02:54,600 Very important note, when creating your accounts on freelancing platforms, like Upwork and Freelancer, 52 53 00:02:54,870 --> 00:02:58,490 take down these portfolio pieces and generate something else. 53 54 00:02:58,500 --> 00:02:59,080 Why? 54 55 00:02:59,160 --> 00:03:02,820 Because these sites have review process for new freelancers. 55 56 00:03:02,940 --> 00:03:08,130 A lot of students are taking this course, and if you guys all apply with the same portfolio work, that's 56 57 00:03:08,130 --> 00:03:10,980 going to raise red flags. When dealing with clients, 57 58 00:03:10,980 --> 00:03:15,380 that's not a problem, you can use that work. By for platforms application process, 58 59 00:03:15,390 --> 00:03:16,890 hide them temporarily. 59 60 00:03:16,950 --> 00:03:23,770 Once approved, then you should be safe to put it back up. What I do section, is exactly what it says. 60 61 00:03:23,770 --> 00:03:28,580 This is a place to give a more detailed description of services you provide and pitch a little more. 61 62 00:03:28,780 --> 00:03:34,040 Here's a pro copywriting tip. If you want to write persuasive copy make it about them. 62 63 00:03:34,090 --> 00:03:39,130 Talk about how you're going to solve their problems and improve their lives. Not how much you love web 63 64 00:03:39,130 --> 00:03:42,700 design and that chicken quesadillas are your passion. 64 65 00:03:42,700 --> 00:03:44,250 Lastly, very obvious section. 65 66 00:03:44,290 --> 00:03:51,510 If they want to work with you, what's their next step? Now let's check out the project page. Project pages 66 67 00:03:51,510 --> 00:03:56,220 are quite straightforward. Some description of the project, and a large screenshot. 67 68 00:03:56,220 --> 00:04:00,930 There are many different ways to demonstrate your portfolio work, but this is a style that I use on my 68 69 00:04:00,930 --> 00:04:02,910 own website and I like it the most. 69 70 00:04:02,910 --> 00:04:08,220 Some designers like to do a case study, so they will have a large presentation of the project and quite 70 71 00:04:08,220 --> 00:04:11,680 a bit of explanation of the process, goals, challenges. 71 72 00:04:11,730 --> 00:04:15,260 Basically a short story on how the project came to fruition. 72 73 00:04:15,270 --> 00:04:20,070 This is an excellent approach and shows all the work you have put in it. And shows your potential clients 73 74 00:04:20,100 --> 00:04:22,170 the behind the scenes of your process. 74 75 00:04:22,170 --> 00:04:24,950 The reason why I don't do this case study, is simple. 75 76 00:04:24,990 --> 00:04:28,340 It's a lot of work. And amount of advantage isn't that big. 76 77 00:04:28,350 --> 00:04:34,110 Mainly because who our target audience is. As freelance web designers, our clients 90% of the time 77 78 00:04:34,110 --> 00:04:36,300 are none designer entrepreneurs. 78 79 00:04:36,390 --> 00:04:41,230 A good portfolio website with simple screenshots of your past work is enough information for them. 79 80 00:04:41,250 --> 00:04:44,870 They're not going to dive deep inside the case study anyways. 80 81 00:04:44,910 --> 00:04:48,370 They will appreciate that it's there and they will think even more highly of you. 81 82 00:04:48,390 --> 00:04:53,630 But the amount of work we have to put into create the case study for each portfolio, is too much. 82 83 00:04:53,700 --> 00:04:58,140 Maybe, in the beginning, we'll have enough enthusiasm, but later we won't and we're just not goinna keep 83 84 00:04:58,140 --> 00:05:00,120 our website updated because of that. 84 85 00:05:00,120 --> 00:05:04,620 And that's what we're going to screw ourselves over. In the future. Because updating the portfolio is 85 86 00:05:04,620 --> 00:05:09,260 going to be so much work, that we'll just not do it. And we will end up with an old portfolio pieces. 86 87 00:05:09,270 --> 00:05:10,760 And that's the worst outcome. 87 88 00:05:10,800 --> 00:05:15,810 Your designs will improve, and generally, the web design trends change, so your older designs will look 88 89 00:05:15,810 --> 00:05:17,250 dated and not modern. 89 90 00:05:17,250 --> 00:05:20,990 But if it's very simple to update, you'll be more encouraged to keep it fresh. 90 91 00:05:21,120 --> 00:05:26,700 So, the project page just needs a paragraph of description and a screenshot, which you can export right 91 92 00:05:26,700 --> 00:05:27,350 from Figma. 92 93 00:05:27,540 --> 00:05:31,110 It's so easy. The linking to the live website is optional. 93 94 00:05:31,110 --> 00:05:34,020 It's very helpful for clients looking at the project. 94 95 00:05:34,080 --> 00:05:38,140 They can see the website in action and play with it and see all the work you've done. 95 96 00:05:38,190 --> 00:05:41,470 Not just screenshot, but interactions and all that stuff. 96 97 00:05:41,520 --> 00:05:45,810 Although I have a rule on this. Only link to live websites that you're proud of. 97 98 00:05:45,810 --> 00:05:51,450 Real client websites are living organisms. And when you're done with a project the client might change 98 99 00:05:51,480 --> 00:05:52,480 things on the website. 99 100 00:05:52,500 --> 00:05:55,430 They might add new section, change things on their own. 100 101 00:05:55,470 --> 00:05:58,080 Hire someone else for any new updates and so on. 101 102 00:05:58,230 --> 00:06:02,910 So, at some point, your precious designs might end up looking horrendous. And you don't want to showcase 102 103 00:06:02,910 --> 00:06:05,310 a website that has been butchered over time. 103 104 00:06:05,310 --> 00:06:10,110 Even if you are the one doing butchering. Well, that's it. Minimalistic, beautiful and strong personal website, 104 105 00:06:10,140 --> 00:06:15,280 to demonstrate your work and show potential clients your professionalism and web design skills.