ZURBlog is where we discuss product design, business and strategy.

ZURB has, at any given time, between 12 to 15 clients. On average, we end up creating wireframes for probably ... um, 90% of those. It's a lot of wireframes, roughly 2,200 a year between the entire team, and not counting internal projects. Yeah, you could say that wireframes are important to us.

We've even written about wireframes before, including why we wireframe at all. We've also written about some of the tools we use, especially the very excellent Omnigraffle (read more about Shared Layers in Omnigraffle and Omnigraffle variables). However, we've seen a tectonic shift ocurring in how we wireframe, in large part because of Foundation, realizing that we can't wireframe the way we used to as designers.

Traditional Wireframes Are Dead

Or as close to dead, as it makes no difference. Here's the problem with traditional wireframes:

• They give no sense or insight into flow.
• They have to be created at various different screen sizes to account for how customers will actually see them.
• The client won't see them in their native element. The context is wrong.

A recent hi-fi wireframe we created for Venyu

These aren't new issues with wireframes, and there's a few ways around them. You can link wireframes together into a flow using something like Powerpoint/Keynote or just image maps in HTML. You can make wireframes for desktop and phones and hope that that's enough to get a good idea of how something will work. And you can try and make wireframes look and feel like the way they'll really be seen. But all of that is half-assed at best. We need some new hotness.

Coded Wireframes FTW

For several of our recent clients, we've been creating what we call coded wireframes. The idea of coding up your wireframes isn't terribly new, there've been rumblings about it for a long time, but with the rise of rapid prototyping frameworks (most notably Foundation, of which we're rather fond) it's feasible to do it in the kind of time constraint we typically have with our 12 to 15 clients.

Coded wireframes are possible through a few functions, most of which are in Foundation, but some of which can be pulled in:

• The responsive grid in Foundation lets us very quickly create complex layouts that work on almost any device.
• Foundation's mobile visibility classes let you tailor the interface and experience for users based on the kind of device they're on. Very handing for moving around nav, changing the order of content, etc.
• Several plugins like Orbit and Reveal help us create modal dialogs and image/content sliders without having to muck around in JS.
• Services like placehold.it give us an easy way to drop in image placeholders to block out content. Just pass in an image source like "http://placehold.it/400x300" and get back a 400x300 image. Pretty sweet.

By those powers combined, we can create coded wireframes really quickly, and with a high degree of fidelity. The downsides are fairly minimal but should be mentioned — you don't have pixel-level control without a lot of extra effort, and adding in things like icons or less common widgets is not as simple as it is with the stencil libraries in something like Omnigraffle. We haven't found this tradeoff to be a problem. Now let's talk about what we do get.

Significantly Better Feedback and Iteration

We've always been hounds for feedback, but the feedback we get on coded wireframes is quite a bit better than it is on static screen. The client can get a feel for the flow and have a much clearer picture of how the final product will work, not just what it will look like or what functions there are.

Multi-Device Testing

We live in a world where your products need to work on almost any random kind of device. Static wireframes simply can't represent that kind of world, and coded wireframes absolutely can.

See one of our first coded wireframe projects, for last year's ZURBwired event.

Correct Context

Much of our impression of a service is colored by how we see it, and, in this instance, that means the device we view it on. The feedback we want will vary greatly depending on whether the user sees our work on a phone or a 30" display, and if they see it on the actual device with the affordances and restrictions it carries. Maybe tap areas are too small, or the layout looks weird on a large monitor. All things we want to know.

Try It!

It doesn't hurt to give it a shot and, at the end of the day, wireframing in code leads to a better product. The feedback is better, the feel is truer, and the final implementation is smoother. Download Foundation (or another rapid building framework) and create some wireframes by just hacking on the provided index.html, then let us know how it goes in the comments.

Well, it finally happened. Facebook dropped its IPO today. As predicted, the articles about how overvalued the company has become started pouring in. It’s interesting to see that even one year ago when we published a blog post asking the Influencers if they would buy Facebook stock many of the quotes and comments sided with the fact that the company is overvalued.

