Web

This week is about recapping all the projects I’ve been working on, so let’s kick things off with some code, shall we?

I recently worked on a site for Mr Blacktooth himself, Carey Haider.

Carey Haider | Photography and Graphic Design_1264406557671

He had a really clear design in mind for himself, so I just spun up the code on this one.

Whether he’s posting photos, apparel design, and video- he never fails to entertain me.
Go check out what Carey’s been up to– you’ll be glad you did!

SadieMain

I recently had the pleasure of designing the personal site for performance artist, Sadie Lune.

Sadie Originally said she wanted something that was “Freak Show meets Art Nouveau”, and I immediately knew I had to make her an illustrated header.

I did a lot of design research on freak show and circus posters, as Art Nouveau was already a well-researched aesthetic for me.

I tried to combine the hand-lettered, banner laden, design of the freak show poster, with the heavy line weight and realism of the art nouveau poster. This was the result:

Sadie Lune_1264413562260

I was especially pleased with the integration of the header and the curtains.

I also used a transparent graphic for the header, allowing the moon in the background to show through on the page.
The moon remains stationary, as the picture of Sadie and all the content below, scrolls freely.

As for the left sidebar and post headers, I wanted to continue the retro theme and incorporate an old newspaper feel.
I mixed up a bunch of different fonts and graphics to try to achieve this.

There are some other nice details to the site, like the event calendar on the left; which Sadie can use to not only put new events into, but can also create new posts automatically without having to reenter all the event information.

I’m also particularly fond of the custom search bar, testimonials, and flickr galleries- which update automatically when Sadie updates her flickr.

I’m really happy with how the site came out!
What do you guys think?

ThisIsStar Relaunch!

Oh my god!

After months and months of drawing and coding, This Is Star has a new look!

I’ve been doing a lot of code and design on other people’s websites for the past couple months, and it occurred to me that a new look on my own site was way overdue.
The previous design had been standing strong for just over 2 years, and I knew it was more than time for a change.

The new site has some neat features that I’ll share with you now.

Custom Category Headers

I designed the site to skin the headers of various posts, by category.
This way, when I make an audio post, it calls a header illustration with a cello bow and a microphone.
I have similar headers for several different types of posts, and plan on adding more as my collection of post topics grows.

DefaultHeader
AudioHeader
PhotoHeader
IlloHeader

I was inspired by the manner in which sites like Tumblr autoformat your posts by type, and I wanted to do something similar on my site, which is wordpress based.
Changing the header background dynamically by category seemed like the simplest way for me to get this feel without going overboard.

Fun with JavaScript

Seeing as I’ve grown a lot as a developer in the time that has gone by since I did my last site design, I thought I should show off some of my newer skills.
One of those skills is using JavaScript, which has become much more simple and dynamic in recent years thanks to the rise of libraries like JQuery and YUI.

I used JQuery on my site to make a few neat effects that I’ll show you here:

adexpand

If you click on one of the “Advertise Here” buttons on the right hand side, you’ll notice that the information on purchasing ad space on the site expands below the ads.
This allows me to display the information without adding an unnecessary extra page, or allowing the user to navigate away from the main content.

Tis_hover

If you hover over my logo on the top left, you’ll see that it animates slightly.
The lovely logo is, of course, designed by the equally lovely Nubby Twiglet.

collapsingArchives

You’ll also notice that all my archive pages and categories will expand using a collapsing menu.
This is powered by Collapsing Archives, and Collapsing Categories plugins, respectively.

Dynamic Footer

sweetFooter

A web design trend I’ve seen popping up a whole lot lately is putting lots of dynamic content for social networking in your footer.
I really like the look of these big footers anchoring everyone’s pages, so I decided to do my own version, integrating design elements from my category headers, as well as the site header.

I hope all of you like the new site design as much as I do!

I’ve recently been working on a couple of web design collaborations with
the impeccable Miss Nubby Twiglet.
She is easily the best designer I’ve ever had the pleasure of collaborating with.
She has been at the helm of visual design on these projects,
while I’ve concentrated on code and interaction design.
I’ve had so much fun coding up Nubby’s designs and making her ideas become reality.

Biorequiem

Biorequiem

Most recently, we spent some time working on redesigning Biorequiem,
the online home of Miss Zoetica Ebb.

Zo was looking for a clean, simple design, with lots of dynamic elements.
The things I’m most proud of on this site are invisible- the way the sidebars update with recent posts and generate thumbnails on the fly, and the galleries automatically integrate new content when it is added- without a need for further coding.
I’m also totally in love with the logo Nubby designed for the top header!

iCiNG

iCiNG

A few months ago, we launched the new face of iCiNG, Gala Darling’s fashion & lifestyle site.
Nubby incorporated the illustration I did of Gala’s crown logo into her fantastic magazine layout navigation header.
From Nubby’s mockups, I integrated the design into Gala’s content management system and blog software.

This project was the start of my web work with Nubby, and I expect there to be many more collaborative web design efforts in store for the two of us!
Keep your eyes peeled!