Challenge
Fashion student Annie needed a website to display her work for potential clients
I began by thinking about the aspirations of a fashion student and the impression Annie wanted to give to anyone visiting the site.
She wanted something:
- Creative
- Bold
- Artistic
Now this can mean many a thing so it was important to try to get the interpretation right. This meant that I would need to convert what Annie wanted into real web terms.
Design
I came up with the goals of making her site look:
Modern
Since her website needed to have aspirations of a fashion it was important keep a sense of clothing or fancy wallpaper in mind. I experimented with a couple of different wallpaper patterns and created some Photoshop patterns. I’d decided to choose two different styles, an old wallpaper classical design and the other a modern (with a slight classical pattern) design.
Artistic
The bright design would have three shades of red, curves and swirls.
Three shades of grey blue, almost medieval-style wallpaper and shapes for the classical design.
Strong (bold)
By this stage I was leaning more towards the bright red design which made the website look lively. The grey-blue design might be suited to a designer that follows the medieval era (corsets and such).
Identity
I wanted to keep the classical look between the two designs as they both had wallpaper-like backgrounds and most people would associate these with San-Serif fonts. Fonts like porcelain.
Web designers are limited to a small number of fonts, especially for San-Serif range such as Times New Roman, Times, and Georgia. And the most obvious choice was Georgia as this is a better-looking font for on-screen purposes.
Annie decided to go with the bright red design, as she believed it would portrait her work and personality more effectively.
Custom CMS
Dust
By using Dust it was easy enough to create a custom built content management system. Using a pre-built one would be complex and I’d have to train Annie as well as myself! The CMS consisted of two pages, Portfolio and Category.
Therefore, I thought it would simpler to built one customised for Annie’s needs. She wanted to add portfolios to her Portfolio page. Therefore she’d need a database table storing all this information. She also needed to categorise all these portfolios, and thus another database table to store the categories.
Internet Explorer Only
I came across a slight problem where Firefox was saying that parts of our CSS were deprecated. This was because I used the PNG transparency fix for IE and this behaviour function that allowed the JavaScript to be applied to PNG’s would cause a warnings from Firefox. To stop these warning firing off in Firefox, I used Dust’s Network class to find out if the user was using Internet Explorer.
Portfolio images
I decided to use Prototype and script.aculo.us JavaScript libraries along side with lightbox (v2.0). I was going to use jQuery and Thickbox combo, but I found lightbox to be slightly slicker when opening up an image. And first impression was all-important for for the client.
The size difference is about 60KB (110KB for lightbox, prototype and script.aculo.us effects scripts); however I thought most people viewing her website (universities) would be have high-end computers with connections beyond 10MBits.
