Week 6 – Professional Portfolio

After an almost forced attempt to use Portfolio Box I have decided that the interface is far to complicated to use and is a bit of a struggle to put together the website. Here is part of the interface that I was dealing with (it shows no preview and also is very difficult to get things how you want them):

Portfolio Box

Portfolio Box

I have decided to go back and use Squarespace. I know that I gave it up before but with struggling with this interface I feel as though I will be able to make my website more how I want it to look using squarespace and it will be just a matter of time getting a theme that fits okay.

Squarespace has a nice user friendly interface that is very easy to follow. It makes creating, formatting and arranging pages so simple that it is almost foolproof:

Arranging Pages

Arranging Pages

It also has a very straight forward image uploader, which is very useful as that will be my primary use for this site once it is up and running. They are easy to organise once you upload and putting the images onto your site is as simple as clicking an ‘+’ button and then locating your file:

Adding images

Adding images

I have decided to use the Wells theme that is supplied by Squarespace and then I can customise this to suit my website.

I spent some time putting a logo together for my site. This logo will be displayed instead of the standard text header on my website and as from previous examples of websites I looked at, I decided to keep to the common black/white/grey colour scheme and here is the logo that I designed to use on it:


My Portfolio Logo

I had some difficulty increasing the size of the Logo within the site to begin with because it got to a certain size and then wouldn’t go any further. I realised that this is because it was set to only go as wide as the sidebar and so by changing the width of the sidebar meant that I could make the logo look bigger because it was previously almost too small to read.

A problem I came across while using this Wells theme is that you can only choose between whether your images fill the gallery or fit it.

Fit means that the gallery will display the whole image and so if your images are different sizes then your images might show up all different shapes and sizes within the gallery. If you choose fill then the images will be stretched to fill up the content space of the gallery.

I actually preferred this look because it means that the top of the logo for my site was perfectly level with the top of the gallery and this gave a nice full look to the site and it looked like this:

Screen Shot 2013-10-22 at 22.52.11

I have eventually opted to use the ‘Fit’ mode instead and this is due to a couple of issues.

The first one being that the nature of the image can sometimes be ruined by using the fill mode for example if I had a panoramic image on my site and it zooms in to fill the gallery then you will be losing an absolutely massive chunk of the photo and I would rather people be able to see the whole image.

The second issue is that some of my older photos were taken with a much worse camera than the one I currently own and so depending on their size it sometimes crops them quite dramatically in order for it to fill the gallery and this landed me with an issue of noise being a lot more visible because the image was cropped to almost 200%.

One major thing that I liked about the theme that I have used for my site is that it has a cursor which changes into an arrow when you are hovering over the gallery. If you hover over the left side of the gallery it will display a left pointing arrow and vice versa a right pointing one. These are to indicate which way the slideshow will progress if you click your mouse.

This might sound like a very basic thing to have but you don’t know who will be using your site to search your work and so usability is a massive factor. Unfortunately I cannot display a screen capture of this working because when you do a screen capture it removes the cursor from view!

Here is the navigation bar on my website now. I have changed the font from the original one (pictured above) to make it look a little bit cleaner, less bunched up and a bit more modern and friendly on the eye. The font is called Electrolize:

Electrolize Font

Electrolize Font


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s