This is a really nice interaction design walkthrough of a simple app called Scorekeeper. No crazy background textures or anything, just a clear, easy to use UI.

37Signals have long been proponents of doing design prototyping in HTML, and this video is a great example of how that is more effective than a traditional photoshop method. Their lead designer, Ryan Singer, has shown this technique off nicely at various conferences and also captured it in two videos for Peepcode: UX Sketching and UX/UI Prototype

This isn’t an easy process to implement, and working in HTML/CSS as your initial mockup takes a bit of mental gymnastics and abstraction to get it right, but it can be a powerful tool if done correctly.

2011: The year is almost over and looking back, it’s been a pretty good awesome year. I married a wonderful woman in August, moved to LivingSocial in March (via the Infoether acquisition), and moved from The Farm at Oatlands Mill to Alexandria. A lot of work went into The Rails View book for Pragmatic Programmers and I finished a few freelance client sites for EFM, Market Street Advisors, and Guggenheim Securities.

But 2012? I’ve resolved that 2012 will be the year of shipping stuff. There’s far too much stuff sitting around on my hard drive that’s in a partially finished state and it needs to be delivered or abandoned entirely. And to that end:

The 2012 SHIP IT List

• Relaunch Boboroshi.com
• Relaunch Meticulous.com, including new MeticulousTalent.com
• Ship “The Rails View” book including TheRailsView.com site
• Redesign WeLoveDC responsively
• Setup a new ongoing site for JohnandWhitney.com
• Finish the Eden Soundtrack
• Finish the Rotoscope record
• Ship the Juniper Lane “Standing on the White Line” record (with remixes)
• Finish at least a Boboroshi & Kynz EP
• Ship FlickrFndr, a Flickr/Creative Commons utility
• Ship the first version of an iOS gardening app

And a few other projects I’ve got on a list on my wall. In addition, I’ve got a lot of training to do on various topics. This may seem agressive and optimistic, but if you shoot for the moon, you at least get into orbit.

This article on LivingSocial’s customer base got me thinking about how positioning your brand when you start a company can affect how you end up growing and the user types you attract.

While I do work at LivingSocial and I do like to slog Groupon, I think this article points out a curious result of branding between the two companies. Groupon is all about the deal. The best cost is the lowest cost. Limited time availability! Share it with your friends to make sure it “tips”! LivingSocial has positioned itself more as a higher-end brand, with mixing in its escapes packages, etc. Just look at the design of the sites as well. Groupon is all green and color heavy. LivingSocial is image heavy. And I think that the brand the companies have put forth have attracted a certain demographic:

Nielsen’s survey data, gathered from 200,000 Internet users, shows that people who use LivingSocial are 49 percent more likely than the average American online to make at least $150,000 a year, compared to 30 percent of Groupon users. LivingSocial customers are also younger (51 percent of them are between 35 and 64, while 57 percent of Groupon’s customers fall in that range), and they’re better educated (46 percent of its users had attended or graduated college or received other degrees, compared with Groupon at 39 percent).

While LivingSocial is number 2 in the daily deals space, I think that they’re set up for a much better run. They can do higher end deals, and therefore gross more revenue. There’s a lot of co-brands to a higher end demographic that simply don’t work on a carnival barker approach.

It reminds me of Apple’s positioning after they started pushing the iPod and other consumer electronics. When you mix this with LivingSocial’s fanatical customer support, especially evident on Twitter, it starts to point to a more successful run.

My employer, InfoEther, is as of today part of LivingSocial. The whole dev team will be joining their dev team to double the rock and roll. The full press release has all the details.

The World Wildlife Fund has started a new campaign to save files as WWF, a file format that is effectively a PDF with printing disabled. While their intent is noble and there are serious issues with deforestation and water pollution from paper mills, is this really an effective solution, or is this just another process that will make people feel good while actually accomplishing nothing?

There are valid cases for printing PDF files:

1. When sending a PDF instead of mailing a document, there is no wasted paper on packaging, there is no expended fuel in delivery¹, and the group sending the document does not need to maintain large quantities of the file already printed (as most print orders are done in multiples of 500 or 1000)
2. The file will need to be used where there is not readily available power and/or it would be difficult to use
3. Someone is creating documentation for working offline.

