I then began to produce a sample gallery page, as planned. Using the nifty little gallery layout idea I stumbled across in my last post, it didn't take long for me to come up with a basic gallery. I then cooked up a simple thumbnail image, had a VERY quick play with the image size, then integrated the Lightbox JS idea (mentioned in last post). This is about all I need to do for the gallery for now.
So to recap, we have the gallery page:
You can see I've whacked in a working title and header, 'Images of Oxfordshire' and a nice little tagline underneath, 'Original canvas paintings from South Oxfordshire.
Next is the navigation bar, which is CSS styled and text based. This type of navigation is quicker to load that pure image-based navigation. The text labels can also be read by screen reading software, which is a key concept when designing with accessability in mind. Furthermore, search engines can read the text, which is always a bonus.
The gallery thumnails can be seen in a tidy little grid. Under each image is the text 'Details Buy'. Regardless of whether you click 'Details' or 'Buy', you are taken to an Item Info page, which will display details and a buy button.
It's worth noting that the options on the navigation are just initial ideas, no thought has gone into them other than the last one - 'View Basket'. If you look back at the sketch I did on paper at the start of the project, you'll see that once a user has added a painting to their basket, I want the app to return to the gallery they came from in order to continue browsing. If they decide then, or at any point, to finish their purchase, the checkout must be easy to get to. In fact, this is so important that as I type this I'm thinking about having that button on the right of the nav-bar and making it a few pixels larger in font size, to make it stand out. Hmmmmm, that idea may need some playing with. At the end of the day, this is only a mock-up and the styling of the whole navigation system is subject to change as the project moves on.
If a user clicks on a thumbnail, the Lightbox JS system will present a nice big version of the pic overlayed onto the gallery. It's pretty damn sweet and it goes a little something like this:
I love this effect. Personally, out of all the ideas I've seen for galleries, I think it's the nicest. In terms of raw presentability it's unbeatable, but it's also quick to load, easy to implement, CSS-stylable, cross-browser compatible, the list goes on.
I have seen good alternatives, such as pop-up image containers on mouseover, but that's not for me.
Note - the photo was nothing to do with me, it's a pic that comes with the lightbox as a demo.
Finally, I have constructed a basic Item Info page. It shows the painting's title and artist's name, plus the year of the work. It shows a nice, to scale, bigger version of the painting. I have left room under the image for further details, such as dimensions, medium used, what drugs the artist was on at the time etc etc.
Most importantly, on the right hand side, I have made 'Buy This Canvas' button - It's CSS-styled and stands out. Remember, a text based button is better for accessability. Also being CSS-styled, if I want to change the way my buy buttons look later, I can do it by making one change to the CSS master file. I have left room for a price under the buy button. There is also of course, a link to navigate back to the gallery the user came from:
That's all for now :)
Phil
No comments:
Post a Comment