Archive for ‘design’ category

Re-Brand New

For the first time ever, SimpleBits has a logo! Roughly six years ago, I took a stab at creating an isometric set of three boxes (cardboard, to be specific). It was really an icon — and one that sat in the header alongside my personal site at the time, the now-defunct cederholm.org. Over the years, it’s always been there, and I’ve probably overdone it in terms of branding: I put the boxes everywhere. It became the brand. But it was always awkward, and highly inflexible. It worked terrible in print, where at small sizes, the pixelated blocks looked more like botched clip art.

Several months ago, I finally started on a new logo design — something I’d been meaning to do for years. It went rather quickly, playing with four curly brackets set in Avenir that created a frame around a hand-drawn cube (vector this time!). I finally had something I didn’t hate the next day. I’m excited to have a mark that’ll be flexible going forward, and it was crucial for me to create one that could be any size, or color (even looking intact using a single color).

(fig). old and new logos
I owe Greg Storey (Airbag Industries) thanks for suggesting Whitney for the logo’s type, after I realized that the previously-utilized Triplex just wasn’t working.

It was the logo refresh that forced me to rework the site design as well. I’m not one to change things for the sake of changing things, but the new logo was a good excuse to update the templates as well. And what you see now is the result of several weeks of tinkering.

Much of the structure and layout of the site remain the same. Nothing earth-shattering here. This time around, I’m trying out an elastic (Elastic Design) em-based layout. If you’re unfamiliar, try resizing the text in your browser to see what happens. For this particular site, I think it works well. If I had the need/desire/requirement for an additional column, then I would’ve explored other fluid or variable fixed-width (clagnut: Variable fixed width layout) options. But for this simple, two-column set-up, I thought it’d be interesting to try something with ems.

I’m hoping the revised logo will help swing the rest of the company forward. I have a lot of ideas and things in mind for the future, and this is merely step #1. Here goes nothing. But first, new business cards need ordering.

Workshopp’d (and a break)

I’ll start off by mentioning that the Carsons (Gillian and Ryan) are two of the nicest people you’ll meet in the business. I’m grateful to them for setting up Thursday’s “workshop”:http://www.carsonworkshops.com/design-dev/cederholm/02NOV2006.html at Boston’s Museum of Science.
I think it went well, and I’ve received some good, positive feedback. As with anything, I’ll now be focusing on the parts that I thought could’ve been presented better — but all-in-all I had a _great_ time, managed to still have a voice after talking for eight hours, and those that attended (suprisingly many from outside of New England) brought along great questions. It’s clear that the majority of people attending conferences and workshops are gaining more and more knowledge about CSS, standards, semantic markup, etc. So much so, that I wonder what the heck I should speak about in the future. Hrm.
So thanks to all who came out to the workshop, and again to the “Carsons”:http://carsonworkshops.com/ (they have this stuff down to a science). It capped off the busiest few months I’ve had in years, and in two days we’ll board a plane for Florida to visit family for a week. A much needed unplugging.
While I’m away, “Rael Dornfest and company”:http://valuesofn.com/ will be presenting “Stikkit”:http://stikkit.com/ on the “Launch Pad”:http://web2con.com/pub/w/49/launchpad.html at the “Web 2.0 conference”:http://web2con.com/. Stikkits are “little yellow notes that think”, and I’ve been helping with the design. Keep an eye out for it!

New Chameleon Icon Sets

It’s been almost exactly one year since releasing Chameleon, a customizable stock icon set for the web. It’s been really successful, and later spawned additional ideas for color changing goods. Then life happened, and most of those ideas fell by the wayside.

iconsI’m happy to announce today, at least a small portion of those grand ideas in the form of two new Chameleon icon pack styles:

Chameleon Graphite
A reversed version of the original, the graphite style has a shiny silver container for the tiny shapes that change color inside.
Chameleon Mini
Just the tiny shapes without the container. I’d been meaning to get this set finished since releasing the original and just never got around to it. These miniature icons are especially great for embellishing links inline.

Just like the original style, each of these new sets is available in a “Ready-Made” pack of six pre-selected colors ($35 USD), or as a single set using the hex color of your choosing ($25 USD). Hope you dig ‘em.

