Balsamiq

Nick Pettit on Learning for Life

Nick Pettit loves learning. Learning as a way to survive in an ever-changing business landscape; Learning as means of breaking into a new field; Learning as a tool for personal improvement. He recently wrote in an inspiring blog post called "Learning, Every Day" that "learning is a necessity that should be built in from the onset of any project."

His justification is that ongoing learning not only helps you stay ahead of your competition it also pays dividends as an approach to all endeavors in life. "Learning saves time, and time is the most precious resource available. We all have a limited life to lead, so it’s important to make the best of it."

He channels this passion into his role as a teacher at Treehouse, the online learning website that offers over 100 courses in the latest technologies. He teaches all areas of web design instruction and co-hosts the fun, informative free weekly talk show "The Treehouse Show."

His recent article called "How I Rapidly Prototype Websites" caught my attention not only because he mentions his use of Balsamiq Mockups but because he advocates for bypassing high-fidelity tools and jumping from rough wireframes straight to code, very much inline with our philosophy.

He's written some other great articles for the Treehouse blog, both for practicing web designers (such as "Bootstrap 3: Why all the hype?") and newbies (some of my favorites: "Things I Wish I Knew Before I Started Making Websites", "Beginner Web Design Mistakes You Should Avoid", and "How to Keep Up with the Web Industry").

I contacted him to discuss his design approach, his use of Balsamiq Mockups, and insights from his work at Treehouse. Read on for our interview.

Q&A with Nick Pettit

What is Treehouse and how is it different from other online technology course websites?

[Treehouse] is the best way to learn about web design, web development, mobile, and business topics. [It] is a self-serve learning platform where students learn via videos, quizzes, and interactive code challenges. We also have a robust community around our Forum, where students, moderators, and teachers all help one another. As students unlock badges and earn points, they're able to show their work on their public profile. I think Treehouse stands out from the crowd because our standards for quality are extremely high and we provide a guided path for learning any topic.

What was your path to your current role?

Growing up I was interested in both the arts and technology. I would paint or play the piano, while simultaneously learning how to program or make websites. I found the web to be the perfect intersection of all my interests, and luckily for me, web design and development is a skill that's in demand right now.

After I graduated college I started to become interested in sharing my knowledge with others. Even though I have more than a decade of web experience behind me, I'm still a beginner at many other topics, so I know how difficult it can be when you're just starting out. Helping others overcome this frustration is what motivates me; I love empowering people to achieve their goals. I started out sharing my knowledge via blog posts and podcasting. I partnered with my friend Jim to create a video podcast that strived for quality over quantity. We became pretty skilled at talking about technical topics on camera, so when the opportunity to work at Treehouse came up in early 2010, it was a pretty natural transition for both of us.

What do you like most about what you do?

The best part about my work is interacting with our students. Every day I receive emails, tweets, and forum posts from our students telling me how Treehouse has changed their life. It's pretty amazing when we get to hear from our students about how they were able to use their Treehouse education to land a job or get a promotion. In many cases, this has been a huge boon for individuals that need to provide for their families or pay off student loans and mortgages. These are the stories that make me jump out of bed in the morning!

A recent episode of "The Treehouse Show"

What's challenging about your job and how do you deal with it?

My biggest challenge as a teacher is to constantly stay on the cutting-edge while simultaneously thinking like a beginner. I need to know about what's new in the web space so that I can teach our students at Treehouse the modern-day best practices. However, I also need to understand what it's like to be an absolute beginner with no coding or design experience.

I solve both problems at once by learning something new every day. Most of the time this relates to web design and dev, but even completely unrelated topics can help. It's important for me to immerse myself in areas that I'm clueless about, because it helps me understand the struggle that new students go through when learning something for the first time.

What topics that you teach are most in demand right now? What technical skills or programming languages do you think will be most relevant in the near future?

Right now I think it's just important to learn how to design and code in the most general sense. Corporations and consumers appreciate design more than ever, and the demand for code is going to continue skyrocketing. There's certainly a lot happening in the web space right now with HTML, CSS, JavaScript, Ruby, and PHP. There's also other computing platforms like mobile that are important today. In the next few years, I think virtual reality is going to have a massive impact on the world. If you're reading this and chuckling to yourself because you're thinking about cheesy 80's and 90's versions of VR, it's time to wake up and take another look.

Should designers know how to code? What about other roles, like Product Managers? And should programmers have training in design and UX?

I think designers should at least understand how to write front-end code, particularly HTML and CSS. It's also helpful if they can write JavaScript interactions and code the views for backend frameworks like Ruby on Rails. I also think developers should have some level of understanding about design. This is true for many other roles (like PMs) as well, because in my experience, the cross pollination of skills is a huge boost to effective collaboration and communication.

What are the hardest topics or concepts for people to get that you teach, and how do you try to make them easier?

Sometimes specific concepts are so complex to explain in a beginner overview that we later break them out into individual courses. One example is CSS layout, which we decided should be its own course, so we created CSS Layout Basics. I also rely heavily on metaphors and analogies to explain how ideas map to similar concepts in other areas.

