Google Chrome

The Ctrl+K shortcut

Background: Chrome has brilliantly mixed the search bar with the URL bar. Using small, custom keywords, I can quickly point my browser precisely where I need to. For example, if I type “wiki cow,” I’ll soon be reading about domesticated ungulates.

Problem: Let’s say I’m done looking at cows, and want to look up sheep instead. I could press Ctrl+T, open a new tab, then type “wiki sheep.” However, if I don’t want to open a new tab, I need to get a cursor in the URL bar. I could take my hands off the keyboard and click. Chrome, however, has a shortcut: Ctrl+K. Ctrl+K automatically clears the URL bar, and sticks the cursor there so the user can navigate. However, Chrome also sticks a question mark in there.

…WHY?

Ctrl+K is brilliant! I love being able to quickly bounce around the nets without a mouse. Ctrl+K lets me do so… but not without deleting the mysterious question mark that jumps in my way for no apparent reason. Who the hell put that in there in the first place?

The Fix: It’s beyond my reach to modify Chrome code, but I can’t imagine it would be a difficult fix on their end.

Irritation Level: 3 of 5

Extra point for the problem being so obvious and basic.

Related posts:

1. What the Chrome OS could be
2. The Long Stick Startup

Summary:

Many people have complex privacy needs which are poorly met by current social software design. People may want to show one facet of their identity to their boss and another to their friends and yet a third one to their family. Most social software currently asks you to explicitly manage your privacy by manually assigning people into discrete groups but this only poorly models how humans actually negotiate complex identity presentations. Friendbo is an attempt to build a more humane privacy interface by controlling access through the ability to answer personal questions.

For more details on Friendbo, see: http://www.friendbo.com/

No related posts.

It’s a load of bollocks, and one in a stream of “hey, let’s take a widely criticized site, call it awesome, and everyone will praise how witty and insightful we are.” It’s as if everyone thinks they can be hailed as geniuses if they rebel against the norm.

Design is not synonymous with utility, and the Drudge Report fails horribly at both.

Good design? Really?

THIS IS WHAT I SEE WHEN I LOAD THE PAGE .

It’s patently absurd to call this good design. from first load, I don’t even know what the page is.

Sites that are successful yet have bad design aren’t necessarily successful BECAUSE of bad design (therefore making it good?), but IN SPITE of. This is the same reason Fox is #1 in viewership despite their utter lack of journalistic integrity, taste, and quality. Fox isn’t #1 because it’s good news, it’s #1 because right-wingers have nowhere else to go. The Drudge Report isn’t popular because of its piss poor design, it’s popular because right-wingers surf it religiously.

The Drudge Report hasn’t changed the design, ever. This could mean that the first design was perfect. It could also mean that Matt Drudge simply doesn’t care. It doesn’t mean that the users love the design… they could be sticking around because no other site has the content they desire.

Let’s move down this point by point

