Project 5 – Professional Practice – Task 1a – Research and analyse a range of personal portfolio websites

This Task consists of two parts:
1a: Research and analyse a range of personal portfolio websites.
1b: Research and report on the range of employment opportunities for web designers in the Brighton area and the role of the freelancer in web design.

In this part I will research and analyse a range of personal portfolio websites

Personal Portfolio Websites:

Portfolio websites that I really like:

  1. http://www.45royale.com/work/
  2. http://wonderfulunion.com/portfolio.php
  3. http://www.petereastway.com/showports.taf

45royale

Wonderful Union

Peter Eastway

Portfolio page

What these three websites have in common (and what I like about it) are the way they display their screenshots of projects/photos. They are all shown in the same size rectangles, containing colourful and enticing images accompanied with text underneath explaining what they are.
I really like the simplicity and effectiveness of it and the fact that you can see almost all of the projects in one glance.
I also like how all three websites manage to display a group of images that have nothing to do with each other (after all: every website project is completely different from the other) and making it look like they are related. They do this not just with the same sized rectangles, but also using titles in the same colour and choosing a nice graphic from the websites, rather than a screenshot of the home page.
Wonderful Union use a line to differentiate between projects and 45royale have carefully written a summary of the exact same height for each project. Peter Eastway takes it one step further by cleverly taking one colour out of the image he has chosen as the album cover and using that colour as a block colour within his rectangle, making it aesthetically pleasing and unique.
Most people are visual and prefer seeing images to seeing lots of text, therefore I think that Wonderful Union and Peter Eastway both have the balance of image size and amount of text spot on, because it allows you to see at least two or three rows of images.
In my opinion 45royale have too much text which takes away the effect of the images, because due to the amount of text you only see one row of the images until you scroll down.

Individual Project Page

45royale individual project page

However, I prefer 45royale’s layout of the individual product page to the other two, because they have the balance of the text perfect on these pages. The size of the screenshot slideshow is sufficient (although I probably would go slightly larger) and the layout of the text content is perfect: the right amount of titles and small paragraphs underneath, with a link to read more if people feel the need to. The really clever thing is that if you do click on the ‘read more’ link, the slideshow disappears and the text appears in place of the slideshow. Nice touch!
Last but not least, at the bottom they have squares of screenshots of their projects that have a white opacity, but ‘light up’ when hovered over it. I think it is a perfect way to link back to other projects rather than providing a link back to the portfolio page.

Wonderful Union individual project page

Wonderful Union‘s individual product page is really well thought out too, it has a really nice slideshow with eye-catching and colourful images and a good amount of detailed information about the project. It also links back to other projects on the right hand side by way of text links. This is where I think this website lets itself down. The area where these links are (to the right of the slideshow) is too wide in my opinion and as people naturally ‘read’ a website from left to right, I think the details of the project should be there, not textual links to other projects.

Peter Eastway individual project page

Peter Eastway’s layout of the individual photographs, is lovely: the image size is great and I like the repeat of the play on the colours from the portfolio page, which makes them stand out more. However, the pictures do take a few seconds too long to load, which is a real let down. Aside from that, I personally would have preferred more information on each individual photo, such as location and perhaps what type of equipment used and if/how it has been edited.

Portfolio websites that I think are really clever, but a little too fussy

  1. http://www.agencynet.com/
  2. http://www.thibaud.be/

AgencyNet

Tribaud

AgencyNet showing the dot traveling between 'underground stations'

AgencyNet have a different approach to their portfolio. When you arrive at their homepage, you will see a ‘underground stop’ type map at the bottom of the page. When you hover over one of the four ‘underground stops’, you see a little logo pop up. If you click it, it scrolls smoothly down to the correct area. All four individual project pages are very colourful and eye-catching and contain lots of information and detail. As you are reading and scrolling down, the little dot moves between the two ‘underground stops’ until you arrive at the next project.
Overall it looks very impressive indeed! However, from a customer perspective, I would prefer to see more than 4 projects and would prefer to see a landing page with smaller screenshots like the 3 websites above, rather than having to scroll through all the pages to see all the different projects.

Tribaud Project page with grid

Thibaud‘s website is very unique. When I first arrive at their homepage, I automatically click web design and click on on of the projects. I see a full width screenshot of an i-pad showing a website. When scrolling over the image a grid shows up and a plus sign, when I click this, I get the blocks of navigation images to change the project to a different one. But then something catches my eye at the far left bottom of the page. Style 1, 2, 3 and 4. I wonder what they are and wow! This clever guy has designed his website in 4 different styles! I really like style 3, due to it’s simple navigation in nice typography. When web design is clicked, 7 square images pop out, all of which can be individually hovered over.

Tribaud Style 2

Tribaud Style 3

Tribaud Style 4

Very clever indeed, but I I were a prospective customer, I would be very confused by the different designs. I also think each project could have more than one image each and at least a summary of details or information on the project rather than just the name.

Portfolio websites that just do not work for me

  1. http://www.toky.com/#/home
  2. http://www.finchleywebdesign.co.uk/portfolio.aspx

Toky

Finchley

hovering over the circle and seeing faint opacity images quickly appear and disappear.

In my opinion, Toky are trying too hard. When you land on their home page you see a pretty empty page with a massive circle circling, as if the page is loading. After waiting quite a while, nothing is really happening, but when I accidentally move the mouse stuff suddenly starts moving. It is not immediately clear that one has to hover over certain parts of the circle to see faint opacity images quickly appear and disappear. I was trying to click the pictures when they appeared, but when I moved my mouse toward the pictures, they faded away. It isn’t until a while later that I realize: the link to the projects are hotspots on the circle themselves, not the images that appear!

Toky individual project page

Once you click a link that takes you to a project, you get taken to a full width photo. This is impressive, but again, it is not clear what should happen next in order to see what the project is about or where to read any information about it. After moving the mouse around the page, an arrow eventually appears when hovering the mouse over the far right edge of the page that allows you to ‘flick’ through, which also takes long on certain pages where you get the dreaded ‘loading’ icon.
I don’t think this website is intuitive and if I were a perspective customer, I would have clicked away a long time ago.

only two of the projects are linked to the actual website

At a first glance, Finchley’s Portfolio looks like any portfolio, nothing out of the ordinary, but nothing special either. When I scroll through their portfolio and find a project I would like to know more about I attempt to click it. To my surprise, there is nothing to be clicked, what you see is what you get! This changes my view entirely. The screenshots of the websites are far too small to see any detail for a prospective customer to be impressed. The introduction text and technologies used are very useful, but if I were a prospective customer, I’d like to find out a little more than just this summary. Furthermore, only two of the projects are linked to the actual website, one of which does not exist anymore, the other has been re-designed by a different company. Not good advertising at all and I would definitely not go for this designer if I were looking to have my website designed.

Summary

It is my personal opinion that the best way to show off a portfolio with several rows of 3 of 4 columns with rectangle screenshots (Preferably in similar colours to your website to make it consistent, showing the actual colours of the screenshot when hovered over). When a screenshot is clicked, you should be taken to an individual project page which should have:

  • several screenshots in a decent size to see enough detail (preferably a slideshow or next/previous images)
  • detailed information about the projects goal and technologies used
  • a link to the final designed website
  • small thumbnail images linking to the other individual project pages

This project should not cover projects that have since been re-designed by a competitor.

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>