We we're chatting with Robert Scoble on IM today as the IPO news hit and he was rushing to put together his post about the new. He had a very different opinion:

It's undervalued, very undervalued. They have significant revenue engines that are not operating yet. Mobile hasn't turned on at all. And they are expected to build a new kind of advertising for Open Graph developers. I can see them worth a half trillion by 2015.

Comparing this comment to Rand Fishkin, CEO and Founder of SEOmoz, exactly one year ago:

I'm generally on the side of Warren Buffet (and common sense) in these matters. When everyone else is excited about Facebook it's a great time to sell; when they're down in the opinion polls, it will likely be a good time to invest. They are certainly an exciting company and they make an incredibly popular, world-changing product. The issue with buying their stock, however, is not whether these facts are true, but whether the market believes them to be even more exciting than they really are. To my mind, that's almost certainly the case.

Are they overvalued at $100B currently? Are they significantly undervalued? Will they be worth a half-trillion dollars soon? We had a bit of a discussion here at ZURB after the news hit, half a trillion seems like an insanely large number for Facebook, the display advertising market is growing, but not at such exponential proportions. That’s what it seems like to us at the moment anyway. We’d love to know what you guys think. Is Facebook overvalued? Undervalued?

Editors Note: This morning (2/2/2012) we received a follow up from Rand Fishkin, CEO of SEOmoz commenting on the news and his quote from last year which we mentioned in the article. Below is what he has to say:

If we're talking about the 409A valuation from December that put shares prices at $29.33, then no, I don't think they're overvalued. A professional valuation firm performed that, and they tend to be on the low side to benefit employee stock options. As an example, at the beginning of 2011, SEOmoz received a 409A valuation in the $10mm range, but had a buyout offer at 4X that (which we still thought was low) right around the same time.

If we're talking about the IPO price - to my knowledge, that hasn't yet been announced, so very hard to say whether that will be over-valued. The company certainly has massively impressive revenues, profits and growth.

Jargon. It's an occupational hazard. Which is why we couldn't help but chuckle when we read this Harvard Business Review article on the subject. The article got us thinking, what are the buzzwords in our field that simply don't make much sense to us? The one term that kept coming to mind was "User Experience Design."

For us, "User Experience Design" would have to fall into the "meaningless expression" category of the article. Think about it — to truly be a UX Designer you have to be an expert in so many fields. That's because the buzzword of User Experience Design covers too many fields: anthropology, psychology, graphic design, user research, communication design, usability and much much more. How can any one person really be an expert in all that?

Digging deeper, how can you design user experience? To say you're designing an experience that just happens and changes overtime, you're committing yourself to crafting something that's not only functional, but creates the same emotional response from every user. Or as Smashing Magazine points out:

Users are different. Some are able to easily use a website to perform a task. Others simply are not. The stimulation that a product provides depends on the individual user's experience with similar products. Users compare websites and have different expectations. Furthermore, they have different goals, and so they use what you made in different modes.

In other words, user experience can't be designed. You can't [edit: control] the emotions, feelings, and experiences of the user. You can, however, understand them. As product designers, we shouldn't think that we're creating experiences. Our goal is to understand how users interact with our products so we can make them better.

There is a time in every man's education when he arrives at the conviction that envy is ignorance; that imitation is suicide; that he must take himself for better, for worse, as his portion; that though the wide universe is full of good, no kernel of nourishing corn can come to him but through his toil bestowed on that plot of ground which is given to him to till.

—Ralph Waldo Emerson, "Self-Reliance"

That quote has always got me thinking about the difference between innovation and imitation. Take Steve Jobs, for instance. He has been both hailed as an innovator and crucified for being an imitator. Over the years, Jobs has been accused of stealing the mouse and personal computer from Xerox. But Jobs didn't steal what Xerox designed. He saw what opportunities they missed and built off of that, improving the concept. That's innovation, not imitation.

However, imitation remains a trap that product designers fall into. They're dead serious about being the next Facebook for "insert a hobby here." They can't break out of a certain way of thinking, as Brendan Boyle, partner at IDEO, points out in this video:

I was fortunate to start my career as a toy inventor and had the pleasure of working with Brendan. That video has some pretty funny moments and products. His point? Put more fun into the process of creating and building ideas. Look at problems from a completely different perspective.

Product designers in the digital world need to stop taking themselves so seriously — the next great idea isn't going to come from imitating Facebook. After all, Mark's Facebook site originally started as a college hook-up site. And if you find it easier to imitate rather than innovate, remember what Emerson said, "Imitation is suicide."

Lately, we've been thinking a lot about passion around the offices at ZURB. Where exactly does passion come from? How does an aspiring entrepreneur turn a desire into a passion? So it's no wonder that a recently unearthed vintage video of Steve Jobs talking about passion caught our eye:

What Jobs is talking about here is being truly passionate about your work, for your craft. Investing yourself in your ideas when no one else will, when there might not be any financial rewards. We really love his observation, but what really fascinated us was when Jobs says:

Those people that are crazy enough to think they can change the world are the ones who can do it.

Jobs certainly was crazy enough and passionate enough to change the world, the way we interact with products. However, that passion didn't spring up overnight. It came from deliberate practice and hard work, and finding meaning in his craft.

Over the years, there's been accusations that Steve Jobs stole the mouse and personal computer from Xerox. We've recently come across a brief video where Jobs sets the record straight:

What Jobs is talking about is really innovation — taking a technology that's already been discovered and making it better. As he puts it, exposing yourself to the best of everything that has come before and finding ways to transform it into the next big innovation. That's what Jobs did when he encountered Xerox's mouse and personal computer in 1979— you can read the entire saga here.

Jobs saw what Xerox had developed, and couldn't believe that the company wasn't doing anything with the technology. He saw opportunities they missed. He knew how to improve it. He was inspired to do what Xerox hadn't. That's innovation, not theft.

It's no secret that hiring an amazing product designer is a big problem for everyone right now. Numerous articles have highlighted this issue over the last year, Garry Tan of YCombinator gave an interview on Mashable recently about his experience finding great designers, Jay Holtz wrote a great op-ed on NYTimes about his hardships finding a designer. We’ve seen first hand how hard it is to find great designers, this is what prompted us to create our own job board. So the question becomes: Why is it so tough to hire a designer?

The answer to the question isn’t simple. The problem of finding a designer roots from a number of smaller issues: the fact that companies are not sure what skills they are looking for; there is a lack of trained product designers (who don’t simply push pixels around) out there; and, of course, it’s very tough to figure out how a designer fits in an organization.

We decided to ask some of our friends who had to deal with this very issue for their opinion. Here's what they had to say:

Designers are, in my experience, long on demand and short on supply for a few reasons:

Being a great designer requires a combination of raw talent, vision and structured practice that traditional schooling (K-12) doesn't typically teach or encourage. The personalities of artistically capable individuals often conflicts with a "hired designer" role, which requires finding an individual who can be flexible, accommodating and make intelligent compromises to get projects done. These traits are entirely at odds with fulfilling an artistic vision to perfection, yet many of the best designers are, indeed, artists.

Far too many managers and project leaders feel they've earned a right to influence, critique and judge a design, despite not having any formal training (much like writing but unlike programming, non-professionals feel they are entitled to much greater influence than their background would normally dictate)

There is a great article we wrote on this subject called The web design curve problem.

As happens in most industries, value creation is moving up the stack. That is, companies make money in new technology-driven arenas at first by differentiating on performance, engineering, cost, etc. As industries evolve, core infrastructure gets built and commoditized, and differentiation moves up the hierarchy of needs from basic functionality to non-basic functionality, to design, and even to fashion.

For example, there was a time when chief buying concerns included how well a watch might tell time and how durable a pair of jeans was. There is still plenty of core technology to be built for the Internet, but the fact that you can now be a fairly sizable Internet company without ever needing to own (or even look at) your server hardware means a much bigger proportion of what companies do is add value on top what's here. And one of the most powerful ways to add value is through design.