1. “There are no tricks, no sections, no deep linking, no special technology required. It’s all right there on one page. “But it’s a mess!” you could say. I’d say “it’s straightforward mess.” I wouldn’t underestimate the merit in that.”
2. There ARE sections… if you can suffer to scroll down far enough. Straightforward = good. Mess = bad. Straightforward + mess = good & bad. Straightforward + non-mess = good & good, i.e., better design.
3. It’s unique. Certainly. So is every dump I’ve squeezed out of my anus. There’s a REASON the news sites look alike. They WANT to look alike. When you go to CNN .com, without even seeing content, the users say, “oh, this is a news site.” Is it bad to have a news site look like a news site? Saying it’s unique and therefore good is flawed logic – you and i have discussed this before.
4. It’s important. Drudge isn’t afraid to be noisy. Sure. That’s an appeal of the Drudge Report, and is totally irrelevant to the design. The argument here is for the philosophy of the site, which 37S claims to be good and extraordinary. Fine. Keep the philosophy. Keep a super noisy headline – the site could have top-notch design, and a screaming headline…(get this)… AT THE SAME TIME .
5. It’s cluttered. It’s messy, and there’s no good flow to the information. “Jason” thinks that constitutes… good design? The design doesn’t “encourage wandering,” it just requires effort to plow through. It’s successful because the users feel that the plowing is worth it. Just because it functions now doesn’t mean it couldn’t be improved. I wonder how many people don’t visit the site for specifically that reason.
6. Breaking news. Once again, this is a philosophy of the Drudge Report, and not one of the website design. This could be maintained, regardless of design.
7. One guy can run it. That’s a plus. One guy can also make a myspace page, or a geocities home. That doesn’t make good design, and is more a question of web authoring tools. With tools powerful enough, one guy could nearly run any site on the web. The design could be significantly improved, and still have one guy do it.
8. No news… once again, Drudge philosophy and concept. Not design. The design is the implementation of the concept, and not having direct info isn’t implementation in this case – it IS the concept.
9. Sending people away… see above.
10. It’s fast. That’s definitely a plus. I’ll grant that. However, with a little organization, better fonts, and better layout, the design could be improved without sacrificing speed. It’s cheap. See above. It’s one page. See above.
11. It makes him a great living – A site’s success can be completely irrelevant to design. See above discussion of Fox.
12. All in all, it’s bad design. It may function. It may serve a purpose. However, Drudge’s design limps blindly on like the buffoon in the White House he was so fond of.

Related posts:

1. Getting the design right
2. Visual Design is about more than making things look pretty
3. “Remember me” sucks at remembering me

My mother had to match my clothes when I was a kid, and even then, she was only marginally successful. I would still somehow manage to slip out the door wearing nothing but a bright red T-shirt and oversized Power Rangers boxer shorts. My problem was that I loved so many things, and so many colors, that I wanted to wear all of them, all the time.

I have read of many graphic designers who mix with a color palette before making a brand. I believe the people behind Pierce Transit’s “look” were just the sort of designers. There is no problem with that, but I’m afraid that those who dressed up Tacoma, Washington’s buses did so like a 3rd grader with a low attention span.

Let’s start with the logo itself.

Not altogether horrendous, but it does have a great many problems.

First, the logo is far too busy. With every letter consisting of several lines, this would even appear busy if it were all on a single line. However, this problem is compounded by the fact that the words appear on two lines, with a fraction of normal spacing between them. The front silhouette of the bus, which I’m sure was intended to appear iconic, nearly blends in with the rest. Glance at this logo, and you won’t remember a thing – it’s just a solid block of lines.

If you were to remove the bus, the letters evoke train tracks – a semi-futuristic sans serif font, with bold, parallel lines. It looks like the logo on a child’s train set.

The bus is altogether confusing. At first glance, it looks like another letter on the end of Pierce (an A, perhaps?). In and of itself, it has little to no defining or stylistic characteristics. What syling it does have is inconsistent with the text – completely blocky, lacking all curves. This logo, in its entirety, needs to be scrapped.

Moving on to signage…

If that doesn’t remind you of a fourth grader’s sharpied lunch pail, nothing will. The text on the top portion is a completely different font from the logo (good thing, because if it wasn’t, it would be entirely unreadable), which clashes even more awkwardly with the bus icon. The curves on the top are simple enough, and while it squeezes the text in the middle in a very unsatisfying manner, they are forgivable. At least they are consistent in color.

The sign below that looks like someone ate a care-bear and just couldn’t hold it down. Retro-ish color stripes of not-quite-a-spectrum are at two different orientations, and provide such messy visuals that people will either stare at it for ages to try to figure it out, or dismiss it entirely. Unforgivably, the green, blue, and orange in the spectrum are not nearly consistent with the other color branding.  The “go!” will be remarked upon later.

The silhouettes crowd the image profusely, and don’t provide a consistent message either. Are those two on the bottom right holding basketballs, or pom-poms? Why are the two top corners trying to kick the logo? Is that guy throwing a block in the air? Oh wait, that’s the icon.

Long story short, this poster reminds me of my Power Rangers boxer shorts.

More signage!

