Archive for ‘design’ category

Beautiful Accidents

It must be 12 years ago now. I was living in Allston “Rock City”, playing guitar in a shoe-gazing instrumental indie rock trio. My G string broke. No, not that G string (not that kind of band). Out of extra strings, I managed to find a D string lying on the rehearsal room floor. I strung it on and kept playing. See, a D string is wound steel, and thicker than a G string, which is a single strand. But winding it tighter and tighter, I was able to tune it back up to a G.

From that day on, I exclusively played with two D strings (one tuned to G) instead of a normal set of guitar strings. It changed the way I played, changed the sound and timbre of my setup. It became a part of the DNA that made up whatever it was we were creating.

It’s been happening throughout history, of course. Beautiful accidents. Unintentional intentions. We can’t plan these mistakes, but wish we could. What seems like disaster, turns into the spark that ignites what we perceive later as “rightly so”.

And it happens all the time when I’m designing. Oops, I dumped a white paint can where color used to be. Wait. That’s nice. It’s become a part of my process. A part I can’t anticipate, or account for, but a part nonetheless.

I’ve been thinking about ways to facilitate these accidents. Make them happen more often. I haven’t come up with anything yet. Too much coffee, not enough coffee, time of day, etc.—are they really accidents, or our subconscious guiding the way?

Until I figure out, I’ll keep adapting, accepting and discovering.

Charge Tee

Charge TeeIt’s been awhile since we designed a t-shirt, and today we’re happy to announce the fresh-off-the-presses and just-in-time-for-the-holidays Charge Tee: a simple black battery icon screen-printed on an athletic grey Tri-Blend shirt from American Apparel. The Tri-Blend is the softest, most comfortable shirt I’ve owned. And you’ll love it too. Wear it to the gym, coffeeshop, pub—or wherever you recharge.
The shirts (like previous designs) were printed by Acme Prints in Arizona, and will be hand-packed by myself, Meagan, or anyone else we can coax into helping.

New at the Iconshoppe: Square Dance

Last month, we launched Disco, and today we’re happy to announce the second installment of the Ballroom Family of stock web icons over at the IconShoppe. It’s called Square Dance, and it’s a simple little set of rounded-square icons that come in 7 colors, 3 sizes and 2 formats (GIF and PNG). And just like Disco, it’s also reasonably priced at just thirty-nine bucks.

Square Dance icons sample

I’ve been meaning to put more time into stocking the shelves of the ‘Shoppe for a while now, and Meagan has been handling the meticulous color/format production of these new sets, with more to come.

Tokyo Express

I returned from Tokyo on Monday. I gave a talk at the Web Directions East conference. I’ve never had a simultaneous translation of a presentation before. I hope it went OK. I’ll be forever grateful to John Allsopp, Satoshi Kukichi and the rest of the WDE team for inviting me to speak, being incredibly gracious hosts and generally being awesome people. I’ll never get tired of traveling to faraway places, where (without fail) the quality of people in this industry inspire, impress and humble me. I feel lucky.

I don’t think I’ll travel that distance again without the rest of my family.
I’ll never forget walking through customs after spending the entire Election Day in the air. CNN was on in the airport lobby. ‘Barrack Obama Elected President of the United States’ it said. Twenty seconds later, John McCain started his concession speech. Relief after 14 hours of nail-biting anticipation.

I took a lot of photos. I tried packing as much into a few days as possible. I was amazed by the giganticness of the city. I caught a view of the cityscape at night, at the top of the hotel where Lost in Translation was filmed. They wanted a $20 cover charge, so we left.

I loved that every train station in Tokyo has it’s own unique short little melody (hear them all). I love how this aids accessibility with audio. I’m thinking we need more unique audible melodies for events that happen on the web or desktop. I was also impressed with the grooved sidewalk path found throughout the entire city, which would direct a blind person from station to station, uninterrupted.
I probably didn’t bow enough.

I sang Don’t Stop Believing in a karaoke bar in Shinjuku along with friends old and new. I’ve never sang karaoke before. I had the best doughnut I’ve had in my life in Harajuku, at Tamagotchi Donuts. I was amazed by the depth of the character culture in Japan. It permeates everything and everyone — not just for kids, but a part of general communication throughout the city.

I tried the eel (unagi) and ‘chicken knuckles’, but was less adventurous with the raw horsemeat. I loved the simplicity of the food in Japan. I have a new favorite snack in ‘onigiri‘, a triangle of sushi rice, seaweed, and (in my case) teriyaki-soaked seaweed inside. I’ll have to hunt for those here at home.

I learned two Japanese phrases. I should’ve learned more.