—Evan Williams, Founder of Twitter

It's only hard to find a designer if you're looking for someone excellent, and then it is just as hard as finding anyone to do any job excellently: very hard. Today, everyone and their brother can do some photoshop tutorials and edit frameworks, so the market is growing quickly at the less-skilled end with more and more designers. However, just as with programers, the people who are good and have experience are gainfully employed and so it is hard to source them as generally you have to poach them away from other jobs.

Everybody realizes the growing importance of good design as a competetive advantage, and the talent pool to draw upon very small, especially in tech heavy cities like San Francisco. Further, the US immigration policies make it very difficult for companies to import talented labour from overseas when they are unable to fill jobs locally, further pushing up salaries and competition.

—Matt Mickiewicz, Founder of 99designs and Sitepoint

What once required the most skilled programer in the most complex environment has now been abstracted up to a simple design that any consumer can see and touch. The new maestros are those who can create these designs.

—Kevin Hartz, CEO and Founder of Eventbrite

We're curious to hear your thoughts in the comments below. Why is it so hard to hire product designers? Did you have any hardships finding a designer?

Since Steve Jobs' death last year, it seems several vintage videos have been unearthed of the man. Now another video has been recently published showing the creation of NeXT — the company Steve Jobs started after Apple fired him in 1985:

It's interesting to see Steve Jobs at this stage of his career, having just left Apple after losing a power struggle for control of the company. You can almost see the early formation of the trademarks that we associate with Jobs today — black turtleneck and the showmanship. What's really interesting is to see how Jobs orchestrates the meetings with his 11 member team. Jobs facilitates more than dictates, steering his team toward his vision and urging them to have that "start-up hustle."

The moment, however, that really caught our eye in the video was when Jobs says:

I can't change the world ...

Of course, Jobs did change the world, how we interact with products, but as this video shows that change came from deliberate practice and hard work, which is something we all can relate to. We hope you enjoyed this video as much as we did.

Oh, we're suckers for "What If" tales, like the ones found in comic books. What if Batman married Catwoman? What if Superman was a Soviet dictator not an American hero? So when we came across Brian Sullivan's UX magazine article on the sketching secrets of Leonardo da Vinci, we couldn't help but ask — what if Leonardo ran a tech start-up?

Frankly, Leonardo would kick butt as an entrepreneur. After all, Leonardo was a true renaissance man, a painter and sculptor who had an inventor's mind. Leonardo had that entrepreneurial spark. Get this, he dreamed up the helicopter, tank, and, even, the airplane long before they were actually built and used.

Picture it for a sec. Of all his skills, what would Leonardo have brought to Silicon Valley? What would've made him a success? Well, we think he'd be up for the challenge, and here's a few skills we think he'd employ.

Scrappy Artist

Leonardo's sketch of a folding boat, circa 1485-7.

Leonardo was a scrappy artist, as Sullivan points out, scribbling some 13,000 drawings with tons of annotations (take a look at a few here). He sketched everything and anything — from mechanical marvels to flowers blossoming to the human anatomy. Leonardo worked out his ideas and problems on scraps of paper.

Take Leonardo's famous "The Last Supper" painting. As he was working through that painting, Leonardo did a sketch of the musculature of the arms and shoulders so he could see how the arms should look in the painting, says Sullivan. That's a time-tested design technique right there. Leonardo knew that sketching can help test out ideas and eliminate ones that don't work.

He'd Get A Drawing Partner

Leonardo didn't shy away from collaboration. He valued feedback. While doing anatomy sketches, he worked with an anatomist to get the details right, says Sullivan. By nature, sketching is collaborative and social. That's because sketches are disposable so there isn't a lot of ego invested in them, making it much more inviting for people to work together. Leonardo would've rocked this approach today, building a team whose skills would ensure that the details were just right.

Not One, But Multiple Iterations

Leonardo's multiple sketches of a fetus in the womb.