This seems more consistent with the rest of the branding, but still makes my eyes ache. Notice “the way to go!” in the bottom right? This is the tagline that PT throws around all over the place. There’s nothing wrong with it in and of itself, other than the near piracy of the ebay! logo. The problem is that it throws off all branding consistency. The tagline notably lacks all capital letters, yet, the sign is filled with them. The tagline is playful, offset, and utilizes different sizes and font families. The sans-serif on the rest of the poster is cold, professional, and understated (read: boring).

The buses themselves…

The buses themselves just may be the worst part of PT’s branding. The buses are busy in all the wrong places, leaving awkward negative space in places that might benefit from being highlighted (the doors, for example). The colors are nearly centered under the adspace, detracting from the ads, and defeating the purposes of both. The text at the top is broken up and distorted by the shape of the bus itself, which leads me to believe that the designer came up with all of this on a very flat piece of paper, and never took the time to apply it to the focal point of his design.

My biggest problems with the bus, however, are the front and back. The back of the bus looks nearly identical to the photo above. This completely destroys the cognitive model of the color.

If you have a bus that is colored halfway up, it will make the most visual sense if that color is at the same level on all sides – it looks like a fish tank halfway full of water, or a block that was dipped in paint.

The color on the PT buses has no cognitive model. The same green dip is at the top on the back and front of the bus. The only that this would make sense is if the below color band was applied to the bus. Imagine looking at the back right corner of the bus. On the back, you see a green dip. Immediately next to it, on the side, is white space until it reaches an arbitrary point in the middle, at which it dips down again. It’s confusing, which muddles up a mental model, which makes the buses unmemorable.

The interior… oh, the interior…

The Pierce Transit designer must have been color blind, or didn’t communicate at all with the person who designed the inside of the buses. Take a look at the upholstery:

There are several different colors in that fabric. It’s not a bad choice… hard to stain, busy enough to fade into a visual background, and not entirely unpleasant.

But… where did those colors come from? Scroll up and look at the bus colors. You see this color scheme on the outside, and then you walk into the bus, and it’s like you’re on a different planet. It’s disrupting, disorientating, and foreign.

Scroll up again and look at the signage. Now we have 3 separate color schemes. 3 entirely different schemes! Within 20 feet of each other at a PT bus stop! I could have only done worse if i picked polka dot knee socks to go with my boxers.

Here, however, is the coup de grace:

Pink lighting?

Pink?

——————————

Walking to my girlfriend’s house after getting off the bus, I remembered seeing similar color patterns before.

Oh, that’s right.

How to do things right

Pick a consistent color scheme. Have a font, or an absolute maximum of two. Use consistent capitalization. Have simple and notable shapes and themes. Hire the guy who designed Sound Transit:

The slight tilt to the text is brilliant – it evokes the notion of speed. I’ve often said that the best logos are those that look good in single shade black & white, which this one does. It is distinct, recognizable, and sleek. Now take a look at their signage:

Two colors, consistent to a color pallette. The colors themselves, and the logo, is reflected on the bus. Simplistic enough to be memorable and invite passersby to look, it’s fantastically designed. Everything about it conveys professionalism, efficiency, and speed – who wouldn’t want a bus service like that? Contrast the sound transit sign with the horrendous PT sign immediately above.

The colors are consistent with all of the branding, signage, and the blue is maintained on all sides of the bus, much like the water in a fish tank. The adspace, while not taken advantage of on this particular bus, is left blank, which allows the advertisement to grab the viewers’ attention. It is immediately recognizable, memorable, and simple. The waves are immediately below the windows, yet above the tires, and at the same height as the front windshield – this designer clearly looked at the shape of the buses before she decided on a design.

</Rant>

Related posts:

1. Creating the Bumblebee Labs logo
2. New Logo
3. Announcing: The Product Design Guild

When it comes to this sort of thing, I usually take the lazy way out. There are so many designers vastly better (both technically and visually) than I am out there, spending all day making kick-ass-fabulous wordpress themes, it would just be a shame to not take advantage of them. I’d almost consider it doing them a favor.

Unfortunately, however, you can never find a wordpress theme that fits exactly what you want. The colors are off, or it has the wrong number of columns, or the columns are not on the right side, or it just doesn’t feel personal enough. Often it’s easy enough to go into the style.css file and muck around with the colors, and it’s pretty easy to add an image here or there in the .php, but doing something like moving a column from one side of the content to the other is deceivingly difficult.

I banged my head relentlessly against the keyboard for several hours trying to do so with the choice theme, but to no avail… if I touched the arrangement of the columns, the beautiful liquid css layout would crash into a waterfall of random links and content, making a top-rate mess all over my firefox. I simply couldn’t get the css to hold together.

Why couldn’t I get the css to hold together?

For the same damned reason that css stands for Computing, Satan Style. For some arbitrary reason (like whether you’re coding on a tuesday, or if your great aunt Blanch coughed on your keyboard recently), divs that are supposed to sit side by side drop mischeviously down, so they’re all piled on top of each other like a sausage link that’s just too tired to go on. There often is no explanation for this, and it can be fixed only immediately after you give up.

So, having given up entirely, I was tossed a link from Hang that seemed to have the answer to all my problems – a fluid, three column layout that could be twisted into whatever form I wish. It was the shining white glove I could wear to fix my layout. Unfortunately, when you dip a glove in the mud, the mud doesn’t get glovey, and the css did what it does best.

Time to start over.

I didn’t set out to write a WordPress theme from scratch, but it seemed to be the best solution to get exactly the look and feel I wanted. I know nothing about PHP, and even less about WordPress specific PHP, but by examining several themes and seeing what the data had in common, I could tell what was necessary for WordPress to function, and how it was used.

It actually wasn’t all that difficult, until I tried combining my homebrewed PHP with the css file I already had.

Here’s where it gets ugly…

It broke. All over the place. Leaving little wordpresslings as it went.

I tried to figure out exactly what went wrong by simplifying the theme in increasing amounts. I had included and overwritten all of the Holy Grail’s CSS into my own theme, but noticed how the CSS had split various bits of the code in two different places – my Firebug looked something like this:

Thinking that it was odd and unnecessay, I combined the two bits into a single bit of code:

body {

background: #FFFFFF none repeat scroll 0% 0%;

margin: 0pt;

padding: 0pt;

min-width: 630px;

}

I’m not sure if it was because of that subtle change or because of a typo somewhere, but it simply would not come out the way I wanted it to. So, I did the only sensible thing I could do, and sold my soul – cleared out all the css, and replaced it wholesale with the Holy Grail code. I’ll have to add my own styling later.

There is a plus side to all of this…

You see, now I have a template. The PHP is now about as simple and easy to understand as I could hope for, and the layout is fully functional and working – just waiting for a skin. I can save my template for a rainy day, when I will be able to pull out a beautifully scripted and styled three column wordpress layout, and modify to whatever suits my fancy.

I suggest, if you run a blog and have at least moderate css/graphic design ability, you download the Bumblebee Labs Thievery Theme.

Included, you will find nothing more than a functional, happy WordPress blog stolen shamelessly from the Holy Grail of Three Column layouts itself. I hope it saves many a headache.

Related posts:

1. Universal undo
2. Oct 15th (Day 3) Pixar: a company with soul
3. A better way of serving ads

In this case, it was a napkin on Hang’s kitchen table.

Identity Portrayal:

When I go about designing a logo, the first thing that I think about is the message and the meaning behind the logo. I like to be flexible and allow the logo to grow organically, which can alter the meaning (sometimes entirely), but it’s helpful to at least begin with something I am trying to say.

The first image that jumped into my mind was that of the bee itself. I wanted an image that would be forever associated with Bumblebee Labs, such as a cute little bee simple enough to have good scalability (like the Cingular man), or a bee abstract enough to be memorable (the USPS Eagle). However, Hang hated the idea of anything remotely cute, and in every suggestion he made, seemed to favor and enjoy more literal branding than abstract.