A Few Days with the New MBP

I just bought a new MacBook Pro. I like it. I was stunned at how bright the LED screen is. Then I realized it was only at half brightness. I don’t mind the lack of a button under the trackpad. I pretend there’s still a button under the trackpad. I rest my thumb where the button used to be. I’m OK with that, and it works for me.

I’m impressed with the precision of the casing. I picture dudes in white lab coats with metal instruments in their hands when I look at the tiny micro speaker holes. I don’t remember picturing dudes in white lab coats before (OK maybe with the 1st gen iPhone). I’m surprised that it’s not all that much thinner or lighter than the previous model though.

I like that, when lifting up the lid, the entire machine doesn’t lift off the desk or try and skate away. I like that there’s no latch, but miss an audible click that confirms it’s fully closed. I like that all the inputs are on one side now. I don’t like that it’s the opposite side that I’ve configured my desk for.

I love the glass screen. I’ll still need to plug into a non-glossy screen for any real color work. I’ve been OK with that. I think the speakers are louder than the previous model. I doubt my hearing has improved over the last few days, but if it has, then the speaker volume remains the same as the previous model. I’d be OK with that.

I was shocked how small the box it comes in is. I’m happy that Apple is considering packaging waste now. This reduced packaging lowers the “unboxing excitement” by approximately 4%. I’m OK with that.

I like this new MacBook Pro.

Bean Baggage

So, the friendly folks at Sumo offered us a free beanbag chair, in exchange for a review. This isn’t normally a practice I’d take part in, but heck, we needed a beanbag chair (and who doesn’t?). As it turns out, Sumo has been sending chairs to other interweb friends and colleagues as well, and this makes us feel slightly less shameful to be blogging about free products. Now onto the review.

We received the Omni chair, which is really a giant pillow that can be manipulated into various seating configurations. We liked this because the office is tight on space, and multi-purpose seating options are welcomed. The covering of the chair is a bit like a nylon windbreaker—not exactly cozy, but yet easy to clean and a step up from the shiny, uncomfortable beanbag coverings of childhood memory.

My 2.75 year-old, Jack, gave it a thorough toddler test: spreading it out flat on the floor, then repeatedly “cannonballing” into it. It was a big hit, and it (and he) held up nicely. Again, the vinyl covering is key for clean-up if you have kids around.

The Omni is a nice addition to the BitCave, and we thank Sumo for sending it. But beware, if you order the Midnight Blue version, they’ve been known to swallow people whole. Just FYI.

Use the Best Available Ampersand

I love ampersands. And interest in this quirky character seems to be on the rise as of late. Case in point: Just last week, I purchased not one, but two t-shirts adorned with nothing more than an ampersand. That’s telling, no?

For much of last year, I had a little portion of a presentation dedicated to using CSS to serve up alternate, compelling ampersands. It’s also something I’ve done here on SimpleBits for quite awhile in our tagline. The simple little concept comes from one of Robert Bringhurst’s guidelines in his seminal typographic bible, The Elements of Typographic Style.

Guideline 5.1.3 offers this little tidbit regarding ampersands:

In heads and titles, use the best available ampersand.

Bringhurst explains that frequently the italic version of an ampersand is more decorative and interesting than its roman counterpart, and goes on to suggest:

Since the ampersand is more often used in display work than in ordinary text, the more creative versions are often the more useful. There is rarely any reason not to borrow the italic ampersand for use with roman text.

So why not apply this to the web? We can use CSS to cleverly specify a list of our favorite ampersands, with the reader getting the best one available. We’ll first apply a class wrapped around the ampersand we’d like to beautify like so:

<span class="amp">&amp;</span>

And we’ll build a list of cool italic ampersands that readers might have installed by default, while also specifying the italic version:

span.amp {
  font-family: Baskerville, Palatino, "Book Antiqua", serif;
  font-style: italic;
  }

We can weight our list, putting our favorites near the front, understanding that the reader may get one or none, depending on which operating system they’re on, and if they have the font installed.

Thanks to the excellent efforts of our newly-hired help, here are some charts showing some of the more interesting italic ampersands available as default fonts on Mac and Windows. These’ll help get you started building your own awesompersand list.

These charts are by no means comprehensive, but were created from the default lists from each operating system. Pre-bundled or third-party applications may install other cool fonts that could be common enough to use as well. If you have a favorite that’s not listed, let us know in the comments.

Mac OS X (10.5)

OSX ampersands

Windows XP

Windows XP ampersands

Windows Vista

Vista added several new fonts, all beginning with the letter ‘C’. What’s nice is that Constantia nicely matches Palatino on the Mac and Palatino Linotype on Windows XP.

