Untitled Document Portfolio Blog Store Resume CreativeBloq.com
Being Social
My Flickr
« Rebuild Henryville Concert Poster Submission | Main | Threadless + Gap: A Contest »
Tuesday
Apr032012

Weighing Your Options: Designer Portfolio Sites

About a post or two back I had mentioned that I was going to delve a little deeper into my process for updating my web portfolio. The struggle for any designer is how to get your work out there. Luckily a little thing called the Internet was invented and solved all of our problems. Or created more, depending on how you look at.

The simple fact is that if you want to network with like-minded people, potential clients, or even future employers you have to be on the inter-webs. The real question becomes how to go about getting yourself out there. Now if you’re a graphic/web/mobile app/painter/weaver/database developer then you will probably make your own website from scratch. If you’re like me and came into the design world from a pure print graphics background, then you may need a little help.

The "John Smith" Personal CV/Portfolio Website Template I downloaded from Themeforest.com from Sergei. Click on image to see his profile.

If you’re not a web coder then don’t pretend to be. But lets face it, in today's world you need to know something about general web coding. When I set out to turn benwhitesell.com into a true web portfolio, I wanted something visually interesting and unique. In retrospect, I turned the idea of unique into complicated, but more on that later. Having no idea what HTML or CSS was at the time, it seemed like I might be getting in over my head. Through some research, I figured by best option was to purchase a template and customize it. It would afford me the luxury of not starting from scratch while at the same time learning the coding side from the preset template code. I found that Themeforest.com is a great resource for portfolio templates and working for about three months managed to customize a template into something respectable.

Here is my customization of the "John Smith" template and what became benwhitesell.com from early 2011 until recently in 2012

Ultimately, I found that HTML and CSS is not a foreign language and maybe one of the easiest coding languages to learn. There are actually several great resources online to walk you through it including www.w3schools.com, which is free, and using the Firebug plug-in for Firefox. Firebug allows you to view the code behind any website you go to when viewed in the Firefox browser. Firebug was especially helpful in seeing how other sites were handling there coding for various functions. I would say that I am now proficient enough to speak to others about web coding but would not consider myself a hardcore coder. My interests seem to go away from the backend programming and more into the pretty visuals. But hey, that’s just me.

For about a year I was pretty satisfied with my site. Then issues started to pop-up. The first big one was that the template I bought was not mobile compatible at that time. I was able to find a little bit of code with the help of my friend Wes that would actual re-direct users to my behance.net portfolio if they visited my domain on a mobile device. It was a fix that got picked up by Behance's blog, who then wrote a blog post about it, which you can read here.

The second issue that cropped up was updating the site. I didn’t. While not incredibly hard to duplicate pieces of the code to put in new work, as I got busier thanks to my new web presence, I just didn’t have the time. Since I wasn’t a full-blown web designer, my focus was on my other work and revisiting the HTML to make updates was kind of a chore. If you are thinking about going it alone with your website make sure that you think about how and when you will make updates. What I found was that my time was better spent on my more passionate endeavors.

The third and basically final straw to realizing I needed a complete site redesign was the complexity of my site's navigation. This is where trying to be unique and cool just ended up bogging down the site. To see any of my work you had to click on buttons like “Brand Design” or “Photography” and then navigate left or right to see different projects. I myself like to get right to the work when visiting other people’s sites and I started to admire the portfolios that had all the projects visible on the landing page and with one click, Bam!, you’re look’n at cool stuff. Bascially, it was time for a change.

I went back to themeforest.com to look at simplified web templates, but I knew I wanted a better way to make updates then going back to the code. This is where Behance came in. I have been a member of Behance.net for quite sometime. Behance is a visual art/social network that allows you to create a profile and add your work. Basically allowing you to create a free portfolio. There are of course limitations because it is free. You can only really customize your portfolio with in their set framework, which basically means you can change header colors. A Behance.net free profile is great for socializing with other creative and is a really good start to a portfolio, but doesn’t provide a unique enough interface for a stand-alone personal portfolio site. That is until they started Behance ProSite. Cost wise I found Prosite to be pretty reasonable at $99/year since they do all the hosting and provide you with an administrative adjustment panel to easily make changes to your site.

A sample of what the administration panel looks like in Behance's Prosite. This is the panel for customizing the website's design elements. Quite a few really.

