Web Design
Virgo is believed to represent the virgin goddess of fair judgement, Dike. She is often seen holding the scales of justice, depicted in her neighbour, the constellation Libra. She left Earth so she could observe mortals from a distance in the skies.
So much about design is about using your best judgement to find balance, and I believe that to be particularly true of web design, which needs to take into account visual appeal, ease of use and speed. It’s a challenge to give each of these aspects their fair share of the design, but when you take a calculated step back to weigh the options, you can usually find a combination that guides the user on the right path.
A website for an environmentally-conscientious hair salon.
Note: This project pre-dates responsive design and thus isn’t mobile-friendly.
The challenge
The owner wanted each menu item on the website to look like a leaf on a tree. I had to build this in a content management system that generated the menu automatically as a list, which made it impossible to target a specific item in order to position it independently from the others.
Highlight
Targeting every other item in the list and changing their positioning allowed more items to be added to the menu in the future without breaking the layout. Combined with the careful positioning of independent items – such as the logo, contact info and social button – created a random, leaf-like effect.
Room for improvement
Even though this design is clean and elegant, it suffers a bit on a larger screen. The sides and bottom can look a little empty and I should’ve added some greenery that could be seen at larger resolutions. Responsive design has taught me to be more conscientious of the different viewing experiences a user might have – big or small.
A photographer’s portfolio website.
Note: This project pre-dates responsive design and thus isn’t mobile-friendly.
The challenge
Finding photography portfolio websites to generally be a little bland and boring, I wanted to create something that would stand out and be memorable, without being too flashy and taking attention away from the photos.
Highlight
Using a paper rip and putting things at a bit of an off angle made the page feel more dynamic. I also think that my choice of colour and use of the photographer’s selfies helped infuse the layout with a bit of her personality.
Room for improvement
Trying to keep a photo-heavy website fast-loading resulted in my not properly showcasing the photos. I should’ve used a script to make the photos fill the screen and spent more time optimising them to load quickly at a larger resolution. Today I give much more thought to the whole experience and avoid getting caught up in a single aspect.
A shared recipe blog.
The challenge
Creating a blog with personality that was easy for people without experience to update and practical to use on your phone or tablet while working in the kitchen. This was my very first attempt at building a responsive website and the first time I created anything in Wordpress.
Highlight
Sharpening my CSS skills and understanding of PHP was a great technical accomplishment. I’m particularly happy with the small details, like the ripple border on the bottom of photos and the bites out of the ingredients in the tag cloud.
Room for improvement
The site would really get a lift from my learning some basics of photography. But what I may lack in technical skills, I think I make up for in creatively presenting and staging dozens of batches of muffins and cookies in different ways.
A newsletter from a supplier of digital solutions for hair and beauty salon owners.
The challenge
The daily hustle and bustle did not allow salon owners to check in regularly to read the great content being published on our customer portal. We hoped sending a monthly digest with snippets to pique their interest would draw them in to read more. Using images to break up the text was key, but we rarely had anything splashy enough to use in a large format.
Highlight
Drawing from our brand’s playful and dynamic feel, I had the idea of using compact banners, but always with an element extending beyond the frame. This added a bit of whimsy to an otherwise simple layout.
Room for improvement
Viewed on a mobile, phone numbers split onto multiple lines in the middle and titles could be larger compared to the body text. I now always set aside time to fine-tune such details for smaller screens.
A website for a hair salon, featuring photography from their main supplier, Moroccan Oil.
Note: This project pre-dates responsive design and thus isn’t mobile-friendly.
The challenge
The owner really liked the style of another website where each menu item was a different colour. I had to build this in a content management system that generated the menu automatically as a list, which made it impossible to target a specific item in order to colour it differently from the others.
Highlight
Discovering a way to target the order of the items in the menu list allowed me to style them differently. Using a gradual change in purple nuances (the primary colour used in the salon), paired with careful cropping and positioning of images created an effect that was conservative and refined, while also feeling like it had movement to it.
Room for improvement
This design did not allow for much growth since adding to the menu would break the layout. However, it was very unlikely the salon would need more pages on their website. I did have a backup plan, just in case the need should arise: replacing the link to the front page (clicking the logo does the same job) and the gallery (linked on the front page).
A campaign to increase appointment bookings in hair and beauty salons during their quieter months.
The challenge
Creating these types of campaigns on a regular basis eventually made our inspiration run a little dry. We wanted to keep these engaging and fun visually, while always doing something a little different.
Highlight
Inviting salons to participate by postcard (in addition to via the usual digital channels) was suggested during a brainstorming session. A travel gift card was to be the campaign prize, so this sparked the idea of creating a kitschy “greetings from...” postcard with large letters as windows to fun travel destinations. I used this for both the postcard sent to the salons and the contest page for their customers.
Room for improvement
While it’d be a bit of work to make the images on the desktop and mobile pages different, making small adjustments on mobile would’ve increased the legibility of the stylised text. I’m now much more conscientious of the mobile experience and take the time necessary to optimise it.
A fan website for the Californian band Orson, using images taken from their label's website and the album cover.
Note: This project pre-dates responsive design and thus isn’t mobile-friendly.
The challenge
The band had very distinct cover art, but it had been borderline overused in promoting them. I wanted to pay tribute to it in order to honour their sort of “brand” and make it recognisable as an Orson site, without just simply readapting it to fit my page.
Highlight
The band’s hometown of Hollywood was a big part of their identity and what gave their music a happy, summer-y quality. Taking inspiration from the rays around the collage on their album cover, I drew a sunburst behind a photo of the band. I brought it all together using the iconic sign and some of the bird silhouettes that are so prominent on the album art.
Room for improvement
The transition from the bottom of the band photo into the rest of the page is rather inelegant. Instead of trying to hide the edge with birds, I should’ve boxed in the photo and lightened the background from there for a cleaner layout. Creative problem-solving has become one of my biggest strengths over the years and now allows me to embrace these kinds of challenges.
A Flash microsite showcasing a limited edition guitar also used by Vince Neil of Mötley Crüe.
The challenge
Wowing Mötley Crüe fans and also creating a sense of prestige for the shops carrying the guitar. I had very little to work with, just one photo of Neil, and some basic straight-on (read: boring!) shots of the guitar and accessories.
Highlight
Inspired by Neil’s body art, I drew typical old fashioned sparrow and scroll tattoos in the guitar’s colours. Drawing a few variants of the banner allowed me to animate the birds to look like they were unrolling it, resulting in a really cool welcoming effect that pulls you in. I also like my little amp button at the top right to turn the site’s music off and on.
Room for improvement
Although interestingly rich and textured, the background makes the text a little difficult to read. Lightening the text or toning down the background in these areas would’ve improved the contrast. I have more appreciation for the user experience than I used to and I try to find a good balance between cool visuals and usability.
Click to expand details on a project:
