10 Tips for Awesome Portfolio Site For Web Developers
Posted
If you are a web developer you should probably have a portfolio site. Whether you want to land that dream job or jumpstart your freelancing career.
But if you know how to build sites doesn’t necessarily mean that you can design them.
Been there, done that.
So here are my 10 tips to improve your portfolio site and start landing offers.
Use Favicons
If you have ever had more than 10 tabs open at once you most probably navigated between the sites by checking out the logo in the corner of the tab.
That logo is called a favicon (I found out it’s pronounced fave-icon instead of fav-icon the other day). It’s amazing how much this little thing can make your website look more professional.
And no, you don’t need to hire a designer to make it for you.
You can use your logo and any favicon generator that’s out there like favikon.
Make It Responsive
A responsive site is a site that responds to the size of the screen it’s currently viewed on.
More than half of internet traffic is via a mobile device so your portfolio must look good on desktop, tablet and phone sizes.
Back in 2015, Google began rewarding responsive sites in terms of SEO.
It is also good for UX of your site.
And with the addition of features like flexbox and grid to CSS, it’s easier than ever to make your site responsive.
Use Semantic HTML
If you are anything like me you have probably used <div> for everything. But it’s a huge anti-pattern because it severely hurts accessibility of your site.
Accessibility (a11y) means that your website is designed and developed in such a way that it is approachable by people with disabilities.
This includes stuff like:
- Adding alt attributes to
<img>tags - Watching out what font types and colours are we using
- Adding appropriate roles to elements (for e.g. “dialog”, “button”, “main”, etc)
- Using the right elements (using
<main>,<nav>,<footer>instead of stylized<div>tags) - Setting up tabindex attributes right
The web is made for everyone so it’s up to us, the developers, to make sure that it stays that way.
Use Text With Logos
If you are a developer you can probably guess at least 50% of logos in the image below.
But guess what? Karen from HR has no idea what these are.
Jokes aside, not everyone is a techie.
You need to be transparent about your skills if you want to land a client/gig/job so use text besides logos in your skills section.
Keep It Simple
My three most visited sites are Reddit, 4chan and Hacker News.
These sites look like something that was designed back 2004 (Reddit recently went through a redesign).
So why do I keep coming back to them? Content.
You can have the fanciest website in the world as your portfolio but if there is no content it’s not that particularly useful.
It’s enough that your website is well-optimized, responsive, clean and accessible.
Fancy animations, amazing copy and stunning graphics are great but they can do more harm than good if not done correctly.
By keeping it simple and making key things correct you set your website for great success.
If You Can, Have Testimonials And Case Studies
Testimonial is a person’s written or spoken endorsement of a product.
In this case, the product is you.
You can ask your clients to give you a testimonial or ask them to use one of their compliments as a testimonial on your site.
Case Study is a document or a web page which contains an analysis of a project, identification of factors that have driven it to success and the strategy used to accomplish it.
This is what you write on your own without disclosing any critical information about the project without the client’s consent.
Here are some effects that they create:
- They are the best endorsements of you
- They tell about your specific skills and values
- Nothing captures attention like a good story
- Clients are more inclined to work with you if you present them with previous satisfied customer
Don’t Overuse Animations
I’ve seen so many developers trying to do animations to show off but the experience gets just downright annoying.
If you don’t know what you are doing with animations it’s better to stay with simple fade-ins and those very very short animations that serve as attention-grabbing technique.
Add Contact Information
You might think just because you’ve sent someone your portfolio website they will be only ones who will see your portfolio so they will have information on how to contact you.
Well, what if they send your website to their boss or share it with someone else?
Or what if your site ranks very well on Google and potential clients find you via Google Search?
This is why it’s important to put up some contact information on your website.
This one sounds so obvious but I’ve seen quite a few portfolios that don’t follow this tip.
Focus On Problem You Can Solve, Not What You Know
This is one of the core fundamentals of marketing.
Focus on the value your product brings and problem your product can solve rather than focusing on specific details of your product.
Instead of saying
‘I have X amount years of experience in Y technology’
say
‘I’ve used X technology in the past to solve Y problem’.
Marketing Examples has a great article on how to write great copy.
You can read it here.
Follow Some Basic UX Principles
You don’t have to be a genius to implement basic UX principles.
Some simple things you can do to improve the UX of your portfolio are:
- Learn some basic colour theory and what colours go along
- Use the light text on dark background and vice versa
- Use things like boldness, lightning, elevation, animation (again careful with these), position to emphasise certain parts
- Separate long text in smaller chunks
- Be consistent with your design
- Use high-quality images
- Don’t invent the wheel, use already known conventions (logo goes in the upper left corner, call to action goes on top, etc)
- Optimize the speed of your site. Don’t use unnecessary scripts and stylesheets
Conclusion
These were my 10 tips you can do improve your portfolio website.
To reiterate, these things are:
- Add favicon
- Make your site responsive
- Ensure that your site is accessible
- Use text with logos if you plan to use them
- Keep it simple
- Add testimonials and case studies
- Be careful with Animations
- Put up contact information
- Focus on the value you can bring
- Implement basic UX principles
I know you might not have time to put all these things to practice but these are just my recommendations on what you should do if you want to impress your potential employers.
If you have any suggestion please do reach me so we can discuss them.
“Quality means doing it right when no one is looking.” – Henry Ford