Features

Laptop? Check. Sketch pad? Check. Website prototyping tool? Check! This summer, students at the Art Institute of Portland are adding another essential tool to their arsenal: ProtoShare. The entire Touchscreen Development class will use ProtoShare as part of their in-class development process. Touchscreen Development is for Web Design/Interactive Media majors, as part of the Flash Development course. Students must submit resumes and work samples for acceptance into one of the 10 spots.
 
Instructor Dan Chapman told us that ProtoShare's collaboration features are ideal for his class. "The entire class is completely collaborating on one project. We wanted them to share comps and wireframes," said Chapman. "Our clients are the program director and admissions department. We wanted them to comment on the process, and it's hard to get everyone on the project into the classroom at the same time.”
 
For the project, each student will take a specific role: experience designer, flash developer, asset manager, animator, and an information designer who is responsible for the wireframes. The information designer will build the interactive wireframe using ProtoShare, and then present it to the rest of class for comments and suggestions in ProtoShare's Review section. As the project develops, they will invite the “clients” - the admissions department and program director - to collaborate with feedback early in the process.
 
While he noted that his students are sophisticated users who are demanding of their tools and software, Chapman said, "The class was quite impressed with the tool, and they are tough customers.” We'll check back with the class at the end of the session to see if ProtoShare made the grade at the Art Institute.

Relax. Take it easy. You're about to enjoy the soothing sounds of ProtoShare's Navigation component. What was once a long involved process, with numerous revisions and reworkings of HTML and CSS copied and pasted across dozens of pages, is now just a simple drag and drop. ProtoShare's navigation component automatically picks up the navigation from your site map as soon as you drag it onto the canvas. Boom - there it is. Excuse me while I put my feet up on the desk.
 
Ok, that's much better. As I was saying, not only does the navigation instantly fill in, but it also automatically updates everytime you revise your site map. Deleting, adding or changing locations of pages does not phase the navigation component: all links and paths are automatically maintained. But, if you do want specific pages for the nav, you can do that as well. Just click on the component to display the Properties tab, open the Page Selector by clicking the Starting Pages field and use Shift-click to select the specific pages you want.
 
Hang on a second while I stretch out in the office hammock. Normally I would be worried about setting up different styles of navigation on the page, wondering whether it should display horizontally or vertically. But the List Style setting allows me to easily shift between horizontal, vertical or plain text menus. Not only that, but the horizontal and vertical menus automatically include drop-downs and fly-outs as needed. It's almost decadent, isn't it?
 
So, how about you? Are you feeling relaxed yet? Oh, you're wondering about your headers and footers and other incidental nav areas? Well, no worries there. You can drag out any number of navigation components onto a page, set each one to a different root page and quickly configure them to suit your needs.
 
Tip: To have distinct header and footer navigation, create a Footer page in the site map. Drag the pages you want to be in the footer into the Footer page, so they show up as sub-pages. Set just the Footer page's visibility to "Hidden from navigation".
 
In the editor, drag out a navigation component to the canvas and click on the component to display the Properties tab. Next open the Page Selector by clicking the Starting Pages field and select Footer from the Page Selector. Finally, select plain text from the list style, since it does not include drop-downs or fly-outs. There you go, a perfect footer.
 
Ok, I'm going to take my mid-afternoon siesta now. What, you want to know where you can get a hammock too? I can see the navigation component has already started working it's relaxation magic on you. I'll get back to you on that after nap time....

As we say elsewhere, we don't have to convince you that website prototyping is a good idea. We all know it's essential to a successful website development and deployment, there's tons of research and white papers and, most effectively, your own hard-earned experience to back it up. But, we find that web designers and developers still don't always do it. Site9 started out as a web services firm, so we have a lot of past experience working with clients on interactive projects. And we felt the same pain as you in trying to stay true to the prototyping process in the face of inadequate tools and client indifference.

Why don't we prototype websites, even though we know we should? Well, there are many reasons. Often the client wants a quick turnaround and the only way to show them progress is with a design comp. Or if they are open to the idea of a wireframe or prototype, the available tools to make a prototype are either cheap, but ineffectual and clunky, or expensive and hard to use. Plus, getting clients to download and install software is never fun. The end result is generally a big stack of paper or e-mails with confusing diagrams, arrows going back and forth between various pages, notes and specifications that are unclear without interaction. You can actually see client's eye glaze over when they start to go through the paper wireframes and lengthy requirement documents. This lack of client engagement and interest is always a letdown, and so it becomes easier to skip this step and move straight to design… and more frustration.

So several years ago, unhappy with the status quo, we started doing more research into prototyping. One book that got passed around the office was Ani Phyo's Return On Design, now sadly out of print. In the book, she makes a strong case for user-centered website design and the need for information design principles to easily translate into an actionable website plan. She stresses that the best way for a website development team to execute on a plan is through prototyping. Around the same time we also discovered the writings of Jesse James Garrett, and his now legendary ‘Elements of User Experience’ diagram. Garrett was one of the first people to forcefully advocate for the process of website prototyping and good information architecture. Okay, this confirmed our own experiences on the benefits of website prototyping. But we still struggled to prototype effectively and within budget and time restraints.

As we transitioned away from services to software and developed Launch, our own design-to-deployment website development software, we made sure prototyping was one of it's many features. We knew that we couldn't offer a serious solution without providing that initial step. When our users started building sites with Launch, they were excited at how they could quickly and easily build an online interactive wireframe. And their clients were engaged from the beginning, because they could actually click through the site to see how it would work. They got it. Suddenly, prototyping seemed actually easy to do - and was clearly rewarding to the user. And they told us about it. A lot. This led us to develop ProtoShare™. Just think of it - now you can not only easily create a clickable interactive prototype, but you can collaborate with your clients through the entire process, all over the web and through your browser, no software required to install or maintain. And we think that's pretty sweet.