Now, if I send you the document as a PDF, you have the choice to print or not to print. Granted, some people print regardless, but disallowing a user to print? For me this begs the question, why don’t we just encourage people to not print out PDFs?

There has to be some monetary cost to printing at a company. Can we offer incentives to users who print less instead of creating a file format that requires more software to be installed and users to be educated, etc.?

Is this the right solution to the problem of executives gone wild with the print menu item?

¹ Okay, yes, there is some micro-expenditure of fuel to generate the electrons required to send the PDF and operate the computer, but nowhere near the amount used in traditional mail.

I wrote a post about the new Ward 8 Library design for WeLoveDC. The thing is a cross between a McDonalds Playplace and a sophmore architecture school project gone horribly wrong. You can see how much I love most modern architects (Predock, Calatrava and FLW being notable examples)

The Mount Vernon Ladies’ Association has released 120 hues from the Mt. Vernon estate of George Washington that were realized during the last decade of interiors renovations on the property. So for those of you who like to keep period in your colonials (as opposed to the monstrosities of custom home builders in Northern Virginia), you now can have it like George would.

Dignified.

The new MacRuby website is alive and kicking with a new look and feel (courtesy of me) and a nice Webby-based backend (courtesy of Rich Kilmer).

Webby is a Ruby framework that allows the user to work with model files to build a static site. We have a lot of helper methods and ERB that ends up dumped out as HTML when we run the deploy command. It’s similar to WordPress in that way, and it is a phenomenal tool for building static sites that feel dynamic. While it does support things such as HAML and SASS, we relied on good old Textile to get the job done.

The site is run without a database. It uses structs and helper methods to generate everything. For example, if Rich wanted to add someone to the “Project Team” list, he would simply update the Ruby array of people objects and the helpers loop through and make it all nice and styled. There was more info presented on this page initially, being the name, URL, focus and company affiliation, but it was simplified down for some of the presenters. The Special Thanks are handled in the same way.

We’ve been very happy to see some of the recent press about MacRuby as well. If you haven’t seen it, please check out:

Upcoming MacRuby Implementation to be Substantially Faster (at ArsTechnica)

Having grown up with pica sheets and crop slides with wax pencils, I come from a world of print design effectively dead with the advent of QuarkXPress, Pagemaker and InDesign. I still remember learning the rule types in high school yearbook design sessions and in some cases, I’ve recently implemented what’s known as a Harvard Rule line in a design.

What is a Harvard Rule? The old yearbook publisher I worked with defines it nicely:

A standard rule line is any printed line that is less than two picas wide. These rule lines can also add variety to your page. Common rule line weights are one, two, three, six, nine and twelve points. Rule lines are intended to unite design elements, not separate them. A Harvard rule line is two parallel lines, with one line wider than the other. Standard widths are one, three, six, nine and 12 points. When used as a border, the thin line is usually inside.

First off let’s get these terms right. A pica is 12 points. There are 72 points in a printed inch. (Sorry Windows users, someone back in the day thought 96px to an inch was better than 72. Apple is 72px/inch.) There are, therefore, 6 picas in an inch.

I didn’t want to use an image to do this, and wanted to accomplish it with html and css. Luckily, there’s an HTML element called “HR” that is a horizontal rule. These, in their basic implementation, are plain and simple ugly:

but some CSS can make it pretty:

That’s not nice to use. So with some HTML and CSS hackery, we can get something that looks a lot nicer. In your HTML, you first want to call the rule:

<pre> <hr size="0" noshade /> </pre>

Since it’s XHTML we’re using here, this is a self-closing element. The CSS for this isn’t too complex. We need to define the base colors to hide the original element. We then need to apply borders to finish the magic. You can alter the margins to space it out from other elements.

