Work In Progress: Week Six

This is my progress post for the lack of progress the previous weeks. All of my javascript is working, after much editing. I still have to add fail gracefully, which I can’t get to do with JS, eek.


Oops. This is not very graceful.



Work In Progress: Week Five

Coding is going great.



I have actually started now though, but have a long way of debugging to go in the way of js and jquery, but thankfully my other code validates just fine already and on the first try ~ holla.

css Screen Shot 2014-09-01 at 9.09.12 PM

Work In (Lack Of) Progress: Week Four

Unfortunately no progress has been made this week on this assignment because I have been focused on writing an essay which has been slowly draining the life out of me.

Will Nicole find her assignment motivation again? Will she complete and hand in her essay and do some work on this assignment? Only time will tell.



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.

Work In Progress: Week Three

I have completed the first mock up that I’m somewhat happy with. It’s simple, functional, and has all the requirements.

After trying to integrate arrows I have decided they are gross and I can’t seem to get them into my layout nicely so I don’t want them and have decided instead that the user can navigate the gallery by clicking the images below.
I have also placed the title and caption on top of the images with a small opacity on the background which I think looks nice. I am considering making the caption and background disappear so that the user can see the full image, but I don’t want it to be too confusing.

I haven’t inserted all my images because I made a rookie mistake and saved them on the wrong computer, but will be putting them when I have the edited images.

Screen Shot 2014-08-12 at 4.14.11 pm

Screen Shot 2014-08-12 at 4.15.04 pm

I want the images to be semi-transparent when they are not selected, but then fully transparent when they are hovered over. The image displaying up the top is going to be full opacity. This makes the image that is selected recognisable within the gallery, but also adds a somewhat ‘snowy’ effect I think by making them hazy by lowering the opacity. I’m not sure about what opacity percent I want to use yet. The images below that are ‘unselected’ are at 65% opacity, but could still be unrecognisable.

Screen Shot 2014-08-12 at 4.47.15 pm


I am still going to be looking at editing this slightly as I would like to have arrows, so I want to try and find a way to integrate them nicely. I want to get this finalised and onto html and css though so I can add javascript sooner rather than later.

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.



Work In Progress: Week Two

This week I have chosen and edited my images. I applied roughly the same edits to them, to add a bit of grain and sharpness, and cool down the image.

For example, the image below on the left is one from Flickr that has a creative commons license, and on the right is my edit.


– –

I have also decided to use the font PT Sans Caption Bold for the gallery title in forced capitals, because it follows the strong bold theme that other snow themed sites use.


At this stage I am also thinking I will use the regular version of the same font for the other text (captions).


I think it would look unified if this was also uppercase, however it may look too overpowering when it is put together.

– –

I have also done a few pencil sketch mock ups however am not sure about any of the mock ups, and did these before my latest research post so am going to try and develop them a bit more. I tried pushing elements around in photoshop for a more visual mock up, but I’m not satisfied with this either after doing my latest research post.



20140803_121817 20140803_121900 20140803_121741


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.


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.


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.


(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.


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.


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.



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.



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.