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