Mockup 1


  • How the images are laid out clearly
  • larger thumbnails for side images
  • When the images are not in use they are faded out and out of focus to not detract from viewed image


  • Too simple with more of a focus on functionality over aesthetics rather than a balance between the two.
  • Navigation between images isn’t clear
  • Don’t like the spacing above and below the larger image in comparison to the spacing with the smaller thumbnail images. Seems awkward despite having text above and the slider below.

Mockup 2



  • Favouring the large hero style slider image
  • the hover function of the arrows and description/caption tab that come over the photo
  • the image is the main focus
  • no awkward spacings between images
  • thumbnails are opaque and blend in below the main image


  • Images that aren’t square cannot fit well into the thumbnails below, solutions can be that there is a slider and so more images can be contained in the slider and of any shape. Or the thumbnail shows only a section of the images as a preview.
  • Going to have issues with image sizing and not stretching any images to make them all fit fullscreen and not have to keep changing the measurements.

Mockup 3

Part One

Screen Shot 2015-08-12 at 8.52.27 PM

Part Two

Screen Shot 2015-08-12 at 9.28.51 PM

The parts 1 and 2 are to show the transition of the gallery, how initially it is a grid and the selected image enlargens whilst background fades away. Images are navigated through by the next buttons that I may fade away once autoplay begins. Title of image series, image title and the photographer are show to the side of the photo. The “x” is to exit out of the window and return back to the grid view of the images.

3 thoughts on “Mockups

  1. I agree with Alex, the second design is really swish and minimalist. But I think the third mock up will be more useful on a page, because it doesn’t rely on a specific layout for the rest of the page.
    It’s important to consider the context of your gallery, I think.


  2. Despite your comments, I still dig mock up one! Having the gallery sit to the left is a great idea and is a clean way to separate thumbs from preview. The one issue that I thought of when looking at it though, is that by having your thumbs sit horizontally with your main image, you’re sacrificing some of that 800px width that we’re bound to by the brief, making your mains smaller and giving it less impact.


Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s