I’m very excited and honored to be working with the UX Boys. New comics are headed your way, so keep an eye on the articles at UX Booth!

Rebecca Murphey, founder of the Triangle Web Women’s meetup, approached me about making a custom Twitter user picture for the group’s new Twitter page. She suggested I do something with super heroes, I suppose because of my work in comics. I volunteered to create a background image, too, and create a complete Twitter persona for the group:

The custom twitter background I made for the Triangle Web Women's Twitter page.

The Triangle Web Women's Logo -- powrful!

First off, I brainstormed a logo. I combined the universal “power on” symbol with the traditional and empowering glyph for “woman” and placed the two originally on an upside down equilateral triangle. Later reviews with Rebecca revealed that such a logo could give the impression that the group is a strictly lesbian gathering, so I made the triangle more abstract, as you can see on the twitter page.

For the super heroines, I wanted to depict the variety that our group embraces: Mac, PC, corporate, freelance, artsy, techy, black, white, all of the above. I used lots of stars, which I got from this lovely set of Photoshop brushes–hey, this was a weekend project, and there wasn’t time to make a set from scratch! I was thinking “we’re all rock stars online” with that.

After scanning the artwork, I colored the heroines digitally, choosing a palette of bold, progressive colors. I wanted to be girly and fun without being pink or nauseating. I am very pleased with how the colors came out!

But when I began to design my matching ultra tiny Moo cards, I wasn’t sure which website to put on the card, my web design business here at ThePinkCrow.com, or my award-winning web comics at SubcultureofOne.com?

The answer was simple. Make a portal page. A portal page serves as a point of entry to the Magical Land of You for people you’ve just met. It should have links to all your sites, professional and personal, with one or the other taking precedence based on the sort of people you give your cards to most frequently. It is important to keep your social networking sites on there. Many people you meet under professional circumstances will likely want to keep in touch with you via shared social networking sites like Twitter or LinkedIn.

Lastly, I designed the site to match my new business cards and my Twitter page so I would present a homogeonously branded image of myself. Whether visitors to RacheltheGreat.com want to learn about my comics, my web design, or my flickr pictures is up to them, but I’ve laid everything out in neat little rows, just in case.

A screenshot of RacheltheGreat.com, my personal portal page that I designed and built.

Now for the tech dirt.

I was very impatient with this project. Impatient with browsers for not supporting things I wanted, impatient for images to load, impatient with search engines for being slow to figure out what to make of canonical URLs.

I was so impatient that I did not even bother to check it in IE6 because, let’s face it, most if not all of my traffic will come from my handing out business cards. The people I give them to use Firefox and Safari. So I’ll go back and check IE6 when google’s analytics show that I’m getting traffic from search engines, where one or two IE6 users might slip through.

Featured techniques

1. CSS Sprites The hand-drawn icons for the social network links are all contained in a single PNG image, called a “sprite”. Using CSS, I can use different sections of that image over and over, making it look as though I have many small icons, while in reality there is only one image. Having to only download one image saves visitors time and cuts down on the resources my server uses in serving the page.
2. Rounded Corners with CSS Since I wasn’t expecting much Internet Explorer Traffic, I didn’t feel like slogging through Photoshop to make the rounded corners on the social links’ black box, either. Instead, I chose to use the (not to spec) CSS property border-radius. IE folks see just square corners. I don’t think they’ll notice.
3. Canonical URLs Search Engines hate repeat content. Some unscrupulous people like to copy other’s articles onto their own site to try to burst search engine rankings. So search engines now look out for pages they’ve seen before appearing with different URLs and penalize them for looking suspicious. But what if you’re twittering about you site using TinyURL? Or someone doesn’t put the “www” in a linking URL? Search engines might get confused and think you’re trying to pull a fast one. But! There’s a way around this, although still very fresh, and many major search engines are gearing up to support it better. Canonical URLs specify what the real URL of the page is supposed to be.

A screenshot of Karen Luk's WordPress-based illustration gallery site.

We decided to use with WordPress as a backend solution, because Karen was already familiar with its controls, veteran blogger that she is. The artwork and comics pages would be handled by Alex Rabe’s NextGEN Gallery Plugin. The front page would need a custom template while the blog posts were renamed “announcements” and scooted off to the News section. And as always, I optimized the code for accessibility, both human and search engine. The design lent itself to clean, semantic markup.

I snapped the site together, and it was up and running in time for her to pass out business cards with its URL at the convention.

