Dos and Don'ts
The best way to get ideas for how to build your own web portfolio and what techniques will be effective is by looking at other's sites and experimenting with their techniques in your own design. Eventually, over time, you will develop your own style and learn what design you like and what design turns you away.
Do Keep It Simple
For a web portfolio, appealing to a diverse audience is key. You never know where you might get a job offer or new client, so you want to appeal to as broad an audience as possible. In my opinion, one of the best ways to do this is to keep it simple. That's not to say be wimpy, but to hone your design and style in a way that is not overly complex or overly stimulating. Minimalistic design is "in" right now, and that's a good thing. Keeping to a simple design allows your surfers to focus on your portfolio items and your writing, rather than being distracted and unsure of where to go.
This is Rob Young's portfolio. He is a UI Designer and Art Director from some big name companies like Adobe, Apple, and Google. His portfolio exemplifies clean and simple design. There are not a lot of bells and whistles on this site, yet as soon as I navigate there, I am struck by how sharp, clean, and effective his portfolio is. Because of the big names he's worked for, he is able to quickly and clearly highlight his skills, without having to work to impress. His portfolio has one page and three links on it. Three of them link directly to his email address and the fourth links to his LinkedIn social network.
Do Sell Yourself
Your portfolio's purpose is to sell yourself. Whether as a freelancer or as a full-time job seeker, you want to give people a sense that you are desirable and that you can help them fill their needs. A call to action is a powerful way to do this, and one that I have not quite mastered on my own web portfolio. To have a call to action, you need to have a clear vision of what you want to offer. My diverse set of interests often makes that hard, but as I consider going into freelance work, I look more closely at how others advertise themselves.
Andrew Miller is a classmate from my undergrad and grad school days at the University of Puget Sound and his website exemplifies the call to action as a way to sell himself. His homepage features a nice slider that scrolls through some of the services and content he offers. He has free information to get you started and get you interested in what he has to offer.
From there, his services page does well to provide tangible offerings that you can get from him. Rather than an open-ended "I'm an educational consultant," Andrew has targeted areas of speciality and specific services he can offer.
Do Tell the Story of your Process
One of my recent moves in my portfolio is to spend more time telling the story behind my projects. It's one thing to show what you've done, but there is also value in sharing how you created them, why you created them, what your role in the creation was, and what impact or results they had. The story becomes increasingly important as our world becomes more and more specialized. It's almost impossible to find one person who an do all parts of a project, so how you interact with others and what technologies you've used and feel comfortable with is key.
Bryan Rantala, one of my Technical Writing and Editing classmates from the University of Washington, does quite an excellent job describing his process in his web portfolio. He has given a chronological story of the projects he's worked on, what they were about, and what his role was in them.
Do Give your Portfolio some Personality
Your portfolio tells a story not just about what you do, but also who you are. Putting your personality into your portfolio helps potential employers and clients make a connection to you. A bio section is a great place to give a little history about who you are and what journey you've taken to get here. A blog is also a great place to showcase your work, your experiences, your thinking, and your personality all at once.
Jason Reed's portfolio offers a great balance between personality and formality. The logo and graphic add a fun, easy going personality to the page, yet without overdoing it. And the major company's he has worked for: Apple, Intel, and Bosch, make it clear he is a serious graphic designer. But, not all of us have big names to drop or advanced graphic design skills. So leverage your own traits and strengths to build a website that showcases your personality.
Don't Make your Content Hard to Read
The quickest way to turn a potential employer or client off of your site is to have text that requires squinting or a magnifying glass to make out. As we age, the amount of light that gets through our eyes can decrease significantly. If you want a diverse age group to be able to read your website, I highly recommend using nothing smaller than 14 point font for large bodies of text. Sans Serif tends to work better on screens which generally have lower resolution than print.
Fancy fonts can be fun, but they often have trouble rendering on older browsers and computers, and usually do not help in reading. You are displaying the content in your portfolio for a reason, so don't let what you have to say be lost on hard-to-read fonts.
Don't Design a Site that is Slow to Load
There's nothing worse than getting to a site and then having to wait for the content you want to see load. The 3-30-3 rule states that with a website, you have 3 seconds to grab someone's attention, 30 seconds to get them interested in what you have to say, and 3 minutes to deliver the information you want to deliver. If your home page loads quickly enough for an employer or client to get there, and it captures his or her attention, but the first link they click on takes 20 seconds to load, you've already lost most of your time to make an impression. Or worse, if it takes 35 seconds, you may have already lost your visitor. I know that when I have to wait for a website, I often will bail rather than wait it out.
Don't Leave your Audience Wondering Who You Are
I've seen some really great websites that do an excellent job staying simple, displaying personality, selling themselves, and tell a good story, yet when I'm done exploring them, I have little sense of who I'm reading about. Watch for web portfolios that promote their work, but leave it hard for you to contact them, or de-emphasize the author. You want people leaving your site with a clear sense of who you are. You want to stick in their minds.
These are some tips to get you started. If you want to get a better sense of web portfolio design, I suggest starting by exploring some other web portfolios out there. A quick search of "creative web portfolios" or "best web portfolios" will land you tons of results. Spend some time exploring your social networks. Many of your connections will link to their portfolios. And look for portfolios of those in a similar field. There are countless designs out there and countless ideas.