![Essential Web Design Advice From a Wireframing Master [INTERVIEW]](https://helios-i.mashable.com/imagery/archives/07j3ThmP3LFu1u7B5Js22bW/hero-image.fill.size_1248x702.v1647019226.jpg)
So much information is out there and so many new technologies and proofs of concept are appearing across the web that it can be difficult to keep up with what's going on. For newer designers or developers, it can sometimes be scary to know where to start. That's why it's always good to talk to the masters -- individuals who are setting the bar by building high-quality apps and sites -- to see how they work, what tools they use, and what advice they have for others.
This week, we spoke with Travis Isaacs, a seasoned user experience designer and creator of Keynote Kung-Fu, who, in his words, specializes in "bridging the gap between visual and interaction design, information architecture and web development."
Here are Isaacs's top web design tips.
About Isaacs
Isaacs has worked on the visual design and front-end development for websites like ShopKeep.com, Blinksale, Viewzi and Travelocity for the iPhone. He's also half of the team behind the innovative heatmap visualizer, Trailhead.
It was at the Big Design 2010 conference earlier this spring where Isaacs made perhaps his biggest splash. At the conference, he gave a presentation called "Keynote Kung-Fu: How to Wireframe Like a Ninja" that outlined how using Apple's presentation tool Keynote, individuals can create truly compelling and effective wireframes and website mockups.
The presentation has been viewed more than 37,000 times on SlideShare, and it gave way to Isaacs's own bundle of Keynote templates, available at KeynoteKungfu.com. Since May, Isaacs has sold more than 1,500 copies of his $12 package of Keynote tools and elements and issued several big updates (all free to buyers) that include prototypes for the iPhone and the iPad. Keynote Kung-Fu has even been expanded to support PowerPoint for Windows and Mac, and Keynote for the iPad.
If you don't believe it's possible to create prototypes of websites, web apps or mobile apps using Keynote, check out Isaacs's presentation:
Tools of the Trade
We asked Isaacs about his design and development process. He tells us that as a front-end designer, he starts his process by sketching -- but just at a very high level. Once he has his page level ideas sketched out, he moves straight into Keynote. He tells us, "I've been using Keynote since 2006-ish, but seriously using it for wireframes for the last two years. I do use it for all of my own work, which helps me make [Keynote Kung-Fu] better."
Keynote is used for all of his interactions and interface details. At this point, Isaacs takes a path that is a bit different than many front-end developers; he heads straight for the code.
He says that this is "a little backwards from most people" but for him, it makes sense to do the visual design along with code, or after the code. Photoshop is what he uses to build visual elements for his work.
When it comes to writing his code, Isaacs is a fan of TextMate, which he calls "the best money I've spent (aside from iWorks, of course)." What makes TextMate so good?
It's all about the bundles. Noting that there are syntax bundles for just about every language, Isaacs also says that he's "drunk on keyboard shortcuts."
When it comes to front-end languages, Isaacs is a big fan of using HTML, CSS and jQuery. jQuery, according to Isaacs, is the only JavaScript library you will ever need.
For his projects, Isaacs frequently uses Nathan Smith's 960.gs grid system, the new HTML5 Boilerplate and the LESS CSS framework.
"If You Build a Product, Charge for It"
While discussing advice for individuals new to the world of HTML/CSS/JavaScript, Isaacs made a point that we thought was worth highlighting: "If you build a product, charge for it."
Although Isaacs says that he gives smaller things, like code snippets, away for free, he believes in charging for products and tools that add value.
"Charging for a product forces you to make it better and gives you instant feedback on its value. It's pretty easy to give something away -- the barrier is low. Getting someone to give you money is much harder."
He continues, speaking of Keynote Kung-Fu, "I've learned so much about customer service, digital goods, marketing -- things that would have been hard to do had I just given it (or Trailhead) away."
Expert Advice
Here are some of Isaacs's other tips for aspiring web developers and designers:
Write lots and lots of code by hand.
Study the classics, including Jeffrey Zeldman's Designing with Web Standards, Dan Cederholm's Bulletproof Web Design, Eric Meyer on CSS and Jeremy Keith's DOM Scripting, because even though "jQuery is the only JS library you will ever need, knowing old fashioned JS will keep you from making jQuery bloated."
Don't try to achieve pixel perfection in all browsers. This is an interesting tidbit because it acknowledges that all designs aren't going to look the same in all browsers. Isaacs thinks that the time and effort put into trying to achieve exact parity across browsers is "more trouble than it's worth, frankly."
This isn't to say though, that Isaacs thinks that designers and developers should ignore other browsers. A common mistake -- and a common advice point we kept coming back to was that he sees many web designers and developers who don't make their code bulletproof. That means that it can work in various scenarios. Common mistakes he sees of code not being bulletproof include:
Background images that don't tile for wider screens;
Fixed width and fixed height elements;
Effects, using newer technologies like CSS3, that don't degrade gracefully on unsupported browsers;
Having something look great in Firefox or Safari but not even checking to see how it looks in Internet Explorer, Opera or on a mobile device.
Still, Isaacs isn't opposed to designing or developing for a certain audience. For instance, especially in the beginning, most of Keynote Kung-Fu's traffic was from Mac users. That meant that he felt he could get away with practically anything with his design and feel free to use more modern techniques. As the toolkit has expanded to support PowerPoint, checking to make sure things work in Internet Explorer becomes more important.
Your Thoughts
What do you think about Isaacs's tips for web professionals? Have you tried wireframing in Keynote or PowerPoint? Let us know in the comments.
Series Supported by The Bazaar
The Web Design Best Practices Series is supported by The Bazaar, a marketplace to buy and sell creative objects. It empowers creative talents with the tools to promote and sell their artworks globally. Start buying and selling instantly by connecting with Facebook or Twitter.
More Dev & Design Resources from Mashable:
- 10 Free Web UI Kits and Resources for Designers
- A Beginner’s Guide to Integrated Development Environments
- HOW TO: Be a Hybrid Designer/Developer