All in all, this was a fun little project, and it was great to have the chance to help out a fellow illustrator under the burden of a looming deadline. I frequently visit her site to see what she’s uploaded. Now go check out her work!

Related posts:

• Triangle Web Women, creating a custom Twitter background

The client provided the pinup girl, and I edited her colors. This is the front page, but the inner pages were going to follow a different design, more abbreviated and with retro clip art of women doing their hair and such. By sheer coincidence, I happen to own a stack of books of retro clip art! Convenient, eh?

I truly loved the front-page design. I had been looking forward to adding this site to my portfolio so much, I’m posting the design here anyway.

Related posts:

• Triangle Web Women, creating a custom Twitter background

I kept the old “black and white and red all over” color scheme, and on the front page I mixed in an image of my alter ego off one of my business cards. The site had previously been coded in substandard CSS, and by now I knew better. At one point, I really wanted to show off, so I decided to make the layout, get this, based on the golden ratio and fluid (meaning it expands and contracts with the size of the user’s browser window–very tricky to do right while maintaining control over how things flow on the page).

I used grainy zip-tone and halftone screens to reinforce my comic book roots and made all my social networking sites much more easy to find, with links on each page or in context-sensitive places.

I wanted to build in my own gallery, but I didn’t like the Gallery2.2 script’s heavy reliance on table-based layout. Tired of gutting tables from my previous Rubifruit project, I nixed the the idea completely and linked to my preexisting DeviantArt account instead, which is good because DeviantArt is more socially active than a static on-site gallery and encourages through-traffic, but bad because I have absolutely no control over its layout nor is DeviantArt very “socially aware” (very few widgets that hook into other sites).

I also let go of my customize osCommerce shopping cart that I built way back when for an etsy shop. I figured etsy would offer more through-traffic, and thought it was worth a change, especially since I had made so many friends on etsy already.

A Commercial Approach

I tried to play up my skills as an illustrator and web designer on the new site instead of just promoting my comics, which are no longer the focus of my career. But according to Google analytics reports, people are getting lost when looking for just the comics. I have decided that Subculture of One cannot serve to both promote my comics and my web design. Thus, I made this site, The Pink Crow. I fully plan to overhaul Subculture of One once again, this time returning it to a more comics-focused theme.

I purchased a commercial banner exchange script, Easy Banner Pro, but getting it from it’s bland, table-based default to my shiny, CSS-based vision was quite a chore. I had three goals to fulfill with the new design, and they were:

1. Get them to sign up
2. Get them to upload banners
3. Get them to put the exchange code on their site

It looks easy, but the default site didn’t make it absolutely simple to do. Things were a little confusing. Like, when you logged in, you had to click around a bit before you could upload a banner. I had to make sure that people would sign up, upload a banner, and get their exchange code in as few clicks as possible. I had to make it obvious, easy, and all the while remind the user how much it would benefit them to follow through, because it’s so easy to sign up for something, then just forget about it.

Implementing the new design required lots of gutting and customizing. I started by scraping the user-side and public pages free of their table confines. Some back-and-forthing with the very helpful script creators resulted in the pleasant addition of several powerful and helpful features to both the front-end and the user side, one of which was the list of newly added banners. Many people didn’t want to join without seeing who else was joining, and I was greatly pleased that the script creators were so helpful with that.

To encourage users to upload more banners, I made sure that all sizes were represented with upload links as soon as they logged in and that exchange codes were provided wherever users would instinctively look for them.

While the site is fairly stable, there are still some extra things I want to do to make it even more streamlined. I have new code that will route first-time users directly to a banner upload page as soon as they log in, great for getting new participants to take action and keep moving forward.

The site has been a success and hundreds of banners now fly between the fabulous participants, helping to introduce fans to new comics, blogs, podcasts and more. Rubifruit.com itself is slated for development as pro-girl webcomics host sometime in 2009.

Percolate TV is a startup peddling an out of the box You-Tube-esque solution for small to large businesses. They wanted a retro, diner feel for their site. I was given the coffee cup and televsion set logos to work with and incorporate into the design.

Percolatetv.com

This was my first 50’s style site, and for inspiration I turned to old TV dinner packaging. I mined Dinctype for fonts, heavily. Diane Dipiazza is so very talented and kind for sharing such great fonts. After I finished this piece, I dare say I continued to have a love affair with her fonts until long afterward!