This was also an opportunity for my design partner, James Hobbs, and I to collaborate on our first project together. We both began by closely studying the art style of Thomas Campbell, the Art Director at Galaxia Records. We both quickly grew to love his work, and wanted to do our best at preserving it throughout the site.

View the website »

P.S. Watch for more updates as James and I take on more projects under our new name, Octopus Creative.

Around May of this year, she asked me to help her elevate the design of her blog to the next level. Over the span of a few months we went back-and-forth to really push the boundaries and break the mold of how a traditional blog should look.

As we built out the new design together, we decided early on to center the design around the food photography. It worked so well visually, that we began to think of it as a browsing mechanism for many of the pages. And it continues to make me hungry every time I visit her site; so I guess you could say it’s serving its purpose rather well.

On top of all this, I was able to convince her to make a huge leap from her limited and clunky TypePad account to WordPress. This proved to be somewhat of a daunting task though, as she had been with TypePad since 2000, and had written nearly 1000 blog posts already! This project in particular has made me somewhat of an expert at transitioning a blog from TypePad to WordPress.

I could talk for hours about some of the subtle design elements that get me so excited, but I’d rather have you dig in and discover them for yourself. Hope you’re hungry!

Visit the website »

A lot of these notes should be common knowledge, but since a lot of websites still break these rules on a regular basis, I figured I’d share them with the rest of the world:

• The biggest leap in our ability to interact with people was the advent of speech. We vibrate the air to transmit ideas between brains. But in order to communicate with speech you had to be in the same space and time as someone else, representational art allowed us to cross that barrier. Iconography (as representational art) has a wider reach than language (because of different languages) but it is more prone to misinterpretation.
• Once you use language, you can inject personality and more precise information. As human beings we anthropomorphize many things including objects. You can add personality to objects which changes how people interact with them.
• Software programs can appear sentient through their use of conversational tone. On the Web, however, we tend to use the same personality over and over again (your best friend!) instead of genuine people personality. Like paranoid or concerned, etc.
• On the Web, hypertext is not limited by scale like it is in choose your own adventure books.
• When we talk about interactivity on the Web -we are talking about links and forms. We often forget how powerful the link is. The main interaction you get from a link is clicking on it to go to some other resource. But you also have the ability to add interactivity through hover/mouseover actions. But mouseovers that hide important functionality should be avoided. Where you use hover, make sure you use focus as well. This is important for people that navigate with a keyboard.
• We used to use Javascript for mouseovers but now we use CSS. This is a pattern that has happened a lot. We’ve moved from things that were procedural (Javascript) to declarative (CSS). This has also happened with media queries. Procedural is harder to implement than declarative. If a pattern is popular enough, it needs to move to declarative.
• In the real world, forms are rarely used for pleasure. So why do we adopt the same interface on the Web? People loved the “mad libs” style form on Huffduffer. It added some personality and removed the feeling of doing your taxes. Think about making your forms different –how can you give them some personality?
• Form validation and UI elements: we are moving from procedural to declarative languages. Moving from Javascript to HTML5. Have a whole bunch of new input types to validate inputs and display UI widgets. This moves these behavioral interactions to the browser.
• Progressive disclosure: something is hidden by default and on click something is revealed. This is a common procedural pattern that is likely going to become declarative at some point.
• Javascript is like electricity for the Web but you need safe defaults for when the power goes out. People still need to get things done.
• As soon as Ajax gets thrown in Javascript safe defaults are usually missing. It’s on or off. If you want to build an Ajax website, build a non-Ajax Website first. Go back to links and forms. Then use Javascript to hijack the links and forms. Then Ajax can be used to communicate with the server without refreshing the whole page.
• The hard part about Ajax is not communicating with the server it is the design decisions. Up until now the browser has given people feedback that something is happening. With Ajax, the browser doesn’t do this. Now you need to provide the user with instant feedback.
• We can learn and be inspired by other mediums but we should not copy from other mediums. It’s about inspiration not emulation.
• The web is not bringing us to something new, but bringing us back to the beginning. We can now interact at a distance and over time. That’s the difference. Just like representational art did for language.
• Allowing people to interact is the important part. Not the technology.

From Luke W’s notes from a speech given by Jeremy Keith

Dirty Jobs’ Mike Rowe on the subject of work.

This has also been a great project for me to dust of my Rails chops. Luckily, I had worked on about 6 or 7 projects in Ruby on Rails prior to this one; so it was actually pretty easy to get used to again.

The new, default interface is lacking a lot of contrast — the same contrast that the previous interface did really nicely. It is also still lacking some basic features like, allowing WordPress users to upload a profile picture, without any need for a third-party plugin.

But for those if you who are curious, here’s a quick video highlighting a few of the features:

In order to find inspiration for the design, I drove up to the restaurant to meet the team, see the types of customers they attracted, soak in the energetic environment, and of course, throw down a few of their delicious tacos.

As you can see, the primary visual element on the homepage is the mouth-watering photo gallery intended to make your taste buds sing and dance for Mexican food. The to-go orders was made to stand out on every page as one of the first things you’d see, so naturally I chose to work it in with the rest of the navigation.

If you haven’t already, you’ll soon discover that Sara has a fantastic writing style and is really entertaining to read. It was very important to make sure that this was one of the primary features to attraction attention on the homepage.

Stop in with a couple of friends, order up a plate of tacos and a margarita, and say “hi” to Joe, Telmo, and the rest of the gang at Tacolicious in San Francisco. You can also find them at the Ferry Plaza Farmers’ Market on Thursdays and Saturdays.

Visit the website »

There are still a few elements of the last design that are left-over (mainly the people and car illustrations), but we plan to continue making improvements to each of these elements over the next few months. I’m very excited to be working with these guys — they’ve got a great and very-knowledgable team.

View the website »