Educated

CDIA Boston UniversityThere’s a myth that colleges and universities are teaching antiquated web design skills: table-and -spacer-gif-ness, FrontPage 98, etc. Actually, I don’t think it’s a myth — it’s actually happening out there. So after touring Boston University’s Center for Digital Imaging Arts yesterday, I was completely surprised. CDIA offers an interactive design program with an emphasis on CSS, web standards and hand-coding — and it’s right in my own backyard.

Jeremy Osborn, the program’s Director, mentioned that, while BU offers the resources and infastructure of a large university, CDIA is largely independent and run much like a startup — adapting and changing the curriculum as the techniques and methods out in the real world do. I found this approach pretty fascinating, and it’ll be interesting to see how their program evolves along with the web itself.

I’m hopeful there are other programs out there in other states and countries that are offering modern skills for budding designers of the web. Leave a comment if you know of any.

Also, if you’re in (or planning to be in) the Boston area, have an interest in teaching web design, and have the skills to guide the next generation of standardistas, contact _jeremy [at] cdiabu dot com_. They’re expanding fast.

New SimpleBits Tees

t-shirtA fresh batch of t-shirts has just arrived from the printer. This time around, the design has been tweaked and screen-printed on “Asphalt” American Apparel shirts (the most comfortable, fitted shirt available) by the fine folks at Acme Prints. We’ve been using Acme for the Cork’d t-shirts, and they do such a fine job that I decided to make the switch here at SimpleBits. Acme has low prices, free shipping and no set-up charges — and their customer service is excellent.

The Official SimpleBits T-Shirt is just $16 USD plus shipping. We believe you will enjoy it immensely.

One Hundred

Maybe it was the antique car show we drove by this past weekend, but something got me thinking: what would I be working on _100 years ago_? In other words, today I design web sites and other related web things for a living. In 1906, I doubt I’d be doing the same (and if I was I’d be insane).

One hundred years ago, radio was in it’s infancy, so there’s an obvious parallel there: a new, exciting technology that increases communication. But really what we’re doing is _creating_ stuff, and I’m not sure I’d be building radios or telegraph equipment. I’m not smart enough for that.

Typesetting? That could be closer than radio, but typesetting was far from being something _new_ in 1906. So maybe it’d be something less obvious, like a “Wheelwright” or a “Confectioner” or even a “Newsagent” — actual professional titles for the early 20th century. And don’t they sound cool?

Regardless, it’s interesting to look back and draw similarities, especially if you do the same looking _forward_. Will anyone be designing web sites in another 100 years? Will I be doing this in 10 or 20? Who knows.

Stuck

I’m looking to the collective knowledge of my esteemed readers for some advice. Where might one go for high-quality, reasonably-priced, screen-printed stickers? You know, if say, one wanted to promote a web site or two out in the non-virtual world. Any tips would be much appreciated.

London(e)

About an hour into the flight to London from Boston, I spilled a full glass of cranberry juice in my lap. There are several reasons why this was unpleasant, and they all include the words “embarrassed”, “sticky” and “no, I didn’t just pee my pants”.

I’ve now returned from @media on Father’s Day. It was a great trip despite the soggy flight out, and it’s really good to be back home with the family.

Many thanks to Patrick for inviting me to speak. I think it went just fine, and I especially enjoyed the questions at the end of the talk. We watched England win the World Cup match the previous night, so I knew there’d at least be smiling faces in the audience. For those that attended the session, I’ve posted the presentation slides (20MB PDF). Warning: they won’t be of much use without the commentary.

It’s always fun meeting new faces for the first time at these conferences, and @media was no exception. It’s the genuine friendliness of the people in this community that never seems to wear out. Fun times are a given. Wish I had the time/energy to list them all here, but it’s late. I also wish I had taken more photos, but what I did take are now up on Flickr.

*Update:* I forgot to mention, I successfully spent the torn note at a hotel pub after the @media party. Either my taping job was superb, or it was dark enough to go unnoticeable. Whew.

Pairing Wine and Microformats

While working on Cork’d, I realized this was a perfectly fine excuse to implement some microformats. What goes great with a nice 2003 Pinot Noir? Meaningful markup, naturally.