Leonardo wasn't satisfied with doing just one sketch of something. He did multiple iterations, drawing and redrawing an object from different perspectives and stages of development, says Sullivan. As part of our design process, we've found that multiple iterations make it easier to ask some dumb questions that can sometimes lead to great answers. Leonardo came to the same conclusion, which is why he continually refined his ideas through a lot of intentional trial by error. Believe it or not, it's also not too different from the approach taken by well-known investors Dave McClure and Ron Conway.

Ron told us at his soapbox talk that his firm doesn't always know who'll be a breakout company, but talks to dozens of them, asking tons of questions before deciding to sink money into a company. Whereas Dave McClure said at his soapbox talk that 500startups isn't always sure in the early stages of investing, saying the fundamental philosophy at his firm is that "we're not that smart." In other words, both men don't know the right answer going in, so they try a lot. That's something Leonardo would easily get behind.

Could Leonardo Prevent a Flop?

Let's take this "What if … " a step further. Say Leonardo was pulling the strings on Google's flop — Wave. Would he have concluded sooner that it wasn't building momentum? Would he have noticed sooner that users were confused by its complicated interface? How would he have designed it? Da Vinci may have even arrived at Google+ a lot sooner than Googlers did. Makes us wonder, what other flops would have turned out differently had Leonardo been at the helm?

This has been a crazy year for us here at ZURB. In between laser tag, pumpkin carving, tons of great soapbox talks and one madcap 24-hour ZURBwired, we did more open source projects than we ever have in the past. It's been tremendously fun and extremely rewarding as well as difficult, frustrating, and challenging. Here's the top 4 things we learned on our open-source escapades in 2011.

The Need for Open Source Tools is High

We don't go out of our way to broadcast our open source efforts, our marketing efforts are usually devoted to other aspects of our business. On the ZURBplayground, we post pages talking about plugins or tools we've created and made available, and we'll blog or tweet a bit, but the adoption and feedback we get on these things is incredible. With very little effort to spread the word, these things really get around.

The Bar for Quality of Open Source Tools is High

We try and ensure that the open-source code we push out is as good as we can make it — and we still need to make it better. As soon as you make something available, even when it's free, you will immediately start to hear how it could be better, or more robust, or more capable. Tools like jQuery have set a very high bar for open source (at least technically).

Open Source Requires Serious Commitment

When we released Foundation, we decided from the start that we were in it for the long haul. No matter how successful it might be out of the gate, we knew there was a degree of dedication and a show of commitment that would be required for people to trust a new tool. We were right, and our day-to-day commitment to these projects is surprisingly high.

Open Source is Full of Fascinating Challenges

Build something open source if you ever want to know if you can handle building something well, cleanly, and elegantly. You'll learn more about the edge cases, unique needs and general mindset of users than you ever will from other avenues.

Here's a recent example: Foundation lets you tag items to be shown on specific types of devices, like phones or tablets. Our implementation wasn't perfect – some laptops would appear as tablets and some tablets as desktops. After exhausting our options in CSS alone we decided we had to use Javascript — but how? Whatever we did would need to work everywhere Foundation works (which is pretty close to everywhere), and it would need to work without any new effort or a learning curve. It would need to fall back in case the user didn't include our JS, or even if JS was turned off. Every decision we made would have ramifications for thousands of users, and would cause a flurry of emails asking for support if we did it wrong (or even if we did it right).

We settled on including a version of Modernizr with a CSS fallback, but we'll no doubt hear from users soon about how that's solved their problems and created some new ones. That's the way it goes.

Bonus: It's Fun

We've had a pretty great time working on open-source projects this year. It's tough and demanding, but the payoff is great. Not in terms of dollars (although our efforts do have an impact on our consulting and product business) but in terms of community, and the joy of seeing someone use something you worked on to get great things done.

We'd love for you to chip in on our projects, including Foundation, the Sass and Rails gem versions of it, Joyride, Reveal, Orbit, Flickrbomb, or any of our other playground pieces where we always try to keep things as open as we can.

Here's to more awesome open source projects in 2012! Let us know what you're working on, we'd love to see it.

If you're interested in hearing more, we were interviewed for The Changelog podcast.