Cooperating with the client may be the hardest part of graphic design. There are a number of reasons why. I think that in any kind of creation, we create things that we find personally appealing. Some things, especially in the applied arts, only please very finite crowds and are abhorrent to the rest of us. The problem is that we can’t distinguish between when we are on the side of the masses, or in the niche, and assume we speak for everyone else when we voice our opinions. Those of us who are dedicated to graphic design are generally better than the average joe because we devote so much time to analyzing what works and what doesn’t, and are constantly struggling to appeal to the proper audience, regardless of our personal preferences. This isn’t to say graphic designers are always right… I’ll be the first to admit that I inject my personal tastes into my design, as much as I try not to.

Pleasing the client is important, though, and though I try my best to not sell my soul, I still like to get paid. I generally attempt suggestions put forth to me, and see if I can find a way to twist it to my own liking. In this case, I’m quite happy with the end result.

Hang didn’t want the focus of the logo to be on the bee, but on the flight of it, as he felt that it was more in tune with the company philosophy. Therefore, a straight line representing the flight of the bee would probably be insufficient.

Textual Arrangement

My foundation for logo design is always the text. The following were my observations:

Bumblebee Labs

• Shape: the logo has a tall letter (not sure what the official terminology is for that) nearly every other letter. This could be taken advantage of to create a unique and interesting design. Nearly every letter also features circular shapes.
• Length: the length of the text was the ultimate determining factor in the final look. It is relatively lengthy title, and thus, may need to be condensed in order to be more easily translated into a number of different uses.
• Number of words: Two words, of incredibly different length. This makes it difficult to condense the length of the logo by placing the words on separate lines, as it generally looks weighted and unbalanced. As they are, the words already feel unbalanced, and a satisfying logo would have to rectify that.
• Word meanings: “Labs,” much like “inc,” “llc,” “corp,” “co,” “designs,” “studios,” and others, is something that you’ll gloss over when you read it. It is a word that is altogether necessary in the title, but is nearly without identity in and of itself. It adds very little character, but acts like a punctuation mark – I call them cognitive suffixes.  If it is themed the same way as the identity phrase of the logo (Bumblebee), it will not be cognitively pleasing. This is generally resolved by either maximizing or minimizing the cognitive suffix, to either compensate for its lack of identity, or to relegate it to a more fitting form.

Given these observations, several things became immediately clear. The length needed to be condensed, and because the words were of such differing lengths, the most satisfying solution appeared to be to remove the space between the two. Immediately, the logo felt more balanced, leaving me more room in determining colors, shapes, and other factors. Because the corporate identity of Bumblebee Labs was just as much invested in the identity phrase and cognitive suffix, I determined that “Labs” would have to be emphasized in some way.

Typeface(s)

After determining the overall shape of the text that is most conducive to the identity, I attempt to select an appropriate typeface. Sometimes, upon examining the shapes and feels of various typefaces, it becomes apparent that the shape of the text ought to be refined, but this was not the case this time.

My primary goals at this stage were to find a font that accurately represented the identity behind Bumblebee Labs, and to find a way to emphasize the cognitive suffix.

Selecting the font for “Bumblebee” may have been the most difficult part of the creation of the logo. The company identity was built around the flight of the bumblebee, not the appearance of the bumblebee, and thus, the graphic portion of the logo was to be focused around the flight path. At first, with the majority of the letters circular, it appeared to be a good idea to have the flight path integrated as part of the text, using a script font.

However, this proved to be problematic in several ways. It displaced the cognitive suffix, pushing it further to the side, or forcing it onto a second line. It also placed further emphasis on the identity phrase, making it much more difficult to put an appropriate amount of emphasis on “Labs.” In order to compensate for the noisy integration of the flight path, “Labs” would have to be written in big block sans-serif lettering. This resulted in a logo design that was altogether busy and inelegant. At this point, I decided that it was best to integrate the flight path graphically, to both maintain the proper balance between the lettering, and to keep the logo clean.

Having a vague notion that the graphic portion of the logo would entail a curvy flight path and a rounded bee, I began sorting through fonts with blocky, sharper features. It was at this point I stumbled upon the “Discognate” font, and enjoying the fusion of the sci-fi edge with the rounded inner corners, rendered the logo in it immediately. It turned out to be precisely the typeface I was looking for.

