Studio Brief 3 - Website Research / Layouts

As the website i'm going to be making will be a photography site which has mainly image content, I thought I should look closely at other photography websites and examine them.
I picked out a few that I found appealing and that had good features of which I could have implemented on my own site. I also looked at the sites on my iPhone so I could see how the change from desktop to mobile looked.

http://www.matthias-heiderich.de/
Matthias Heiderich is a photographer who I have been following for a while now online. He takes well composed images of mainly buildings / architecture and sometimes landscapes. The palette of colours in his images are also very well used and set out.

The home page to his site has full bleed images of his work and you can go left or right through them. I really like how the text at the top left changes colour from white to black or black to white when going through the images, so you can see the name on top of the pictures. Once you click on any of the images that you see on the homepage it takes you to the photo's project which is also accessible from the links on the top right. 

All of his images can be viewed by clicking the images on the right or left. You can't swipe left/right on your track pad. Also you can go through the images when enlarged by selecting the small + icon in the corner of an image. Instead of having the images scrolling from top to bottom like most websites the left to right method is refreshing, although more websites do this now, it still creates a good way of using space. The links and social media icons are also very minimal and clean. I like the simplicity of this website, it really doesn't take anything away from the great content thats included, it keeps it focused on the photography which is what the website it about. 

The website version on the iPhone is exactly the same as on the web. You can select any of the images on the homepage and it takes you to each of the projects they are initially from. However when viewing the work its a vertical scroll instead of a horizontal format. To get to the links you need to click on the icon with the 3 lines. 

http://ilike-photo.com/
A creative agency that is founded by Mikolaj Jazwiecki and Marcin Kempski, it also features the work of Polish Photographer Marcin Kempski. Other photographers, stylists and producers work from the agency are also shared on the site.

The homepage automatically brings you to the news tab of the website, although it brings up a highlight viewer of the recent posts on the page. Select the diamonds on the right and it previews a few posts and then it takes you down to the main blog, which is a vertical scroll blog. Hover over the 3 horizontal lines on the top left and it opens out the websites links from the left.

Clicking on the main previews on the homepage takes you to the project or shoot they are initially from. The view the pictures you have to click left and right. You can also view all of the work of the photographers on the site by going on to 'talents'. The photos are places in a grid format which uses 4 columns. The grid doesn't fit all the images in equally, it isn't square or rectangular, the images fit into the columns but don't have any rows.

I think this website could be made more simple, it's not necessarily hard to use, but everything seems to be quite large and flashy. If they reduced the sizes down of images and text then it would come across as a more fluid site. I'm not particularly impressed with any element of the website and don't find any of them useful enough to implement on my own site.

The mobile version is pretty much identical to the desktop. I think i prefer how it looks on mobile than it does on computer mainly because it looks more stripped down and simplified. 

http://ofanother.com/
Another is a design studio I found online and really liked their website. It's incredibly simple and easy to use. The logo into the top left changes and shows other shapes/icons. It's the only colour other than black/grey on the site. I like how they've done this as it doesn't draw attention away from their content. Only 3 main links on this site; Projects, Updates & Information. On the projects page you can scroll down and view the examples of work, once you click on any of them it takes you to the actual project. Hovering over the projects then brings up the title of the work and it reduces the opacity of the main image when hovering the cursor. Then on each project page it's just another scroll down to see more of the work from that project. Very simple layout and format for this site, which works well for just showcasing creative work.

The mobile version works the exact same way but scaled down to just one column instead of 2 on the desktop version.

http://heavyheavy.com/
Heavy Heavy are a design studio with a very clean website to show their portfolio of work. The homepage showcases and previews their most recent work within a simple grid that has 2 columns, to fit in large images as the one seen below and 2 images across as well. The site has 3 other links, work, studio and contact, so finding your way around isn't hard at all.

When you hover over the logo at the top left, it turns into a high speed gif that shows loads of different images. I think that this was an interesting element of the site, you don't come across it too much on websites so it would a nice surprise and it had some entertainment value for a short while.

On the work page the projects are arranged in a neat grid that uses 3 columns. Each project when hovered on top shows the name and fades the image to green to create a contrast and focus for the name of the work. A very simple effect of which I have seen used with reduced opacity on other sites such as the previous one 'ofanother.com'. I think it is something I can implement on my own pages for my photography blog.

Mobile version is very similar but reduces the size into one column. The links are hidden within the icon with lines, which is now a common way of getting to the tabs on mobile sites. I have no idea what the icon is called but it's now been used over and over for the purpose of finding links.