Is web development or programming something that anyone can learn? What backgrounds or personality traits make someone more likely to do it well?

Absolutely. I think anyone can learn to program just like anyone can learn how to read and write. There's something to be said for "natural" talent in any field, but programming certainly doesn't require it. If you like solving problems and expanding your mind, then programming might be for you.

If there is such a thing, what is a typical profile of a Treehouse customer? Are they people looking for a career change, people within the field looking to beef up their skill set, something else...?

I'm so glad you asked, because no Treehouse student is typical! That's just one of the big challenges we face every day. Some are looking to change careers, get a promotion, supplement their college courses, or just start a new hobby. Sometimes students want to zero in on something very specific, or just gain a general appreciation for work that's being done by their team members. We strive to provide an education that trains students for a specific job role and maps to real world problems.

Why do you encourage "cheap" prototyping tools and methods over high-fidelity tools like Photoshop?

I use rapid prototyping tools because nothing ever looks the same in the browser. This could be a result of technological limitations, responsive design considerations, screen calibration, or just product evolution. Designing high-fidelity mockups can still be a valuable exercise under specific circumstances, but even if they're absolutely necessary, they're still a big time suck. I try to jump straight from low-fi mockups to the browser as often as I can.

Is online video instruction the future of education? Will it eventually replace University classrooms, for example?

At Treehouse, our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world. We take pride in our remarkably high quality videos and our amazing community, and in the future, we plan to expand our platform in ways that have never been done before. We firmly believe that university education is entirely too expensive and time consuming, and often, it's just not suitable for the challenges that businesses face today. Treehouse aims to provide a better solution.

Why do you use Balsamiq Mockups?

I've been using Balsamiq Mockups for many years now, and I've continued to use it because of its simplicity. I've tried using more general purpose drawing tools, but they never quite match the focused speed and power of Balsamiq. It's wonderfully convenient to just drag and drop commonly used design patterns into a mockup to quickly illustrate an idea.

What is your favorite Mockups feature?

I love the rough and squiggly lines. To some it might not really seem like a feature necessarily, but I think it's a powerful visual idiom for demonstrating that the mockup does not represent the final result. Some clients may not have exposure to the general idea of wireframing, so the rough lines are great for making the distinction between a "blueprint" and a real product.

What has been your experience teaching people about Balsamiq Mockups and low-fidelity wireframing?

Balsamiq makes teaching people about wireframing very simple. A general purpose drawing tool might be more powerful in certain areas, but the tools are designed to be flexible rather than focused. When I show people how fast they can iterate on an idea with Balsamiq, they're usually convinced almost immediately. I've used Balsamiq in several Treehouse videos over the years because it's so effective at outlining a project before teaching how to build it.

Do you have any Balsamiq Mockups tips or tricks that you'd like to share?

Balsamiq makes rapid iteration very, well, rapid. When I'm working on an important project, I always try to draw the same screen several different times without looking at my previous work. I force myself to do something completely different every time, even if it feels "wrong" at first. Sometimes my first pass is pretty rock solid, but often I'll stumble into another design direction that I had not previously considered. It's also fun when elements from different iterations combine together to form a better final result.

Do you have any suggestions for how we could improve our product, or features you'd love to see?

I have two ideas. The first one is a little crazy and complicated: I'd love the ability to jump from Balsamiq to browser using some sort of "wireframe" theme in a framework like Bootstrap or Foundation. The technical implementation might be pretty complicated if exporting directly from Balsamiq, but even just some companion CSS for designing in the browser might be a nice complement to the app.

My second idea is to actually take Balsamiq into more a "blueprint" style aesthetic. Even with the squiggly lines, sometimes clients are still confused about whether or not a mockup represents the final result. However, many people are familiar with the idea of architectural blueprints, so that metaphor could help. Even if it's just an optional skin that can be swapped in, it would be pretty cool to see.

Do you have a memorable negative experiences with it to share? Please be honest, we really want to hear it.

I remember anxiously awaiting Retina support when I first used Balsamiq on my Retina MacBook Pro. I'm so glad this has been added!

What other tools do you use for your job that you really like?

I feel a bit unusual from many other web professionals in that I don't actually use a ton of tools for design. I generally stick with pencil and paper, Balsamiq, and a front-end framework. Sometimes I'll pop into Photoshop or Illustrator, but that's only if I'm working on an important project with lots of stakeholders that really need to see a pixel-perfect comp before coding begins. That's pretty rare though, and I find that it generally slows things down more than it's worth.

What do you do for fun outside of work?

I like to lift weights and exercise, but I also play a ton of video games. As a hobby, I've actually started programming a game of my own in C# using the Unity game engine. I'm writing it for Mac, PC, and the Oculus Rift, and I hope to release sometime in early 2015. It's a lot of work though, so we'll see how I do!

Thank you, Nick, for sharing your tips and experience. You are a Champion!

Do you have a story to share about the awesome things you do with Balsamiq? Send an email to champions@balsamiq.com with your stories or blog posts!

Leon for the Balsamiq Team