Windows Vista ampersands

For more Bringhurst-to-CSS goodness, see Richard Rutter‘s The Elements of Typographic Style Applied to the Web project. And be sure to grab Meagan’s wallpapers to ampersandify your desktop.

Tipping Point

photo

At one of my favorite local coffee shops, I’ve noticed they have a creative take on generating tips. I’m sure this is used elsewhere as well, but it’s the first time I’ve come across it.

There are two baskets by the register, with a rotating sign above that asks a question. Today it was: “Should Obama pick Hillary as Vice President?” Throw your tip in the appropriate basket, and we get an instant, visible poll as a byproduct of giving your barista a little extra change. Some questions generate a more noticeable swing in basket preference (sorry, Hillary), while others are just fun throwaways.

A small reward for participation. I’m sure there’s a parallel here with social web interaction, but I’ll let Josh or someone else who’s hot on this topic decipher it.

Marked Up & Styled

We held the third gathering of the Markup & Style Society last night (a local Boston-area meetup for web geeks that Ethan Marcotte and I started a while back). This one was different and contained more awesomeness, for a variety of reasons.

The kind folks at Filament Group hosted the event at their downtown Boston studio. The incredibly generous Freshview donated 18 pizzas, beer and wine for all 50 attendees. Freshview are makers of Campaign Monitor, the popular email newsletter campaign app, as well as creators of useful tools and resources for newsletter designers. Thank you thank you, Freshview.

Adobe donated two copies of CS3 Web Premium that we raffled off along with a few books at the end of the night. So we knew at least two people would go home happy no matter what happened.

Markup and Style SocietyWhile previous meetups have all been about beer and socializing, we may have surprised people with four short talks. A free, mini conference if you will. Ethan gave a brilliant presentation on some tricks he’s enabled in his freakishly bulletproof, fluid layout (Ethan’s write-up). I rambled on about “Gridlasticness”: taking an em-based approach to a strict grid. Josh Porter talked about craftsmanship as it relates to the web — a topic near and dear to my heart. It was sprinkled with “right on” moments and quotes like this, regarding the Shaker design philosophy:

Don’t make something unless it is both necessary and useful, but if it is both necessary and useful, don’t hesitate to make it beautiful.

Scott Jehl closed the show with an excellent talk on how progressive enhancement plays a big role in the projects he tackles at Filament Group. Read more about Filament’s process over at their newly launched lab (Filament’s Maggie Costello Wachs’ write-up).

All in all, ’twas a great night, and it made up for seeing just one single panel at SXSW just days earlier. We’ll have to do it again soon. Blatently tooting our own horn here, Patrick Haney dug it, evidenced by his tweet:

Really felt like I got more out of the four short talks tonight at M&SS than I did at a week of SXSW

Thanks to the speakers, sponsors and especially Filament for the venue. We’ve also been planning on adding more formal workshops or full day conference-style events to the mix in the future. New England needs more of this, methinks. Stay tuned.

Update: Jenny Bergman has posted some wonderful photos of the event. Thanks, Jenny!

80 Percenter

Last week, I gave my More “Wow”, Please talk at Web Design World Boston. During the talk I mentioned a fantastic book: Let My People Go Surfing by Yvon Chouinard. Yvon founded the expensive-but-awesome clothing company, Patagonia. I’ve long been a fan of Patagonia’s stuff, and their dedication as a company to environmental causes (they co-founded One Percent For The Planet, of which SimpleBits is a member) , and so when Josh Porter recommended the book a while back, I ordered immediately.

book coverThe book covers the history of the company, Yvon’s philosophy on design, and being a reluctant business owner. It’s a great read, with a lot of insightful head-nodding.

One part stood out in particular, when Chouinard talks about how he sees himself as an “80 percenter”:

I’ve always thought of myself as an 80 percenter. I like to throw myself passionately into a sport or activity until I reach 80 percent proficiency level. To go beyond that requires an obsession and degree of specialization that doesn’t appeal to me.

I didn’t know it before reading that quote, but I think I’m an 80 percenter as well. For people that love to create things, whether it be a website or a t-shirt or even a beer coaster (ahem) — the web seems to tie all these things together quite nicely. And it’s reaching 80% proficiency (but not 100%) that I think makes it possible to handle all of that at one time.

Ever try talking to (or working with) someone who is 100% obsessed with a single task? The danger is that they’ll get bogged down in details. Every detail. Whereas an 80 percenter might eventually learn to know which details to focus on. And determining which details are important can be just as useful as knowing them all.

At least that’s my interpretation. Regardless, I recommend the book highly.