Archive for ‘design’ category

Introducing Foamee

I think I’ve just created something that will change the web as we know it. But I’ll write about that another day. Instead, I’m going to talk about a fun new thing I launched last night. Actually, it’s a couple of things.

I owe you a beer.

I say this quite a bit. For friends, family, people that deserve a pat on the back. I also often forget to make good on the promise. Wouldn’t it be cool if there was a way to keep track? And then also keep track of who owed you?

FoameeSo, I decided to build Foamee (hey, there were plenty of abandoned ‘e’s lying around). It’ll keep track of who you owe beers to and vice versa. But don’t worry, this is NASN (not another socical network). Like you, I’m tired of creating another login, another set of friends/contacts, another avatar and more tears. So instead, Foamee piggy-backs on an existing one. As I was tossing ideas around, I realized a lot of the functionality: short messages directed at another person, web/IM/mobile messaging, etc. already existed elsewhere — so why not make things simpler and utilize the indispensable Twitter as a primary interface for the app?

Using Twitter’s API, Foamee will harvest replies and direct messages to create a barnacle-esque utility (props to Josh Porter for coining that) on the already-popular messaging service. If you’re already on Twitter, using Fomee is as easy as following ioubeer, then using specific syntax to announce an I.O.U. Beer to the world. We’ll repost these virtual pats-on-the-back, and also create a people page for anyone that sends a beer. Your people page will show who you owe, and who owes you. The sender or receiver also has the option of “redeeming” an I.O.U. via a direct message to Foamee, completing the deal.

I realize this is a silly (but potentially useful) service. And I’m excited to see where it leads, if anywhere. What it does now is incredibly simple (and there’s a reason for that, partially explained below). It’s also a shameless brand vehicle. How so, you ask?

Foamee Goods

coaster detailRight out of the gate, there are two cool things to buy at the Foamee Store (because two weeks from now, when you’ve long forgotten about this little site, it’d be too late). T-shirts (of course) and I.O.U. Beer Coasters: a pack of six pulpboard coasters shipped in a drawstring cotton bag with a Foamee-branded Mini Sharpie. The coasters have a spot to write your name, perfect for handing out tactile I.O.U.s in person to deserving recipients. They work great in the mail as well. And they are awesome.

Special technical geek notes

Building this little app became a personal challenge. Could I handle the backend as well as the design? Could someone who primarily spends their time worrying about interface solutions roll up their sleeves and create a fully-functional product? And so the process of investigating APIs, databases and frameworks began. It reminded me of the old days, learning HTML (and later CSS) for the first time. Late night experimentation, utter frustration and then those “little victories” that make it all worth it.

Foamee runs on PHP, using the CakePHP framework, which turned out quite well. Cake uses the same model/view/controller setup found in Rails and other frameworks, has a good community and is dead simple to install and move around. I owe Jonathan Snook a beer for blogging about Cake (surely where I heard about it first). My code is likely terrible and other smart folks could probably bang out the same functionality in an afternoon, blindfolded and behind-the-back. But it works, and my familiarity with PHP coupled with my experience with Rails while working with the imitable Dan Benjamin on Cork’d and other projects (I owe him several beers as well) made baking with Cake tolerable for a noob like me.

Foamee is hosted by the fine folks at Media Temple, and I owe them a beer (or twelve) for that.

The motivator here was fun. Fun to build, fun to create for, and (hopefully) fun to use. I’m hoping fun continues to motivate around here — for Foamee and for whatever else cures the constant desire to create. Special thanks to Biz Stone at Twitter for helping tap the keg last night.

DingBit

