How to Create a Web Development Portfolio That Wins Clients
If you're a web developer, having a quality portfolio can seem difficult to craft. You've probably been bombarded with non-disclosure agreements from much of the previous work you've done, or have little quality work that is still live or has otherwise maintained it's original status.
Web developers usually have another problem too: if you don't do design work, you are limited to the type of clients that can appreciate that work. Many clients, if not in the web industry themselves, only know how to judge the quality of a web project visually; this is where many web designers have the edge.
So what is a perfectly talented and unappreciated developer to do?
In this article we'll go over the steps to combat the common issues above, as well as a few other tips to create a winning online portfolio.
Where to Collect Quality Work
Too many designers and developers will spend a lot of time crafting their portfolio's display, that they pay less attention to the quality of what's actually in it. Clients or potential employers care most about the quality of the work.
Make sure you have your best work out there, and that it is what is given the most attention.
If you feel as though you've done quite a bit of work with nothing to show for it, it is likely because of one of the following:
- You do not have the original code, and the work is either now down or has been mismanaged since (by other developers, the client, etc.) so that it is not of quality any longer.
- You are unsure of what you can legally/ethically show in your portfolio for past work.
Use Code Repositories (Source Control)
Many freelancers do not use code repositories (source control) because they feel as though they don't need to while working solo. However, code repositories have a purpose greater than collaboration. They also keep a record of your code.
So, even after you launch a client's project, you have a record that this code is owned and maintained by you. It will also be a hosted original copy of your own work, regardless of what the live site transforms into.
As you may have guessed, this is also handy for rolling back to a previous version of a website if something is lost or broken.
Open a free account at Github and start learning how to use it. If you are a freelancer who has never used source control before, this can also expand your skill set and make you more marketable.
Contact Previous Clients
Very few clients come with their own contracts for new freelance projects, and any larger businesses would have their own form of a non-disclosure agreement that you've signed.
Look through any saved agreements with past clients, and see if they explicitly say that you cannot share the work publicly. If the agreements can not be found, or they otherwise to not explicitly say that they cannot be a part of a a public portfolio, then contact the previous client for permission.
Tips for asking for permission:
- If possible at the beginning, get in writing (a contract) that states you are the copyrighted owner of the work.
- Leverage use of it in your portfolio by stating you can remove any branding material associated with the project when placing it on your site.
- Ask if you can write a case study on the project, linking back to the work on their site (this is usually seen as good PR and free advertising for the company).
- Be choosy when picking up new projects: ask ahead of time if you'll be able to show your own work in your portfolio, and choose more clients that let you place a link back to your website in their website's footer.
What About the Client-less Beginner?
If you are new to the web development scene and do not have any, or very little, client-based work to show, then you must still create examples of your code to put out there.
While this will limit your exposure as a lot of companies want people with technical experience as well as business experience, having quality side projects in your portfolio shows passion for your craft and experience level.
There are plenty of places to find free PSD templates. Download some and then cut them up for quality example pieces. Spend some quality time doing this -- rushing will only show a rushed product for the client.
Otherwise, find the first few clients among friends and family, local communities, school opportunities, etc. Here are a few more ideas for finding the first few clients: A Step-by-Step Guide to Getting Your First Web Development Client.
The Right Number of Pieces
What is the right number of pieces to show in your portfolio? Of course, this answer changes based on experience, if applying for a specific position, and industry. The following is for a freelance web developer or web developer looking for standard employment.
Short answer: a sweet spot seems to be between 3-10. This is, of course, a rough number, and a wide range.
Long answer: Be picky about what goes into a portfolio. If a project got messy or is unfinished, don't include it, even if you feel as though your portfolio is lacking in quantity. If you have a lot of great work, include the best, even if that goes above 10 pieces.
Many clients want in and out with their answers: "Do you know what you're doing? Do you have the skills specific to my needs? Can you help me understand what I need?"
If you show all of your work, including mediocre work, then the client will only assume that mediocre work is the best work.
On the contrary, if you include too many quality pieces, it can be distracting. Feature at least a few of your best works -- ones where you were pushed to your limit, showed creativity, went the extra mile, or showed your own passion for the craft.
Where do you find most of your clients right now?
Other Items to Include
As a web developer, screenshots only go so far. There are a number of ways one can increase the quality of their portfolio in spare time with additional content.
Have a Real Copy of the Site
Host a real copy of all portfolio pieces. A good habit of keeping source control up to date will help with always having the best version on hand. Link to a self hosted version of the site. In addition a live link may be appropriate.
Write About Each Project
Case studies are fantastic to show in a portfolio. Good web developers have a process, and provide insight to the client, opposed to simply taking instructions. Crafting write-ups of a project's process, along with how you tackled a client's goals can influence future clients of your real value.
Get a Professional Designer
If not a designer yourself, find someone to professionally design your portfolio. Many developers work with other designers for client projects, and those designer relationships would be a great place to start. If there are no designer relationships yet, this could be a good way to get in touch with one and to nurture ongoing collaboration.
Provide a Resume, CV, or LinkedIn URL
All employers will require a formal resume and history of work. Even many serious freelance clients will want to see this more traditional view of experience. Have an updated resume ready to go in case any client asks for one, or place a resume, CV, or LinkedIn URL out to the public on your portfolio.
An Easy Contact Method
An easy contact method is usually through a contact form on a website, or otherwise easy-to-find contact information. Placing a phone number on a website may lead to missed phone calls, but a regularly checked email address can be a great starting point for setting up times to speak. Make it as easy as possible for potential clients to reach you.
You can even use a service like SetMore, allowing potential clients to recommend times to speak, or sending out invitations through this service.