Design Practise: OUGD503 - Responsive: Photography by Matthew Savage Digital Development

I started drawing some scamps for his website, as I wanted to have three designs to show him. He has gone to Iceland today for a week, so I plan to have all three designs done for when he gets back so he can give the go ahead for one to get developed.

Design 1
This design would have full background images on the home and album page to give the user a full screen view of the photographs. I think this is the best way of displaying images because it gives users the maximum size, and if they are on a mobile or tablet this is valuable space.

Home Page
The home page would have a photograph from each album, and a link to that album. There would also be arrows so the user can view all the pictures at their own pace.
The navigation would be in white at the top of the page with no background so it interferes as little as possible with the photograph.

The mobile version would have the nav links underneath the title. This works fine as there is only two links, so there is enough space for them.

Work
This would have links to all of the albums on, and could be updated through a CMS. This is where it can look unbalanced because there is a sub navigation for one area, but none for the others, plus a video album.

Album Pages
I was thinking how I could lay out the images as there is both landscape and portrait versions. At first I thought about having one image to the screen, so when there is a portrait image, having it fit the height of the screen, but a black background on the sides. Then I thought about having a continuous stream of photos so there is no gap between them and the screen will also be full of photos. I think this is the better option, but I will give both of them to the client.

Contact
I think the biography should be on here as well as the contact details as there is no need for two pages for these.

Digital Development
I went into Fireworks to start digitising the scamps.

Home Page
This is the home page, and follows the scamp pretty much exactly. The navigation is on the top right, and the title is on the left. I have just put the title on in a normal font, but I will smarten that up a bit.
I also put a heading to the image with a link to the album underneath it, which gives it purpose.

I also tried the title and link at the bottom of the image, but I think people might miss this. If I have it at the top it also means on the other pages the margins and gutters can all match perfectly.

For the white arrows, I wanted to make them an SVG. This is a scalable vector graphic, which means no matter what size it is scaled at, it won't pixelate. This is appropriate for responsive websites. I had to research how to do it at first, but turns out you just save it under that file format in Illustrator.

Album

Then I started doing the album page, as this is pretty much the Home page. Instead of the title and the link, it is the album title and pagenation. This helps the user know how many images there are in the set and where abouts they are.

I made the left arrow smaller to see which I preferred.

I also started to show how it would look if you scrolled to the right. There would be no gap between the images, and there would a title and caption in the same place on each image.

I made both of the arrows smaller. Even though on some pictures you won't be able to see the title and pagination clearly, you can make an educated guess of to what it says or you could highlight it to see it.

I was thinking, should the title/pagination just feature on the image which is on the left hand side of the page like here.

And switch to the next image when the left one starts to scroll off the page..

Or feature on them all. I then thought it would be better if they fit on both images, and would probably be easier to code.

A pointer cursor would also be valuable for usability if shown on the arrows when you click on them.

I also added copyright details onto a footer.

I made the line thinner as I didn't want people to get drawn to it easily, as it is distracting.

Work

I then started doing the work page, which would feature all of the albums you can look into. This would have a white (or black) background.

Here I started adding the images in for World, and had a subheading about the album.

I got rid of the subheading as it isn't really necessary. I also got rid of the slash between the navigation as again, it was unnecessary. The way I laid out the albums was one album per line. In doing this, there is a lot of white space, which is something I didn't realise when doing my scamps.

So I moved them next to each other. This is perfect because there is no white space, and the amount of albums he has is equal to four columns. Of course if he were to add more that wouldn't matter either because there is a clear grid.

I also made the Work link bold, and changed the album titles to Upper/lower case, rather than uppercase.

I then changed the album titles to light, to create more of a hierarchy. I'm not sure if I like this though, as they need to be links and they don't look like links.

I changed them back to bold.

I then created more space between the rows which looks better.

I decided to change a couple of the images making the rows have alternate b+w and colour images. Just keeps it more consistent. There still isn't something quite right about the text, I think I'm going to add an arrow to make the link more obvious.

I then started to work on the links as I wasn't happy with them. I created an arrow to indicate to the user that it is a link that will take you somewhere. I tried it at the end of the image first.

Then I tried it closer to the word which I think makes more sense, and the user will know where to click more.

But I then changed the sub heading to bold and capitals, and tried the arrow at the end again.

Still prefer it closer to the title. I changed the pt size to 11pt which is better too.