We’re currently using three microformats on Cork’d:

  • hCard (for member profiles)
  • hReview (for wine reviews or “tasting notes”)
  • rel-tag (for indicating tag links)

Our implementations aren’t perfect, but it’s a start. The rest of this article will talk about how we implemented hReview for member-entered tasting notes (example) and specifically how I used CSS to style the markup.


(more…)

Introducing Cork’d

I like wine. I’ve even touted it’s ability to act as a design enhancer. The problem with wine (for me, and for many) is knowing what’s good. There are infinite choices out there. It’s overwhelming. Oftentimes, I lean on the suggestions from friends — people that probably know more about wine than I do.

When I finally find a wine that I like, it’s always impossible to remember it for the next trip to the store. Some people keep a journal, writing down what they thought about the wine in a notebook. But wouldn’t it be great if you could do this online? And wouldn’t it be also great if we could share those lists with our friends through a simple, free interface? And while we’re at it, wouldn’t it be the bomb.com if this same interface allowed you to review the wine, tag it, and set up lists for wines that you want to buy or that you own in your cellar?

Cork'dIntroducing Cork’d. A brand-spanking new site devoted to reviewing and sharing wine created by Dan Benjamin and myself. We’ve been working on this for quite some time. Just the two of us. Call us the Bartles & Jaymes of the wine web world (wait, no, don’t do that).

What is Cork’d?

Cork'd screenshotThe basic gist of Cork’d is this: after painlessly creating a free account, you’re able to keep track of wines you’ve tried in your Wine Jounal. You can rate, review and tag wines (more on that below), and these “tasting notes” end up attatched as comments to each wine in our database. You can also build a Shopping List of wines you’d like to buy (think of this like you would a Netflix queue), and a Wine Cellar for wines that you own. Keeping track of what your friends are tasting is as easy as adding them as a Drinking Buddy. You can also recommend wines to your buddies after you’ve rated and reviewed a bottle.

We have a partnership set up through wine.com, where a selection of their bottles have seeded the Cork’d database with about 1200 wines (which will grow as members add their own bottles), each with a link to buy that wine right away. But we can also see other cross-promotional opportunities by getting involved in the meat-space wine community. There are endless ideas flowing about connecting with wineries and vineyards, other wine blogs and podcasts. We’re really looking forward to watching it all grow.

Tasting Tags

The idea of tagging a wine may sound absurd — but when we started to realize the benefits, it became a must-have. We call them tasting tags, and by applying keywords like “oak, pepper, vanilla, berry” to a wine, we’re then making it easy to find similar wines based on those flavors. If you like oaky wines, for instance, then it should be easy to find them.

Why and How

What’s funny about Cork’d when looking at it for the first time, is that it’s pulling in many of the current technologies that have been brewing out there, and applies them to… wine. And why not? This is something Dan B. and I built quite simply because we wanted to use it. We’d been trading favorite bottles, realizing there would be an incredible benefit to keep track of things through a web interface, building a community around it, and making it easy to subscribe to buddies and wine lists. It had to be.

It’ll also be interesting to continue to talk about what we learned by building a web application with a team of 2. Working with Dan B. is a natural fit, as our areas of expertise overlap only slightly (design/ui/development), and where they do overlap actually made things run all the smoother. I was continually amazed by the way Dan approached building the app in Ruby on Rails, the speed, the structure, the way he thinks about a problem for a while, then takes all of about 3 minutes to write the working code — he’s a developer who designs in code. And I’m sure he’ll have much to write about regarding the process, including his already-published thoughts on the launch over at Hivelogic (far more thorough than mine).

This was a giant learning experience for me in terms of dipping my toes in Rails, becoming more familiar with Subversion (more on this later), and in using these tools as a collaborative and iterative way of building a web application. It’s a gratifying way for a designer to work on a large project, chipping away at things in real time, using real data — it’s a bit like sculpting. An evolution.

Go Forth and Uncork

I’m excited to share much more about the site over the coming weeks and months, and we’ll be rolling out some additional features and tweaks. But until then, if you dig wine (or want to start digging wine), then head on over and, um … uncorkCork’d.