Designer must Mimick April 23rd, 2008

Posted by Allan Branch

There are so many amazing designers out there it always surprises me when a client says they like our designs the best and they want to work with us. I also wonder how many sites they've visited, because surely they haven't seen many if they like ours the best.

I love seeing a site that the design surprises me. A design from a concept that I couldn't dream up in my wildest creative spirit. Color combinations that are beyond me, certain design treatments and great UIs. When I see these sites I am envious of the designer's skills. I think a good designer must keep a running catalog of great works in their mind. I heard somewhere that "copying one person is called stealing, copying many people is called research".

A designer's job is to mimic what the target market wants to see. I've designed sites for women, children and the elderly. Its your job to get into their mind and show them what they need to see/feel and do to accomplish the goal of the site. Actors become their character and a designer must think like their target market. So we're like actors right? I'm like a chubby Brad Pitt I guess, the Troy/Fight Club Brad Pitt.

I keep a running catalog of my design thoughts on flickr, here's the link.

WeAllHateQuickbooks.com April 22nd, 2008

Posted by Allan Branch

Here's a screencast of the css trickery from our newest app WeAllHateQuickbooks.com
Link to Screencast

The app scans Twitter.com for the word "Quickbooks" and displays the tweet.

SUBVERSION FOR DESIGNERS April 14th, 2008

Posted by Allan Branch

A great article by Chris Nagele, owner of Beanstalkapp.com, titled "Designers using Subversion"
Link to ThinkVitamin Article by Chris

Dromaeo.com, some CSS magic April 14th, 2008

Posted by Allan Branch

I had to toot my own horn and announce a design I am very proud of.

John Resig, creator of JQuery, needed a bit of design help with a new Mozilla project. He's created a JavaScript performance test suite, which I threw a design on. Big thanks to John for giving me such creative freedom. For the little dinos, clouds and comets, I used css absolute positioning with px and % locations and of course z-index layering. The video below shows the effect, it also works in IE6.



Link to Dromaeo.com
Posted by Allan Branch

I get bored.
I've started a Flickr "blog" on design. I'm mainly doing it for myself as a journal but if you want to join/follow me you are more than invited. See my thoughts on design even my own bad design choices.

Link to the Flickr Design Blog "iSpyPurdyDesigns"
Posted by Allan Branch


I received an email asking to use our "svn up bitches" shirt graphic in a comic strip.

Check it out. Link to the Comic Strip
Posted by Allan Branch

IE6 PNG Transparency Fix for Repeating Background Images

****Update: its not actually repeating, its scaling the image which give the appearance of repeating vertically.

This hack is for making transparent pngs, actually transparent in IE6 when used as a repeating background. I'm sure most people have a hack they use for transparent png images in the html for IE6. This isn't another fix for that, again, this is for background images that repeat.

First, put a conditional statement in your head to display this hack when IE6 is used. Inside of this conditional statement you will insert the hack.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent_bg.png', sizingMethod='scale');

Now, I haven't experimented much with this, with certain images, in certain situations this can give the appearance of a repeating background.

In your normal css sheet it's business as normal, just place the background in the css and have a nice day. Below is an example of the conditional statement and the css hack.


here are some screen captures, notice the "rocks" in the background behind the black background.
Firefox Capture
IE6 Capture

<!--[if IE 6]>
<style>
#IE_blows {
height: 100%; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent_bg.png', sizingMethod='scale');}
</style>
<![endif]-->

/* put in normal css sheet */
#IE_blows { 
  background: url(/images/transparent_bg.png) repeat-y;
}
/* put in normal css sheet */

****Update: its not actually repeating, its scaling the image which give the appearance of repeating vertically.
Posted by Allan Branch

IE6 PNG Transparency Fix for Repeating Background Images

This hack is for making transparent pngs, actually transparent in IE6 when used as a repeating background. I'm sure most people have a hack they use for transparent png images in the html for IE6. This isn't another fix for that, again, this is for background images that repeat.

First, put a conditional statement in your head to display this hack when IE6 is used. Inside of this conditional statement you will insert the hack.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent_bg.png', sizingMethod='scale');

Now, I haven't experimented much with this. I haven't tried X and Y repeating, if you do try this, post the results as a comment on this blog post. However it does work great with standard repeating of a background image.

In your normal css sheet it's business as normal, just place the background in the css and have a nice day. Below is an example of the conditional statement and the css hack.

<!--[if IE 6]>
<style>
#IE_blows {
height: 100%; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent_bg.png', sizingMethod='scale');}
</style>
<![endif]-->

/* put in normal css sheet */
#IE_blows { 
  background: url(/images/transparent_bg.png) repeat-y;
}
/* put in normal css sheet */

I'm so flattered... March 4th, 2008

Posted by Allan Branch
Once and a while I get an IM or email from someone saying that they found another company copying one of our designs. Normally the similarities are small; this time, however, it's a little different.

My design


Their design


PrayerRequester.com
They even took my html/css!

Nature's Gradient March 3rd, 2008