I thought about not having it for folders without sub navigation as there is no need, but it looks unfinished.

So I put it on all of them.

I then thought about removing the spaces between the images. This is because the home and album pages are heavily photograph based, so reducing the white space makes it more consistent on the work page.

I then got rid of the titles and captions, and thought about just being able to hover over the image and the album title coming up over a lowered opacity. This would also be a link to the album.

I then started doing the contact page. I tried sticking to the four columns that are used on the work page first.

I think this is too boring and bodycopy text based though.

I then thought about having a white header rather than having the links over the image. This increases legibility, but I don't think it looks as good.

I also thought how are the panoramic images going to look - having a black background looks fine, so you can see the whole image. But, if I have a white header, the colours of the logo and nav would have to change colour.

I also thought about having no white header or line, and just having images behind all text, but I didn't think this looked very polished.

I then thought about having a white background header and footer, and having the images inside of this. I also put gaps between the images, and I think this works fine because there is a bit more structure if the client prefers this. It also means panoramic images can either have a white or black background without having to change the logo and nav colour, but white probably looks more consistent.

This would be the home page with a white header and footer. I do like this version as it is clean and simple, and still focuses on the images.

I then thought about navigation, and how instead of going to another page to display the albums, just have it in a sub navigation instead. This eliminates the process of going to another page, making it quicker for the user.

I then added arrows after each link to make it more obvious what they are.

I played around with point sizes getting the hierarchy right.

Album

Then I thought about what would happen when you click onto an album, say Andorra. There would still be an album title and pagination. The link Work would be in bold.

And the photos would fit together seamlessly.

I added arrows.

The left arrow would have an opacity of 50% to show it is redundant when you can't scroll left.

Then when there is a panoramic image, it has a black background around it. This isn't distracting away from the image, and it will al fit on one screen.

This is how the panoramic image would look when it fits on one screen.

I made srue the arrows were visible.

I also made sure it was central, so the black space was even between it.

I also thought about moving the arrows next to the title rather than at the sides.

This way everything is contained in that area for content, so helps keep distractions from the image. It also means the arrows are together so you don't have to go to the other side of the page to change it.

I tried it either side of the pagination, as that is what would change.

I decided to just have the arrows at the sides again, because this is where people expect them to be so will easily be able to find it.

These next five images are the website so far in order of going from the home page to scrolling through an album.

Home Page

Hover over navigation

Choose Andorra and get directed to this page

Scroll through the arrows to see the pictures

How a panoramic photo would look

I then decided to try the site with no white header/footer and just the links over the image. This is my favourite combination because it is contemporary and focusses entirely on the images.

This is how the home page would look.

This is how it would look when you hover over Work.

When you click on work, the first image in the set appears and you have the option to scroll through.

When you hover over the links in the navigation, they appear underlined to show that they are a link.

I also tried it without the arrows.

When a panoramic image comes along, it is surrounded by a black background.

This is how that would look with a panoramic image fitting the whole screen.

When on other albums where there needs to be a heading, this is how it would look:

I took a screenshot from one of his videos to show how a video would look.

This is how it would look on the site in the videos album.

I made a small box of information which is usually seen on videos to show the client what it would look like when you hover over it. The coder will put a standard one in.

For the contact page, I thought there is going to be a lot of white space because there isn't really a lot of information. This made me think, why have another page for it? I could have it as a 'sub nav' style on the home page with all the relevant information on it.

I tried this, with a lorem ipsum bio, email, facebook and publications section. I moved the nav links further left so the content goes to the end of the margin, but this would look weird when you aren't hovering over it.

So I moved it further left which I think could work. I also made the pt size bigger as it would be too small to read. I also changed the case type on the bodycopy to Sentence Case.

I moved it back again.

But tried everything right-aligned and the nav links to the edge of the margin. This isn't the natural way to read though.

I tried a few different alignments but nothing seemed right.

I then tried the nav links on the right, but the content just starts earlier. I think this could work. I also made the text justified left.

I also got rid of the Facebook url, and added an icon instead that would act as a link.

Here the icon is on.

I made it smaller.

I moved the navigation to the left.

I added a grid, and moved the navigation according to that.

As for the Work sub nav, I tried that here too.

I tried it without arrows, thinking is that really necessary?

I put the arrows back, as it does make it more obvious that they are links and the bold headings are not. I also changed the case to Sentence Case, as opposed to all capitals.