I still needed to determine how to differentiate the two words in the logo, but it seemed that the best way to do so was with color, and I had yet to determine the color scheme.

Color Scheme

Theming the logo and brand was perhaps the easiest part of the design. The bumblebee itself is comprised of various oranges and yellows, and offset with thick black stripes. It was only logical to put the logo in black, white, and some sort of orange or yellow. However, orange and yellow are fairly difficult to display clearly upon a white background, so I opted to invert the design, putting “Bumblebee” in white, and highlighting “Labs” in a golden yellow for emphasis. The emphasis was only complete with a small stroke around “Labs.”

Graphic(s)

It was somewhat of a challenge to represent the bee in a way that was accurate to the identity. Though the bumblebee is often portrayed as a cutesy animal, this would put too much emphasis upon the bee, and distract from the flight pattern. I sketched out a simple oval bee in Illustrator with two thick black stripes, and used that to test out various flight patterns.

The flight pattern was to be the highlight of the piece, and therefore the largest in relative size. There is great natural beauty in the logarithmic spiral, and I determined that it would be a good way to depict a flight pattern. I also liked the message in the idea of a spiral; it seemed that the bee was rising out of obscurity, and increasing in velocity as it did so.

I quickly mocked up two preliminary designs integrating the spiral into the text. The first had a largely circular spiral, located above and outside the text. I rather liked the look, but at Hang’s suggestion, saw that it was disjointed. Knowing that it would be difficult to make a clean and elegant logo with the spiral in the middle ground (behind the text), I opted for a small spiral that ended in an underlining trajectory.

Having a preliminary design complete, I then focused on the design of the bee. Using a gradient mesh to create custom lighting and shadow, I made the bee appear to be rounded. This was largely an aesthetic move, as the bee in its prior state was amateurish and plain. This is not to say that plain designs are bad designs, as simpler designs are often better than complex ones. In this particular case, as the design is supposed to represent a complex real-world object, it needs to be as simple as possible, but still complex enough to communicate effectively.

Desiring to emphasize the progression of the bee, I decided to go with a fading gradient into the background, with a white highlight on the bee. This posed some unique problems, which will be discussed below, but was in the end quite a rewarding effect. Noticing the high stark contrast between the white middleground and the black background, I opted for a glowing effect on the outside of the streak. I strongly believe in organic design; logos will often only have a couple of natural solutions to visual problems, and will suggest them to you if you are willing to stand back and analyze them periodically.

Problems

The problems in this logo were largely technical, and due to my ignorance of the tools. The first problem was that of the bee itself: upon printing, I noticed several black artifacts all around the orange edges of the bee (always print your logo!). I had created the bee as three layers: the top comprised the highlight/shadow, the middle was comprised of orange stripes, and the bottom was a black oval. Even thought the orange stripes appeared to completely cover the black, the edges came out in print. I knew that, at this point, I could no longer cheat my way around it; I needed to learn the tools which manage the combination of paths in Illustrator. After a couple of brief primers and tutorials, I was back on track, and made a cleaner version of the bee that was completely free of artifacts.

The second issue was that of the color progression on the spiral. I wanted a gradient that would follow the path I selected, but could not find a way to do so short of rasterizing the image and painting it manually. I posted my problem in a couple of design forums, and in a few short hours, found a viable solution. If I mapped an art brush with a gradient to the path, the gradient would follow the path precisely.

Related posts:

1. What is Bumblebee Labs?
2. New Logo
3. Pierce Transit: What Not to Wear

It wasn’t until my father asked me to build him a website that we started working well together. I was reluctant at first, but for $50, his website became my summer lemonade stand. The resulting product was crude, bitter in places and overly sweetened in others, but for an adolescent foray, it was just as cool.

Now adults, we’ve learned to work together in ways that were previously inconceivable, and excited as hell to be carving a path into this brave new world of computing as a social medium. This is the wild west of the information age, and I’m itching to lay down some tracks.

No related posts.