Now, I am not getting kickbacks from Behance in any way to write this blog post. Simply, I have had a great experience dealing with them through my free profile and did quite a bit of research into other hosted portfolio sites like Cargo Collective and the like. But, because the people behind Behance have been readily accessible via twitter, their blog, and forums, I felt comfortable going with them. The big selling point being how easy it was to set up a site, attach my own personal domain, and even drop in Google Analytics for tracking.

In order to use Behance’s Prosite service, you have to sign up for one of their free accounts first. It is from the free account that you will be able to create projects that will end up being portfolio galleries on your ProSite webpage. You have the option to only show your galleries on your Prosite or to make them visible on your free profile as well. My recommendation is both for the community aspect that is offered on Behance.net.

I really like the level of customization that Prosite offers for webpages. Everything is easy adjusted from an administration panel and you can upload custom images for your header or for the gallery buttons. Columns for page layout can be adjusted to your preference and if you get a little creative then you can also get pretty custom with the sites navigation. Behance also regularly provides updates like adding the ability to add social media links, a custom favicon, custom type integration, and expandable images.

Here is the website settings panel on Prosite. I especially like the search optimization.

The other nice little feature that Prosite provides is the ability to easily type in tags for search optimization. That includes a page description that will appear in results of search engines like Google. Very nice. Overall, Behance’s Prosite is a fast and simple way to get your portfolio online. Oh, and it’s also mobile compatible. It appears exactly the same on your desktop web browsers as your iPhone or iPad. A big plus in my book. I could keep going on this subject for longer then you would want to read, but feel free to leave questions in the comments section and I will get back to you.

And finally the finished product, the new benwhitesell.com, which I just launched a month or two ago.

There are always going to be a lot of different paths you can take with your personal portfolio website. My recommendation is to figure out what you want to get out of your site, and then scale it according to your lifestyle and workflow. So, go forth and create!

Cheers, Ben.

PrintView Printer Friendly Version

EmailEmail Article to Friend

References (6)

References allow you to track sources for this article, as well as articles that were written in response to this article.
  • Response
    Response: melaleuca review
    As part of a college thesis for research I have to search sites with relevant information on given topic and provide them to teacher our opinion and the article. Your article helped me a lot.
  • Response
    Response: itaguaí
    Designer portfolio sites collection is simple awesome, There are a lot of blogs and articles out there on this topic, but you have captured another side of the subject. This is good content thank you for sharing it.
  • Response
    Response: sofa sleeper
    Thanks for this exciting post. It is well written and has some great content. Do you have any others that I can go to about this subject?
  • Response
    This topic has always been one of my favorite subjects to read about. I have found your post to be very rousing and full of good information. I will check your other articles shortly.
  • Response
    Response: DoctorSpring
    Your article has helped me to understand this subject on a different level. I would like to appreciate your efforts for exploring this issue. Thank you for your information.
  • Response
    Response: cats
    benwhitesell: - Blog - Weighing Your Options: Designer Portfolio Sites

Reader Comments (10)

Couldn't agree more and that's without mentioning how you can integrate and display your portfolio on your LinkedIn profile without lifting a finger!

April 4, 2012 | Unregistered CommenterShane Smith

Thanks for sharing this information. I really like your way of expressing the opinions and sharing the information.

This is a good post. I'm definitely going to look into it.Really very useful tips are provided here.thank you so much.Keep up the good works.

May 16, 2012 | Unregistered Commenterhove garage

Hi
this is a wonderful thing to use a portfolio its there in flash file
reply here
Thank you in advance...

October 24, 2012 | Unregistered CommenterMr.Nouvel

I have been searching for this information from quite some time but my search has now ended on your blog. Thanks mate for writing such resourceful content on the topic!
jailbreak

January 17, 2013 | Unregistered CommenterKim

Correcting the portfolio is very difficult sometimes than making a new portfolio. I was trying to make my portfolio more eligible for the jobs I am applying and never completed from one week. This is turning out to be a stressful job for me. I will try to use the tips you have shared.

July 5, 2013 | Unregistered Commentersnorestopnow.org

Mobile compatible makes it seem like looking a a full web page with small type on a 4" screen is a good thing. Most, if not all, of the Behance Prosites I've seen look terrible on phones and operate poorly on tablets.

September 6, 2013 | Unregistered CommenterReant

Great work very good efforts.

September 14, 2013 | Unregistered CommenterOnline Qurbani

Noting, noting and noting, Yep, I’m going to start mine very soon. Thanks.

October 23, 2013 | Unregistered CommenterTony Stark jacket

You got some style there on your blog, I’m sure if you go for more styles you’ll do even better.

November 29, 2013 | Unregistered CommenterMichael Jackson Jacket

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>