Freelance for fine art photographer, Michel le Sueur
October 2012MichelLeSueur.co.za
An e-commerce photography website developed to the exact supplied visual specification (a pdf from Adobe InDesign) of Michel le Sueur, an internationally sought-after photographer, designer and design co-ordinator. |
| Michel Le Sueur - Fine Art Photography - Front Page |
Print Gallery
Links to the 40 galleries. |
| Michel Le Sueur - Fine Art Photography - Galleries |
Gallery Page
Each of the 40 gallery pages was designed by Michel Le Sueur.
 |
| Michel Le Sueur - Fine Art Photography - Gallery: Limberg Shadowscapes |
 |
| Michel Le Sueur - Fine Art Photography - Gallery: Overberg Summerscapes |
Clicking on a photo takes you to an Enquiry Cart page.
Enquiry Cart
The enquiry cart page gives further information such as printed size, dimensions and price and in the case of the small thumbnails, a larger view of the photograph.
 |
| Michel Le Sueur - Fine Art Photography - Enquiry Cart |
Clicking on the pic or Order button takes you to the
Order Form
(also elegantly designed by Michel Le Sueur)
 |
| Michel Le Sueur - Fine Art Photography - Order Page |
Implementation
After testing several solutions in my own time, we concluded that because the site had to represent Michel Le Sueur's design down to exact pixels, no template-based solutions, such as Wordpress, pre-coded or online gallery solutions could be used.The entire site, including galleries, ordering and content management systems (CMS) would need to be developed and coded from scratch.
Preperation
My first minor task was the unusual horizontal gradient behind every page on the site. Thankfully, web browsers have their own methods of rendering smooth gradients very fluidly and effectively.The next task was sourcing Frutiger, a commercial print font not commonly available for web usage.
Like many modern typefaces, Google's default Droid Sans for Android and Blogger is based on Frutiger, so we tried that for a while until we were able to source and purchase the license and code for web-enabled Frutiger from fonts.com.
With those and other source elements ready to be implemented, we were able to proceed with dvelopment.
I started by reverse-engineering the underlying grid system - present to some degree in each of the galleries - and noted the exact pixel dimensions of the page, sub-containers like the navigation bar and main picture area, photos and margins. By doing this I was able to specify standard dimensions and positions for the photo galleries.
 |
| Michel Le Sueur - Fine Art Photography - Design Grid |
Coding
Because many photos fell outside of the standard dimensions or positions, my system had to represent this grid, but also be flexible. This was acheived by coding the grid's columns and rows in cascading style sheets (CSS). I could then choose to use my pre-defined numbered columns or rows or alternatively type measurements for pics which didn't fit the grid.Note: my preferred web design tool is BBedit for Mac, which is a simple, uncluttered, yet powerful text editor with support for many programming languages.
 |
| CSS columns and rows in BBedit |
I created two MySQL tables and wrote a PHP script to read data from the tables
The first table lists the galleries and the pics they contain. The gallery page references it's row in the table and adds the pic IDs to an array until it sees a zero, then stops.
 |
| Galleries and Pics by ID number |
The array is then used to reference the second table, which has all 300 pics listed by ID number with pic name, width, height, and v and h positions on the page. The gallery page HTML and some CSS is generated using this info.
 |
| Pics by ID number with dimensions and placing |
I created a PHP script to generate enquiry and order pages for 300 pics, making it easy to add pics to the site and keeping development costs down for the client.