Posted by Allan Branch
Recently we were at FOWA (Future of Web Apps), we were walking to hear a speaker when something caught my eye. It took me a second to realize it was the setting sun was making the lettering look like they faded out at the bottom. I took out my iphone and snapped a quick pic. This effect is a simple thing, but I've never noticed anything like it. Maybe the architect or designer did it on purpose or maybe it's an awesome accident. Either way, I thought I would share it.

This is beautiful... February 22nd, 2008

Posted by Allan Branch
This is a beautiful, simple, elegant website design.
No Limit Studios Website Link

I love their designs/style but their name "No Limit" isn't really reflective of the internet. Web design IS about limits...living within and embracing them. Back to topic, it's a beautiful design, excellent colors, spacing and alignments. Enjoy!

Chasing Rabbits February 21st, 2008

Posted by Steven Bristol

There are a lot of people who are really good programmers who never reach that “top .1%,” or whatever, level. Of late I have been thinking of one of the things that sets the best programmers apart: Discernment. I’m not talking about discerning a good technology from a bad one, but rather the ability to discern a good choice from a bad one. To be able to see the consequences of this path versus that one. In short, to know which rabbits to chase.

When writing software we face a million billion choices every day. Having the talent to make good choices is crucial to being productive. It’s the reason we can launch a product in seven hours.

Here is an example: Recently, one of my guys was refactoring some bad controller code we inherited. He was very excited to show me how he had abstracted and cleaned some of the bad controller code into a library so all of the controllers could call these methods instead of duplicating this bad code all over the place. At first glance it was clear to me that this abstraction was the beginnings of a new library that would be almost identical to Make Resourceful. Once I showed him where his path was leading he agreed that this was probably not the right time to write a Make Resourceful clone, especially when what was really called for was just making the bad code proper, not writing a support structure for it. This reminds me of what Malcom Gladwell was talking about in Blink: The ability to know instantly. (Perhaps to know truth instantly.)

I’m not talking about syntax here. Obie Fernandez and I have fairly different coding styles. He prefers to have the code be more explicit and readable while I prefer my code to be more terse and succinct. Neither is right or wrong, and neither is the reason we are both able to look at a problem and immediately prune it to its core and see clearly where the different paths take us.

This isn’t just true of code, I have seen Allan do the same thing with design. We were working with a designer who was very headstrong and really thought Allan was lacking in something (I’ll save the “why were you working with someone like that” story for another time). This person was doing the html/css for a website and using some popular grid-css-template-thing (I believe that is the technical term for it). When Allan first looked at the code, he just started ripping parts out, not because it was bad in and of itself, but because it was clear that was way too complicated. Using this framework did not buy the simplicity and maintainability of what has come to be known as “The Allan Way™.” (It is amazing to watch Allan take a 7000 line css file and without changing the way the site looks, trim the file to 300 lines.) The other designer made a fuss until Allan was done. Once he saw the difference, he was converted to “The Allan Way™.”

It’s easy to say, “that is just a product of experience.” And although experience certainly plays a part, I think it goes way beyond that. I think this discernment might also be called wisdom. Wisdom basically boils down to how well can you predict the future. When one approaches the wise old sage, the sage immediately knows the outcome of all the paths presented.

So how does one get this discernment/wisdom? I am not sure. I do believe one can learn it, and I think one of the requirements is to know that that is what one is trying to learn. When you play chess, do you only think about your strategy, or do you constantly think “why did my opponent make that move?” Acquiring wisdom might require applying that mental discipline to every part of life: Why did my wife/boss/client/adversary say that? Was it planned or just careless? How does my action affect others? And not just in dealing with others: If I do this, what will I do next? And then what? What paths am I forcing myself into later, if I make this choice now? How deep is this rabbit hole?

Maybe this is the difference between success and mediocrity, between satisfaction and melancholy. Or maybe not.

SVN UP BITCHES! February 17th, 2008

Posted by Allan Branch
If you didn't attend Act_as_Conference you probably missed the "world famous" Less Shirts. Here are some pics of the shirts in action.

Derek Neighbors


Desi and Big Tiger


Act_as_Conf Swag

Designers: Blog Suggestion February 6th, 2008

Posted by Allan Branch


If you're a designer, here's a blog you should add to your rss reader. Here's another great article from the 47Media Guys.

47Media Blog

Make it easy, not shitty January 29th, 2008

Posted by Allan Branch
Photoshelter.com is a stock photo site that advertises on various design blogs I visit. I had to click on their banner because they advertise "The Coolest Stock You've Never Seen". I entered the site, but first I had to register to see the pictures (noted as strike 1). Yeah the images are interesting, but how much are they? No pricing anywhere. I selected an image, it showed a photo details page. I had to select another link to find the pricing (this is already starting to suck). There I was met by a wall of drop downs that I had to select before seeing a price.

*Select Continent
*Select a Country
*Media (Electronic, Print and about 20 other options)
*Media Type (Web Catalog, Web site, Banner Ad and about 20 other options)
*Media Type Class (1/2 Screen, Full Screen, and about 40 other options)
*Duration of Usage (1 week, 1 month, 3 months and about 10 other options)

Good Lord, that took 2 minutes...I'm I suppose to repeat this step for every image?

STRIKE 2!!!!

Price $1081 -- STRIKE 3!!!

Goodbye PhotoShelter