I’m pleased to announce a new product shipping today over at the IconShoppe. Chameleon16 is a new pixel font for Mac and Windows, hand-crafted using only the finest pixels available. It’s based on the Chameleon Original icons that we’ve been hocking over here to support our growing latte addiction.
Chameleon16 sampleInitially, I’d thought to just convert the GIF images to a bitmap font so that the customer could change the color and add effects at will. The minimalist nature of the icons begs of it, and having the 16×16 icons in font format would sure be handy. But while I was at it, why not create new _alphanumeric_ characters to go along with it, and create a real font in the same style?
As the name suggests, Chameleon16 is designed to be used at 16px. And like its pixel font predecessors, it also works at multiples of that base (32px, 48px, 64px, etc.) for retro, extra blocky goodness.
Chameleon sampleSince each character is a 16×16 tile, it admittedly has limited use for setting large chunks of text. You’re not going to use this font to display client invoices or proposals. But interesting things can happen when you start playing with kerning and line height, and I’m excited to see some interesting applications where it could be used creatively.
The TrueType font includes standard alphanumeric characters as well as the entire Chameleon Original icon set as alternate characters and costs just $39 bucks. As a special promotion, the first three orders also get a free copy of Bulletproof Web Design, Second Edition that hit store shelves last month First three orders received!.
h4. Special technical geek notes
The process of creating the font was a learning experience, and I would compare it (at times) to removing stubborn wallpaper. I first created the characters in Photoshop, then used a program called BitFonter to turn those into a bitmap font, assigning each character, adjusting metrics, etc.
Over the course of the last six months or so I began chipping away it, navigating the spotty documentation, and teaching myself the wonders of font metrics, character encoding and more. In the end, I needed to create additional outlines of the bitmap characters and export these into TypeTool which could then generate a proper TrueType file (after having problems letting BitFonter do this). If I knew what I was doing this wouldn’t have taken long.
I avoided using something like Fontographer (also by FontLab) because I was creating a bitmap font and BitFonter’s pixel editor seemed a natural choice — and for creating and editing _pixel_ fonts, it’s great (or at least slightly more intuitive). It’s the output and documentation that was confusing, and my respect for _real_ type designers has grown tenfold after this little project.
So, my advice for those looking to create their own pixel fonts: learn Fontographer, or remember that you’ll need TypeTool in order to generate a TrueType file from BitFonter’s outlines.

Bulletproof Web Design, Second Edition

On bookstore shelves today (I hope) is something I’ve been toiling over for the past few months. Bulletproof Web Design, Second Edition is a refresh of the book I wrote for New Riders in 2005. I’ve been humbled by the response of the first edition, and have enjoyed talking about the principles described in the book at conferences and workshops over the last few years. So it was only fitting to give this little blue book a tune-up under the hood.

Book coverThis isn’t a giant update nor a new book entirely. Rather, it brings the examples in line with Internet Explorer 7 (which wasn’t released when the first ed. was published) and adds several more examples based on ems (which were sorely lacking from the original book). There are of course errata fixes and nips and tucks throughout as well, and about 30 additional pages were added in total. All in all, I’m happy to have the book be all the more solid and relevant.

On the surface, writing a second edition of a book seems like an easy little project. One that won’t be too much work, won’t take long, and can easily fit in between other activities. But it’s not like that. It’s like writing another book all over again (even though it’s not another book and a large portion of the text is the same).

I find the actual writing of a book the easiest of all stages. It’s the editing, the back-and-forth, the endless checking and double-checking of Word docs (Word!) and then PDF files. Reading comments, checking comments, adding your own comments. “Should this be bold or code font?”. All of this is necessary of course. But my goodness it’s just as time consuming as the first go-around.

But like anything that takes time and effort in life, you quickly forget the pain and maybe even someday agree to do it all over again.

While today is the official publication date, Amazon is still taking pre-orders only. I’ve yet to see an actual copy myself, so there could very well be a slight delay.

New Chunky Icons T-Shirt

t-shirtJust in time for Spring, the all-new Chunky Icons Tee is available, selling fast, and shipping immediately! This is a limited-editon run that includes a numbered, signed letterpressed card and free stickers. The shirt is printed by the fabulous folks at Acme Prints on “Army” American Apparel (of course). You will love it.

On the front are five icons lined up in a row (from the Chameleon Chunky stock icon set over at our IconShoppe). Your task is to come up with what they mean. Best answer added as a comment here wins a *free shirt* (comment before April 7, 2007 to enter). On the back yoke is a small SimpleBits logo mark. Just because.

More detailed views of the shirt are available in this Flickr photo set.

An Event Apart Boston

Don’t wait for An Event Apart to come to your city — just make plans to catch the next one wherever it is (Seattle is next). AEA Boston was probably the first two-day, single-track conference where I felt like _every_ session was extremely valuable. I came away from each presentation either inspired or educated (or both). The easy, 20 mile commute to Boston didn’t hurt either, and having Kerry and Jack see me speak for the first time was fantastic (at one point up on stage, I could hear “Dada!” from the back, and I’ll tell you … that calms the nerves).

Interface Design Juggling slidesI had fun talking about “Interface Design Juggling” — a potpourri of color, typography, favicons (yes, favicons!), microformats and bulletproofness. This was the first run through of this particular set of ideas, but I think it went pretty smoothly. I was relieved to hear several people thank me for devoting time to favicons — a fun topic that I think deserves more attention. And I’m looking forward to expanding that segment in the future.