<pre> hr { /* Faking a Harvard Rule */ color: #fff; background-color: #fff; height: 2px; /* this is teh white space between the lines */ border: 0; /* this removes left and right borders */ border-top: 4px solid #aaa; border-bottom: 1px solid #aaa; } </pre>

With that in place, we can give these unique styles and flip the lines as needed.

You can also accomplish a double rule this way:

These are all being used in the forthcoming MacRuby redesign.

Enjoy!

For those of you who don’t know, I started working at InfoEther last fall as their UI/UX/Design guy. One of the floating projects I had been tasked with was the redesign of the InfoEther company site. In light of getting me back into Ruby on Rails, they also decided that I should be the one to code it.

The site is done and up and will probably expand as we have time and new things happen. Now it’s off to work on wireframes for our new product.

You can see the site at infoether.com.

For those of you who didn’t know, I have a Masters in Architecture. I strayed from the path when I worked at RTKL as a 3d animator and designer right after college. I’ve done things here and there, but mainly still focused on the 3d rendering side of things [ Meticulous Portfolio ].

My high school civics teacher contacted me to ask if I would be willing to work with her son, Robert Eccleston, as an “architect” on a design for the Virginia Public Safety Memorial. I was ecstatic to be able to work on something like this again and, over the Christmas holiday, met with Robert in Williamsburg and dove in on the project. He had the maquettes started and we finished the plaza plan that day. From there we got the maquettes scanned into 3d models and I built the rest of the plaza in Maya. Render forth and this is what we had.

We submitted this yesterday and will find out in 3 months if we make the next round. Fingers crossed!

!{border:1px solid black;}http://boboroshi.com/assets/2009/2/17/vapublicsafety_persp.jpg (PErspective of the design)!

!{border:1px solid black;}http://boboroshi.com/assets/2009/2/17/vapublicsafety_top.jpg (Plan view of the design)!

I designed a mockup for Waldo earlier in 2008 and today it launches on Richmond Sunlight. Erik Kastner did the HTML/CSS sexiness for it.

For those of you not familiar with the Sunlight projects, they are sites dedicated to increased transparency in the legislative process. This particular site focuses on the Virginia General Assembly. For more information you can read about the Sunlight Foundataion.

Check it out live: Richmond Sunlight

The website for RubyConf has gone live. I did the design for my friends at InfoEther. I’ll be down in Florida for the event (baring unforeseen circumstances) but will not be talking. I’m not the Ruby programmer you may think me to be. I make pretty pictures for Ruby programmers. And dabble a bit when i have time with archaeopteryx and MaxMSP.

Hello, friends. We’re your usability consultants.

Is your web app tired? Run down? Listless? Does it poop out at diggings? Is it unpopular on del.icio.us?

The answer to all of your problems is in this little bottle consulting package. Hyphenated People Prix Fixe. Yes, Hyphenated People Prix Fixe contains vitamins, meat, vegetables, and minerals and 150% of your daily dosage of usability expertise.

Yes, with Hyphenated People Prix Fixe you can buy your way to web application health. All you do is take a big dose after every meal once. It’s so tasty, too. Tastes just like candy. So why don’t you join the thousands of happy peppy people and order your Hyphenated People Prix Fixe today. That’s Hyphenated People Prix Fixe.

Hyphenated People Prix Fixe

Over at Hyphenated People, we’ve been spending the summer cooking up something new: a fixed-price deal. Fun and challenging for us, and affordable for you.

For a flat rate, you can choose either:

• The Inspector. In which we explore and analyze your entire application¹ and deliver to you a fancy report including a written analysis (including callouts and sketches) and suggestions for improvement. Topics considered include application structure, flow, individual screens’ usability and layout, insights about targeted users, and aesthetics (aka “the pretty”).
• The Drive-By Design. In which we explore your application, and thence, with that knowledge, take any single, full page of your choosing and redesign it from the ground up to be more effective. In this case we deliver to you a fully-realized design, original design source files (PSDs) and a written explanation of our recommendations for that page and its situation in the entire application.

Either package is ideal for smaller companies and startups, and anyone who is having a difficult time loosening the purse strings for hiring usability consultants for a long-term project.

There’s no further obligation. Our reports and advice are yours. We will happily make ourselves available for further assistance (availability permitting), but you can implement our suggestions any way you want, and with whomever you want.

That Price, Which is Fixed

The price for either package is just $3,500 USD. If you’d like further details, drop us a line at yo@hyphenateme.com with your preferred method of contact and we’ll give you a prompt return call or email.

Write us now. You know you want to.

Nota bene: We’re only budgeting the time for a few of these projects this summer. It’d be a clever marketing tactic to make that up and then urge you to contact us now if not sooner, but it’s actually true. This is something we’ll be doing in addition to our normal, larger jobs. We will of course deliver our very best (as we always do), but this is an experiment for us from a business standpoint.

¹ This assumes a fairly typically sized application: similar to or bigger than Basecamp, smaller than Salesforce.