Research (5): JavaScript

For my gallery I want the play button to be inside a circle, which, while the images are playing automatically will countdown the amount of time each image is displayed for. I saw this on another image gallery I previously posted about and thought it was quite neat.

The first way I considered doing this was by creating an animation and then converting it to a .gif to play and pause using JavaScript hover / click states. This way doesn’t give me much control over the circle image once the animation is created though, so I researched a way to create this using JavaScript. So I have decided instead to code a circle that “draws itself” using the canvas js feature. This will give more manipulation control.

Advertisements

Research (4): Colour

I have considered making my gallery aspects in colour (UI, text colour, text background colour), such as the colour themes below which might fit my theme.

blue bluegold

However I think it will place more emphasis on the gallery making them black and white.

Initially for my buttons and text background I have thought about having black UI buttons with a black background, and having white text. However, because black is more evident in images I have decided to make them white, and also a white background looks cleaner and snow is white so it fits the theme in my opinion. It might look a little plain but I want it to look clean as the focus is on the pictures over anything else.

 

 

Research (3): Navigation Design & More Examples

I want to create an easy to navigate gallery, and to ensure I do so I have researched user interface and user experience in regards to image gallery and navigation arrows.

I read an article called “Why Users Aren’t Clicking Your Home Page Carousel” on a website called uxmovement who say that less than 1% of users click on home page carousels. Apparently the problem with this is because the carousels have bad navigation – if the navigation arrows on a carousel don’t give users an incentive to click, they won’t click.

Capture

Reading this made me sad because I had begun to design a carousel similar to the one on the left with the little dots because it looks minimalist and not cluttered.

– –

I then read an article called “Designing Effective Carousels: Create a Fanciful Amusement, Not a House of Horrors” on Nielsen Norman Group’s website that is Evidence-Based User Experience Research, Training and Consulting (pretty reliable source, I think). The article featured the image carousel on Nest’s website, which I really like the look of. It plays automatically and has a small, unintrusive play/pause button. The images are clickable below the feature image, which means users can see what they are clicking (making them more likely to click, according to the previous article). I quite like it as it is very minimalist, and the captions are nicely incorporated onto the images.

Capture`

Nielson lists some guidelines for good carousel design which includes:
– Use icons and links that are understandable and recognisable. (They make a fair point that the user doesn’t know which image is clicked when a dot or number is used as navigation items, so I have decided against using dots).
– Indicate how many frames are present and where the user is within the progression to help the user feel in control. (This also makes sense and is a tip I will remember when editing my mockup).
– Make links and buttons large enough to decipher and click

– –

Then I went on to find more slider / web carousel inspiration and came across the article “Use of Huge Sliders in Web Design: Best Practice“. I really like how the following image sliders are displayed.

Capture1

(The above image is a screenshot from lindalino). I don’t like how this gallery scrolls vertically instead of horizontally but the caption displays really nicely on top of the images. I like the idea of using full screen images in full focus. I would have to find somewhere to display the upcoming images, though, as this doesn’t show how many images are in the carousel or give previews of them.

Capture2

This website incorporates an image slider as their entire website which is intriguing. The bottom links navigate through the slideshow, which is a feature I like. I think it’s also interesting that the title of the website is at the bottom of the page.

 

 

 

 

Research (2): Theme

I want to create an image gallery with pictures from Mt Ruapehu. I am just in the process of deciding on the images I am going to use, but in the mean time have been looking at ‘snow’ themed websites to get a feel of the design they give off. I want to create a simplistic photo gallery but also stick to what other ‘snow’ themes are like, without being too cheesy or obnoxious. No falling animated snow.

Typography: A few websites I have come across used strong, capital heavy typography ~ a style I quite like.

For example, sidewalkland has the cool (so punny) image below as their header, overlaid by heavy type. The image has been edited very interestingly, quite the opposite of what it is in reality. I’m not sure this would work in an image gallery.

website1

mericanmade is an ad agency website with a mountain graphic in their header, also, with similar type. The clouds over the mountain background move which is so unnecessary but damn I wish I could do that. Although looking at the code, it just looks like two background images moving across pixels…. I think this would be too cluttered on an image gallery though.

website2

 

TheThreeBees is a website for people who create “some brilliant, beautiful bullshit”. Their website is pretty, it also gives off a snowy, mountain vibe. Even though I’m not quite sure what exactly they do. Again, they have used big, strong, capitalised type. The section inserted below interested me – I like the layering of colour pictures on top of a black and white image. It is a little cluttery with the circles and box of text, but perhaps it is something I can draw inspiration from.

website3

 

HelloMonday creates websites, and they created into the arctic, a snow themed website for GreenPeace. Below is an image of the site from their website, with an artic theme. Again, heavy type. I like their graphics too ~ not sure how that could be incorporated into an image gallery, though. I like the grey and teal colour theme. It goes well with the header image. I personally think the site has too many fonts in the small screenshot, so will stick to one or two fonts.

website4

 

 

 

Research (1): Example Photo Galleries

I googled “good image gallery designs” and “examples of image galleries”. Here are some examples from around the internet that I found interesting, you know the drill.

Screen Shot 2014-07-23 at 10.28.05 am

 

Ben Trovo has created an image gallery, which although it doesn’t include all the specifications our brief has to have (doesn’t have the ability to choose which picture to navigate to), I think the navigation and image description is quite interesting. I haven’t really seen anything like it, and I like how it is all together in one group. I don’t like how it is placed on the image, though. I feel like it could cover important parts of other images.

Screen Shot 2014-07-23 at 10.33.00 am

As a design element I like the little clickable dots on image slideshows, but one potential problem is that you can’t see which image you are clicking too.

Camera is a slideshow plugin which I find very interesting because when you hover over the dots it shows a preview of the picture. The slideshow also auto plays automatically, and shows how long each picture is playing for using a circle on the top right. When you hover over an image, however, the timer stops. It has lots of effects which when used together is a little bit of an over kill imo. But I do like the ideas of these different effects so may borrow one or two for my assignment.

Screen Shot 2014-07-23 at 10.43.52 am

In regards to image slideshow designs, this one is my favourite thus far (although that is largely helped by the fact that the images are beautiful). If you look closely down the bottom of the image slider it shows which image has been selected using an opaque border around the outer inside of the image. The navigation arrows are somewhat opaque and disappear when you are not hovering over the slideshow. I like how the images are laid out, they aren’t crammed together and have breathing space. The images don’t have captions like is required in our assignment.

– –

For my assignment I want to try to incorporate aspects of these three themes into one photo gallery.