The latest updated versions of the slide deck can be found here (in PDF form) for those that were in attendance. As usual, they might not make sense without the commentary — and more importantly some of the transitions are muddled into a single slide (Keynote kept crashing when I tried to export each transition into its own slide).

Thank you to Jeffrey and Eric for inviting me to speak — it was quite an honor to share the bill with such an amazing group.

IconShoppe Grand Opening

Without fail, I get more done when the work is _piled_ on. When stress is at a max and there are a million to-do items. But this was long overdue, and something I’ve been meaning to set up for a while for reasons I’ll go into in a minute. So, before I pack for Austin, I’m happy to have finished this off enough to flip the switch.

IconShoppeToday, IconShoppe opens it’s doors. I’ve finally spun off the stock web icons I’ve been selling here at SimpleBits into their own, proper digs. It’ll motivate me (hopefully) to put more time into *more icon sets* and some *other ideas* I’ve had brewing for a while. This “setting up shoppe” was the first necessary step.

That said, they’re the same simple little web icons I’ve been selling here for the last few years. But they now have a better framework in which to grow and a more easily maintainable system behind them (WordPress, customized).

Stay tuned for more, and grab the RSS feed to be alerted of new stuff happening over at the ‘Shoppe. I can’t say it’ll be updated _often_, but this is just a start, my friends.

AIGA Redesign

This morning, AIGA (the professional association for design) relaunched with a shiny new design by Happy Cog. I had the pleasure of taking Jason Santa Maria‘s brilliant designs and turning them into semantic XHTML and CSS templates that could be plugged into a custom CMS built by Thirdwave (AIGA’s technical partner). Magic and fun ensued.

Every project is a learning experience. But working with Jeffrey and Jason for a client like AIGA, well that’s a whole new level of awesomeness. One could (and should) study Jason’s molecule-level of detail in typography (using just two web fonts and a splash of Interstate via the venerable sIFR). It was a fun challenge getting things _right_ using CSS. I hope I’ve come close.
Congrats to AIGA for renewing their digs with a smart, readable, beautiful design — and a big thank you to Jeffrey, Jason and Happy Cog for allowing me to pitch in and help with this.

Read more about the redesign:
* Jeffrey Zeldman: Happy Cog redesigns AIGA
* Jason Santa Maria: AIGA Redesign
* Happy Cog: AIGA Website Redesign

And a special geek note: events listed on AIGA’s homepage are marked up with hCalendar.

New Icons: Chameleon Chunky and SuperPack

chameleon sampleWhile I was putting together an hCard example for next week’s Web Directions North presentation a while back, I whipped up a few icons that were Chameleon in spirit — but doubly thick. And so, *Chameleon Chunky* was born: the newest addition to the color-changing family of stock icon sets.

The extra-thickness of this style was a bit more challenging for some shapes, but the ability to add single pixel details makes for good contrast when using just one color. Like all the Chameleon sets, these are royalty-free stock icons that are customizable to fit your site’s color palette. Just punch in a hex color, hit a button and we’ll magically generate a custom-colored set for you immediately. Ah, the wonders of technology, and all for $25 USD.
If you’re feeling lazy or indecisive, a Ready-Made Pack is also available that includes 6 pre-selected colors for $35 USD.

Chameleon SuperPack

In addition to the new Chunky style, I’ve also put together a *SuperPack* of all four Ready-Made Packs in one convenient (and low-priced) bundle. For just $85 USD, you’ll get _all four styles_ in 6 different colors — _1,680_ icons in all. That’s a lot of pixels folks.

Hope you dig ‘em!

Pressed

business card close-upWith a new logo, comes new business cards. I’d used Dependable Letterpress for a previous run of cards and was really pleased with the quality, service, etc. Today, the new cards arrived, and I’m just as happy with the results. Highly recommend them, but be warned that it’s not a quick and cheap option.

Nothing beats seeing the art and type stamped into thick card stock, with visible embossing from the weight of the plates (more evidence of letterpressing awesomeness here). It’s also reassuring to see the flexibility of the new vector-based logo in action. Smooooove.

Microformats for Designers

In a little less than two months, I’ll be heading to Vancouver to speak about “microformats for designers” at Web Directions North. It’ll be a fun topic, and I’m starting to put together the material. I’m looking forward to talking about microformats from a designer’s perspective, including a little bit about the logo development, the implementations over at Cork’d (and the unexpected cool things that came out of that), as well as applying CSS to microformats.

But I’m also looking for help. What are some interesting things happening with microformats and design? Know of any great examples, visual experiments, etc.? Here are a few to get started:

I know there’s a lot happening out there, so let’s hear about it. And thanks!