Enter the Web Product Manager Resources page, my list of useful stuff to read if you’re a prodman.

If you have any recommendations for additions to this list, please let me know. I’d like for it to be comprehensive but not crufty.

Sketches, wireframes, and mockups are an essential part of the product development process and popular standards are beginning to emerge for web/mobile app design. These 4 videos will walk you through the process – they’re follow-up from the “Right Way to Wireframe” seminar at the recent Interation10 conference.

Will Evans, one of the presenters, recently posted 2 great articles on his blog – they more thoroughly describe his process:

• Shades of Gray: Wireframes as a Thinking Device
• Shades of Gray: Thoughts on Sketching

I think it’s important to remember, especially in a resource-strapped startup, that nearly everything described in these videos amounts to procedural overhead – the actual end user (customer) never sees these, so they’re only valuable insofar as they help you create great products. Which can be tricky, because as you’ll see, wireframing is fun to the point of distraction. As soon as you’re building wireframes, documents, or any other procedural component at the cost of building the actual product, your ship is sinking.

As a complement (antidote?) to these videos, I’d strongly recommend 4 chapters from 37Signals’ Getting Real ebook:

• From Idea to Implementation
• Race to Running Software
• Less Mass
• Test in the Wild

And now, the wireframe porn

http://www.youtube.com/watch?v=gLenYBX3Iqk
Good explicit definition of the full process, though the wireframes are a little too pretty for my taste. They’re spending a lot of time spend designing a throwaway mockup, which is poor ROI (this is likely a project with big overhead, so they can afford to fall in love with disposable process artifacts). There’s another, arguably more important cost to pretty wireframes: they have a coherent brand and design that can seem so similar to a finished product that they distract the decision makers from the final design and create unintentional biases (e.g. for minimal, grey and blue designs).

http://www.userglue.com/blog/2010/02/04/the-right-way-to-wireframe-my-video-explanation/
The hand-drawn placards are a nice touch, but this one is a bit vague regarding what’s actually going on. Process porn? There is a nice reference to card sorting and site map design as a prerequisite for individual pages, and the focus on hand-drawn sketches initially is a welcome addition to all the wireframing technophilia. Finally, the repeated start-to-finish flows from sketch to wireframe to page mockup help explain the transformation of a UI through each step.

http://www.nickfinck.com/blog/entry/creating_wireframes/
This video skips over explaining requirements and how they become page concepts, which makes it far less useful than the others. The actual page requirements are pretty lightweight too, so there isn’t a whole lot to learn here. Also falls into the category of too-pretty wireframes. Man, I wish this UX calendar were a real project though!

http://www.youtube.com/watch?v=QSxF-pISj1w
This last one is from the aforementioned and soft-spoken Will Evans. God bless anyone who includes “motherfuck” in a description of the wireframing process. Also nice that he links to the tools used – Omnigraffle and wireframe stencils from Konigi.
Will starts with sketches before moving to the computer, and 1 standout item is the flow arrows that link the initial thumbnails – it’s an excellent alternative to traditional sitemaps and better suited to application-oriented experiences (as opposed to document-oriented). Also unique in the bunch is the inclusion of blue callouts in the wireframes, explaining each feature and grounding this process in a larger dev flow.
Will’s blog post, Shades of Gray: Thoughts on Sketching, does a good job of explaining the role of hand-drawn sketches in this process, which is arguably the most valuable lesson to take from all of the information in these videos.

Thanks to Josh for sending me the initial link.

Know of any other good “how to wireframe” videos? If you share them here I’ll work them into the post.

When asked for his best interview question, Tony offered this:

What would you say is the biggest misperception that people have of you?

Really good one. I usually ask “if I called someone who reported to you at your last gig, how would they describe you?” I used to explicitly require 3 good things and 1 criticism, but once or twice I forgot to set that criteria and quickly learned hear how many people start with something critical when left to their own devices.

Tony’s question is likely to elicit even more information, as he explains:

It’s a combination of how self-aware people are and how honest they are. I think if someone is self-aware, then they can always continue to grow. If they’re not self-aware, I think it’s harder for them to evolve or adapt beyond who they already are.

As some of you may know, I’ve recently joined OpenSky, a startup that’s changing the way people shop online. I wanted to share with you what we’re creating and ask you to get involved (yes, there’s a payout at the bottom).

OpenSky is simple idea: connect customers to independent, expert Shopkeepers and special curated goods, with a mission to build a Modern Main Street. We’re trying to get people out of the big boxes and create a place where commerce is powered by passion, authenticity, and a sense of community.

So far, it seems like other people believe in this idea too. We currently have a team and over 100 Shopkeepers (and growing) in parenting, gardening, cooking, action sports, and other areas. They’re helping us connect with manufacturers and vendors of unique, high-quality goods. Every day, more people show up at OpenSky to find expert-recommended products.

Now, we’re trying to take it to the next level. Here’s what you can do:

Become a member of our Friends and Family community; share your feedback, suggestions and ideas with us. Be vocal. Share OpenSky with your friends and neighbors, introduce us to outstanding Shopkeepers (experts in any field or niche), and tell us about manufacturers and vendors of your favorite unique goods and those seeking powerful distribution. Most of all, become a part of the future of retail.

It’s simple to get started:

1. Go here: http://friends.theopenskyproject.com.
2. Sign up in 10 seconds.
3. I’ll make sure you receive an amazing discount on any purchase you make.
4. If you think this is a good way to shop, please tell your friends and family. (Tell ‘em to mention my name for better deals!)

If you’re wondering why this is the only thing you’ve heard from me in ages, it’s because these OpenSky people are, like, crazy ambitious. We’re bucking a long trend of big brands using big stores to push mediocre products at the lowest prices, regardless of the effects on the consumer, the producer, or the world. It’s not an easy task, but I think we can change all of that over the coming months.

I’ll make sure that I keep sharing OpenSky with you (unless you ask me to leave you alone – I won’t be offended). We add new expert shopkeepers and new uncommon goods almost every day, and soon we’ll be launching new features and user experience designs to recreate a place where human interaction has a real place in our shopping experience. I’m also happy to discuss all of this with anyone who has questions about what we’re up to.

Thanks and Happy Holidays
c

Get your coupon here: http://friends.theopenskyproject.com

After you shop, please send me an email and tell me what you think. You can also:

• Comment on our blog: http://bit.ly/2lTgSB
• Follow us on Twitter: http://bit.ly/59uY0C
• Read more about us: http://bit.ly/8VD0QE and http://bit.ly/BY8vW