With this release we updated the Export to Microsoft Word documentation formatting, added Export to Web (Professional & Enterprise licenses only), and installed some minor bug fixes.

Generating a Requirements Specification now automatically includes a cover page, header, footer, and page numbers. With this added formatting and the ease of editing a Microsoft Word document, Professional users will no longer see these features as options on the Export tab.

New to ProtoShare is Export to Web, also for Professional and Enterprise users only. Users can export an HTML Archive to save a local copy as well as export the prototype to ProtoShare servers for usability testing and easy viewing. No login necessary. Export to Web does not require a login to access the prototype making it easy for usability testing. Note: Export to Web does not include the ability to view or participate in ProtoShare discussions.

Among a handful of other bug fixes one bug involving links to deleted pages has been fixed. After a page is deleted, users can select a linked component on an active page and adjust the page reference. In the Link To property the component is now listed as Unknown Page. Click the field to open the page selector to view the error and correct it manually.

Feel free to contact Customer Service with any questions regarding this release.

Like Glenda the Good Witch helping Dorothy, we are dedicated to helping our customers be successful in ProtoShare. Let us guide you.

Inside the App

If you are working inside ProtoShare and get stuck, there are several places to go to help you get back to work.

Inside the Editor are help links at the top of the palette.

In all views for a Licensed User (everyone but a Reviewer), there is a Help tab in the main navigation linking you to the User Guide, Tutorials, User Forum, Contact Support, and Keyboard Shortcuts.

Reviewers have their own Help tab as well.

On ProtoShare.com

• The Help resources found within the application can also be found on our website in the Services & Support section.
• Read or search through the full User Guide.
• Browse the User Forum for tips, FAQs, and other questions from users like you.
• Access Video Tutorials to help you Get Started or tackle a Tabbed Panel.
• Attend live webinars to also help you Get Started.

NEW: Chat with a customer service professional during office hours via the new Live Support Chat feature on our support pages.

In addition to these resources, the Features page showcases all of ProtoShare's features. With this information you can learn all the capabilities ProtoShare has for your project.

Be sure to keep reading the ProtoShare Blog. Besides company news, industry insight, and announcements, we post workflow examples, tips & tricks, and in-depth how-tos.

Seeking More?

If you still cannot find what you are looking for, it's time to call on the Wizard. Ours is known as the Customer Service Team (online hours are 8 AM to 5 PM PDT). For billing inquiries, email billing@protoshare.com. All other support queries can be emailed to support@protoshare.com.

Best of luck on your journey! And if you find slippers made with real rubies, be sure to let me know.

Portland, Ore. – August 3, 2010 – Site9, Inc., developer of ProtoShare, the industry's fastest growing collaborative prototyping tool for websites and web applications, today announced the addition of technology veteran and successful entrepreneur Jim Coonan to the Board of Directors. He fills the seat of Director Tom Holce, who passed away on July 14, 2010.

Among his many entrepreneurial roles, Coonan served as Chairman of the Board of Rodin Audio (now known as AudioSource), a leader in home and automobile electronics. Prior to his role at Rodin, Mr. Coonan was Chairman of Kentrox, Inc., a leader in the telecommunications equipment business. Coonan was also Chairman and owner of Hotel Software Systems Ltd, a provider of property management software for the hospitality industry. From 1990 through 2000, Coonan was Chief Executive Officer of OECO, a custom electronics manufacturer of defense, aerospace and high reliability electronic components. Coonan is also a member of the Mount Hood Equity Partners Advisory Board.

Coonan has held several roles with the Oregon Entrepreneurs Network, including currently serving as Vice Chairman and as a member of the Board. He also served as Chairman of the Portland Angel Network. Coonan served as Director of Business Alliances for the Oregon University System from 1998 until 2003. He also has been a member of the Riverdale School Board, and president of the Riverdale School District Foundation. Coonan has an MBA from Northwestern and a B.A. from Stanford.

"We are delighted to have a technology veteran like Jim Coonan join the Site9 Board of Directors," said CEO and Chairman, Andrew Mottaz. "He brings a wealth of both entrepreneurial and executive experience to the Board, and we look forward to his advice and judgment as we continue to grow and expand the company."

Here are 10 time-saving tips to keep in mind the next time you use the Editor. Try them out. I’m sure they’ll improve your prototyping experience.

1. Opening Recently Edited Items

   You can load only one item in the Editor at a time. And if you’re doing a lot of work in a project, you’re most likely editing lots of designs as well as templates and clippings. To open a design, template, or clipping in the Editor you must start from the Prototype screen or the Library.

   If you’re like me, you find yourself jumping around from item to item as ideas pop into your head. Fortunately, once an item has been edited during your current session, it’s listed in the File menu and the item can be quickly opened again by selecting its name. As a convenience, ProtoShare labels each item as a page design, template, or clipping so you can quickly scan the list and choose the correct item.

   

2. Using Keyboard Shortcuts

   Keyboard shortcuts are available for many Editor actions. Some shortcuts are associated with showing parts of Editor interface such as the Component Listing and the Properties tab. Other shortcuts are associated with toolbar functions such as aligning and grouping components. There are still other shortcuts associated with actions that don’t have a corresponding interface element such as duplicating components.

   You can learn about the available shortcuts using tooltips in the interface or the online help. If a shortcut is provided for a specific interface element such as a tab or a toolbar button, then it’s included in the associated tooltip. To display the tooltip, mouse-over the element. For example, to show or hide the Component Listing, press Ctrl + 9. All keyboard shortcuts are available in the online help. To quickly access the relevant help page, click the Keyboard Shortcuts item in the Help menu.

   

3. Duplicating Components

   There’s a particular keyboard shortcut that deserves its own description because its associated function is so useful. The function is duplicating components and the keyboard shortcut is Alt (Option) + click and drag.

   This shortcut is particularly useful when you want to reuse components that are already configured. For example, suppose you’re prototyping a product category page for an ecommerce site. The page uses multiple instances of a product item that consists of grouped components configured a particular way. Rather than recreate this item for each instance and configure the same properties, you can just duplicate the group.

   

4. Selecting Multiple Components

   To perform any action on a component such as repositioning, configuring, and deleting it, you must first select it. To select a single component, you simply click it in the canvas. To select multiple components, you can use Shift + click or the rubberband feature. To use the rubberband feature, click in a region of the canvas that contains no components (or a component that’s locked) and that’s close to the components you want to select, and then drag. A gray selection region is created.

   You can combine the two multiple selection options to quickly select components that are not contiguous in the canvas. Selecting multiple components is a fast way to configure the properties that are common to all components.

   

5. Preventing Components from Being Selected

   Locking a component fixes its position and size, and prevents the component from being selected in the canvas. A common example is locking a background image to prevent it from being selected while selecting other components placed on top.

   To lock a component, select it and click the Lock Position button in the Editor toolbar. A locked component is indicated by an italicized name in the Component Listing, and by the red selection handles in the canvas.

   

6. Positioning Components

   When positioning a component, you have three options: mouse, keyboard arrows, and component properties. The option you choose depends on the granularity of the move, and, to a large extent, your personal preference.

   To position a component with your mouse, select the component and drag. By default the component moves in five-pixel increments. To move it in one-pixel increments, press Ctrl while dragging. To position a component using the keyboard, select the component and press any of the arrow keys. By default, the component moves in one-pixel increments. To move it in five-pixel increments, press the Ctrl key. To move it in ten-pixel increments, press the Shift key. Finally, you can use the X and Y properties in the Position + Size group to specify a position for the selected component.

   

7. Organizing Components with Containers

   The Container component “contains” other components in a parent/child relationship.

   You add components to the Container by dragging them inside its borders. In the Component Listing, the added components appear as children of the parent Container. Because of this parent/child relationship, Container properties such as Visibility, X, and Y are automatically applied to its children. Also, when you use the alignment tools with a single child component, the alignment is performed relative to the Container border instead of the Canvas border.

   The Container component is particularly useful when configuring states. For example, suppose you want a collection of components to appear as a pop-up when clicking a button. You have two options: you can configure the visibility for each component in the collection, or you can place the components in a Container and configure just the Container visibility.

   

8. Changing the Component Stack Order

   Components are stacked as they are added to the Editor canvas. The default stacking order is given by the order in which components are added, with the most recently added component on top. The component on top of the stack appears on top of (overlays) other components in the design. The exceptions are the navigation components, which always display drop-downs and fly-outs on top so they are not obscured. The stacking order is displayed in the Component Listing, with the most recently added component at the bottom of the list.

   To change the stacking order of a component, click the Send Backward button or the Bring Forward button in the Editor toolbar. The component’s position in the Component Listing changes accordingly. For example, suppose you want to include a background image for an existing design. When you add the Image component, it overlays all other components because it’s the most recent addition to the design. In this case, you want to send the component backward so the image appears in the background.

   

9. Interacting with Component Functionality

   When you add components to the Editor canvas, by default you cannot interact with their functionality as you would in the Prototype screen or when viewing the design in a browser. Instead, you interact with components by selecting them, dragging them to a new location, configuring properties, and so on.

   To interact with component functionality in the Editor, click the Interactive Mode button in the toolbar. This mode provides an easy way to test the functionality of your components. For example, you can display navigation subpages, select radio buttons, and verify state behavior. While in interactive mode, a yellow border is displayed around the Editor canvas.

   

10. Correcting Mistakes

    Suppose you add lots of components to a Container by mistake, or duplicate the wrong clipping, or reduce the size of an Image component to 0-by-0 pixels. You can quickly correct these mistakes by using undo and redo. Undo reverses an action, while redo reverses the last undo. ProtoShare stores an unlimited number of actions related to using components such as adding, deleting, and configuring. Note that the action history is deleted when the Editor is refreshed. The Editor is automatically refreshed when you add certain components such as Grid View and any of the page navigation components, and when you assign a template. You can also manually refresh the Editor by clicking the Refresh button.

    To undo an action, click the Undo button in the Editor toolbar. To redo an action, click the Redo button in the Editor toolbar.

This week marks ProtoShare's second year out of beta.

When ProtoShare 1.0 launched it was the first wireframing and prototyping application available as a web-based solution. It opened the door for development teams to collaborate with stakeholders on website and web application projects to gain better feedback in a timely manner.

Now, thousands of users and interactive development projects later, ProtoShare continues to help shape the wireframing and prototyping industry with version 3.9. For this accomplishment, we say "Thank you!" to all our users for your continued support and feedback over these past two years.

We look forward to celebrating more birthdays with you.

Best,
The ProtoShare Team

From a Project Manager's point-of-view, what can be done to combat these pitfalls and help your team deliver better projects on time and on budget? In this post, I'll cover some of the common causes of interactive project setbacks as well as how to avoid them. My findings stem from my own experience as a project manager (PM), as well as anecdotes compiled from other colleagues' experiences.

7 Common Causes of Project Setbacks

1. Lack of Information – from the client and from you
2. Multiple Decision Makers
3. Scope Creep
4. Loss of Feedback for Requirements
5. An Undocumented Process
6. Project is Rushed to the Final Build
7. Use of Incompatible Technologies

How to Avoid Project Setbacks

As a project manager, you should know what's going on with your project at all times: where it is, how each stage affects it, and how to mitigate any foreseeable risks before they happen. At the same time you must also manage relationships with your client and your internal team. (Note: In some companies, the Account Manager and Project Manager are two separate roles, in which case, you should learn to work together and communicate often to collectively avoid these problems.)

Lack of Information

Many clients you will work with are unaware of how much requirements analysis and work is involved in the process of creating websites and web applications. As the PM, part of your job is to help educate the client on how much information you need from them throughout the process, how last-minute decisions or changes affect the budget and timeline, and to understand his role in the process.

When a project begins, you will need to gather as much information as you can about your new client/project. Sit down with the salesperson that sold the project to find out how the process went and if the salesperson promised any features or functionality not in a "typical" project.

Next, sit down with the client and introduce him to your process and needs. This can also be done through a conference call. I've also sent out an orientation survey in advance to learn more about the client, the problem he wants to solve, project goals, the audience, future plans, etc. Find out what he expects of you and tell him what you expect from him during the process, like how often and through what methods he wants to be contacted.

Multiple Decision Makers

Unless you are working with a small company, it is not often that you get to work directly with the head decision maker (DM). Ask who the main DM is and what role your contact plays. A former colleague of mine once worked with a client that said he was the one to be working with him on the website project. After the entire website was completed and ready for delivery, the client showed it to the real DMs and they hated it. Needless to say, the blame fell on our company to salvage the relationship and their budget was blown out of the water for re-work. My colleague's contact was the liaison to the real DMs, but failed to inform the PM of his role. The PM also failed to ask.

Another scenario of multiple decision makers is when your contact is working with a committee of DMs. Be sure your client contact understands he is to facilitate and manage this committee so you are not bombarded with requests from multiple people that all want different things. They should vote by consensus or have one overriding DM.

Scope Creep

Scope (or feature) creep happens with most projects. Some teams prepare for a little scope creep by building in budget and timeline buffers, but you should minimize scope creep as much as possible. Communication, as with any of these setbacks, is the most important aspect to avoiding scope creep.

If a client asks for an unplanned feature, ask him why he wants to incorporate it. Uncovering the motivation for a request will help you target the real issue. If it's an extraneous request, simply discuss the (lack of) ROI that it involves and that it doesn’t address the target goal. If it's a reasonable request and a benefit to the project, inform the client you need to speak with the development team about creating a new use case. You also need to learn how long this new feature would take and that you will contact the client with an estimate since it is outside the original scope.

Loss of Feedback for Requirements

In some way or another, it has happened to me and my colleagues: losing an email with a client request or answer or forgetting to write down important information in the project documentation after a phone call.

When you misplace or forget information important to a project, the client feels unimportant. If it's a question that needed to be answered and you forgot the answer, you have to call the client back to get that answer. It could also be a request that you missed entirely and the client notices it is missing in the prototype or the final product, so your team has to make adjustments after the fact.

You should have a single location to post client or other stakeholder feedback regarding a project (ProtoShare is a good tool for this). This way, the information is immediately shared with stakeholders and reflected in the requirements documentation. Stakeholders input their feedback directly into the application so you cannot lose it. You can also directly type in feedback while on the phone with the client, so he can verify you have captured his feedback accurately.

An Undocumented Process

If your team does not follow the same process for each project you undertake, you will miss information that is important to the successful completion of the project. I find it helpful to create a checklist for each step in my company's development process to ensure that no steps are skipped.

This checklist may physically follow the project from one department to another or be tracked in your PM software. Be sure task owners mark off their items when completed and that they don't try to cut corners. Good organizational skills are very helpful to making sure you can manage multiple projects successfully.

If you currently do not have a process documented for creating websites or applications, sit down with your team and create one.

Project is Rushed to Final Build

An anxious client, tight deadline, and not following a process (as listed above) can all contribute to a project being rushed to final build before it is ready. Be sure to set expectations with your client, understand all the elements the project is to address, and share this information with your client.

Also, stepping through your documented process is important; that's why you have a process. For many development teams, these steps tend to include Research, Project Objectives, Personas & Use Cases, Requirements, Site Map, Sketch, Wireframe, Design, Prototype, Test, and Build. The client may not be involved in each step, but he should know why you conduct each step thoroughly. If any one is missed or rushed, then the project will be off target and require expensive re-work.

Use of Incompatible Technologies

This issue is related to Lack of Information. You will need to learn who the client's end users are and what systems or technologies they use so you can ensure what your team creates will work on their systems. You don't want your team to use coding techniques that don't render well in browsers used by the client's audience.

There's also nothing worse than writing an application in a way that does not integrate with a key system the client uses at his company. Ask him what systems they use and if they plan on changing systems in the near future.

In Summary

There are many reasons why website and application projects fail. However, with the right planning, good processes, good tools, and constant, open communication, you can effectively manage a project to its completion and make your clients happy.

Here are some other resources you may find helpful:

• Web Site Development Process - The life-cycle steps
• The Site Development Process
• 45 Incredibly Useful Web Design Checklists and Questionnaires
• IT Toolkit Forms, Checklists, Templates and Scorecards

Tom Holce, 1929-2010

37Signals co-founder Jason Fried published an article in INC. titled Managing Conflict. It's a good look at conflict and how it can be beneficial if managed properly. He also gives a few examples of how they actually handle conflict management. One thing that stood out for me was:

...we try to get real with things as quickly as possible. For us, real means something we can all look at -- a picture, a sketch, something visual. Until everyone's looking at the same thing, it can be hard to reach actual agreement. Five people may read the same paragraph, but they often interpret the words differently. But when you look at a picture, a mockup, people are more likely to reach agreement -- or valid disagreement. Whichever way they go, at least we know where they actually stand, not where we think they stand. Pointing at something real cuts through to the truth.

I agree with this wholeheartedly. At Site9, one of our mantras is: "prototype early, prototype often." It can be more beneficial to quickly build small sections of a larger prototype in order to answer questions as they arise rather than hold all questions till the complete prototype is finished. Some ideas need a lot of structure in order to make decisions, but a lot of ideas don't. If you want to show what a nav bar will look like, or some logo treatments, you don't need the whole page. Better to get the ideas out and in front of people and make decisions.

I recommend reading the whole article as it has a some great advice on how to handle the times when you can't avoid conflict and you have to choose one side or the other.

When creating prototypes, one of your primary considerations is their level of fidelity. As described in a previous blog post, there are three dimensions of fidelity: visual fidelity, functional fidelity, and content fidelity. And for each dimension, your prototypes can be low fidelity, high fidelity, or something in between. For example, you might create gray-screen prototypes with minimal interactivity and placeholder text, or highly interactive prototypes that use a precise color palette and production-ready images and text. The best solution for you depends on your prototyping goals and your audience.

One way to enhance visual fidelity is with styles. Because ProtoShare generates prototypes using HTML and CSS, you have complete control over their colors, fonts, and other visual aspects.

I've had the opportunity to put the visual fidelity capabilities available in ProtoShare to the test for several Professional Services clients. Working from detailed design specifications, I could easily include their corporate colors, background images, and fonts, and create complex navigation with a completely customized look and feel. Several of the CSS techniques I used are described in the case studies below.

• Changing the Default Rich Text Property Values
• Overriding Rich Text Heading and Link Styles
• Changing Button Font Styles
• Assigning Images to Navigation Styles
• Targeting ProtoShare Page Content
• Using the Latest and Greatest with CSS3

How to Include Styles in ProtoShare

All components use pre-built styles by default. You can modify existing styles and add custom styles by configuring component properties or by using the Styles screen. For the Rich Text component, you have the additional option of creating inline styles using its HTML editor.

Component Properties

While working in the Editor, you can apply a few basic styles to components. The styles are available in the Appearance group of the Properties tab, and are meant to take your design to the next level of visual fidelity beyond simple boxes. The available properties depend on the specific component, but generally include opacity, border style, fill color, and stroke color. Anybody comfortable with using the Editor can apply these styles, and knowledge of CSS is not required.

The Properties tab for the Rich Text component is shown below.

The Styles Screen

If you want to create custom styles, use the Styles screen. The Styles screen contains the global style sheet for your project, and styles created here are available for all components within a project. The exception is the HTML Sandbox component. In this case, you must define inline styles using the component's content editor.

The Styles screen is shown below.

You specify the styles using the standard CSS syntax. Precede class names with a . (dot) and IDs with a # (pound). All components have at least one default class name. You can use that class name to define CSS rules for all components of a given kind. You can also define additional class names or an ID for each component in the Mark-up group of the Properties tab in the Editor.

Some components, especially those in the Page Navigation group, make extensive use of pre-built styles. To modify these existing styles, you can use third-party browser add-ons (such as Firebug for Firefox) to discover the CSS rule of interest, and then include your modifications in the Styles screen. You can also display the ProtoShare default style sheets using your browser's View Source command while viewing a design. You can find most of the relevant styles in viewer.css.

Case Studies

Changing the Default Rich Text Property Values

All components have a collection of properties that are configurable through the Properties tab in the Editor. The properties are organized into groups, and the Appearance group includes the main properties related to component styles such as opacity, border thickness, and stroke and fill color. Configure these properties to suit your design goals. If you want to make more extensive changes, use the Styles screen.

For example, I want to configure a Rich Text component that's part of a footer clipping. The design goals for the footer state that its constituent components will not include borders or padding, and that the footer will include a background image.

The property configuration is shown below. Note that the fill is transparent so that the background image can be seen through the component.

Overriding Rich Text Heading and Link Styles

With the Rich Text component, you can format text, create links, include images, create tables, and more. The component uses the popular TinyMCE WYSIWYG editor. This editor supports a wide range of formatting options such as headings, font type and size, text and background color, and lists. The default formatting is specified by pre-built ProtoShare styles. For example, headings and paragraphs use sans-serif fonts, and links are rendered in the prototype using bold, gray text.

I want to modify the heading font size and render links using different colors for all Rich Text components in my project. I can do this by adding CSS rules to the Styles screen. Because this is a change that will be applied to all Rich Text components, I'll use the default class name, which is available in the Mark-up group of the Properties tab.

The CSS rules are shown below.

h1 {font-size: 2.4em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.2em;}
.RichText a {color: blue;}
.RichText a:visited {color: purple;}
.RichText a:hover {color: blue;}
.RichText a:active {color: black;}

If instead, I wanted to change the styles for a single Rich text component, I'd define an ID, a unique class name, or specify inline styles using the Rich Text HTML editor.

Changing Button Font Styles

The Button component is part of the Form Elements group. You can specify the text that's displayed in the button using the component properties, but you cannot modify the font properties using the Editor. Instead, you must use the Styles screen.

I want to change the font properties for a single Button component. To do this, I'll define the ID formSubmit in the Mark-up group of the Properties tab, and then specify the CSS rule in the Styles screen.

If you use just the ID selector when creating the CSS rule, it will not be applied. This is because ProtoShare defines Button component styles using the button HTML element. You wouldn't necessarily know this without examining the appropriate pre-built style sheet, which is viewer.css in this case. When you encounter a situation like this, and you're sure the CSS syntax is correct, you should determine how the the pre-built style is defined.

The CSS rule is shown below.

#formSubmit button {
     font-family: "Courier New", "Lucida Console", Courier, monospace;
     font-weight: bold;
     font-size: 1.5em;
}

Assigning Images to Navigation Styles

One of the most powerful features in ProtoShare is the ability to quickly build clickable prototypes. Using purpose-built components, you can display Site Map pages as breadcrumbs, jump menus, header navigation, subnavigation, and more. In particular, the horizontal and vertical navigation components provide you with tremendous flexibility. These two components are highly configurable and allow you to create just the right navigation experience. However, with this power comes complexity, and changing the pre-built styles can require a little extra effort depending on the task.

As you might expect, the navigation is rendered as an unordered list. Each list element contains a blockquote element, each blockquote contains a table, and each navigation link is contained within a table cell. Including links in a table is somewhat unusual, but is necessary to make the navigation work in all supported browsers and in the application. Also, each link state has an associated class in ProtoShare. For example, a normal, unvisited link has class x_inactive, while a visited link has class x_active.

The following CSS rules assign an image to the link, the link hover state, and the active link, respectively. You can use these rules to create an icon menu, for example.

#NAV.subNav ul li td {
     background: transparent url(/Assets/bgArrow.gif) no-repeat scroll 10px 12px; 
     width:150px; 
}
#NAV.subNav ul li td a:hover {
     background: transparent url(/Assets/bgTriangle.gif) no-repeat scroll right center; 
     color:#fff; 
}
#NAV.subNav ul li blockquote.x_active td {
     background: #A79E8C  url(/Assets/bgArrowOpen.gif) no-repeat scroll 10px 12px; 
     color:#fff; 
}

Targeting ProtoShare Page Content

Sometimes, the easiest way to define project-wide styles for page content such as text, hyperlinks, images, tables, and lists is with the tag. However, if you use the tag in the Styles screen, you might change the styles used by the application as well as your page content. To avoid this problem, ProtoShare includes a special class and ID protoshare-body, which allows you to access only the ProtoShare page content.

For example, to change the font family used in your designs (including table data), while leaving the application's font unchanged, you can create the following CSS rules.

.protoshare-body, .protoshare-body td {
     font-family: "Trebuchet MS", Helvetica, Jamrul, sans-serif !important; 
}

Using the Latest and Greatest with CSS3

With the introduction of CSS3, features such as round corners and drop shadows are now easy to create for developers targeting Mozilla and Webkit browsers.

You can incorporate these styles into your designs using the Styles screen. For example, the following CSS rules allow you to add round corners and drop shadows to components.

#roundCorners {
     border: 1px solid #666;
     -moz-border-radius: 1.5em;
     -webkit-border-radius: 1.5em;
}

#dropShadow {
     -moz-box-shadow: black 0.5em 0.5em 0.3em;
     -webkit-box-shadow: black 0.5em 0.5em 0.3em;
}

Summary

By including the appropriate level of visual fidelity in your prototypes, you can deliver just the right experience, and get answers to questions more quickly.

Because ProtoShare generates prototypes using HTML and CSS, you have complete control over their visual fidelity. If you're comfortable using the Editor, you can evolve your prototype beyond simple boxes by configuring component properties. If you have CSS knowledge, you can use the Styles screen to create custom styles.

The best solution for you depends on your prototyping goals and your audience. Using ProtoShare, it's easy to produce the desired look and feel from gray-screen prototypes, to visually stunning designs.

These issues have affected our main website, blog, and customer forum. Access to these areas is slow, and at times, intermittent. Our team is working diligently with our network provider to address these issues and ensure a smoother website experience for our visitors.

In the meantime, you can contact us directly with questions, comments, support, or even sales and trial inquiries. Here's how:

• Support Questions: support [at] protoshare.com
• Billing & General Account Questions: customerservice [at] protoshare.com
• Sales Inquiries: sales [at] protoshare.com
• Video Tutorials can also be found on our YouTube channel
• You may also follow us on Twitter: @ProtoShare.

Fidelity refers to how closely a prototype resembles the final solution. There are multiple dimensions of fidelity, and prototypes can lie anywhere on the spectrum for each of these dimensions. Depending on the stage of the design process and the goals of the prototype, select the appropriate fidelity for each of the following: visual fidelity, functional fidelity, and content fidelity.

This is a key concept in maximizing productivity when prototyping. ProtoShare can handle different levels of fidelity, which makes it nice for evolving a prototype, but it also means there can be a temptation to over design at any given stage. As Cerejo says, to prevent this temptation, keep the goals in mind at all times. The prototype is always a means to engage in discussion and get answers to questions, not an end goal in itself.

Cerejo also lists out Dos and Don’ts for successful prototyping. Some very good points are listed. One of them is particularly germane to ProtoShare:

Don’t prototype features or functionality that cannot be implemented—often an issue with software package implementations. When in doubt, confirm with developers before starting.

Because ProtoShare is built using HTML and JavaScript, the components available for building prototypes are all real HTML constructs. If you need to show something really custom, we provide a Flash component, Image components, and even an HTML sandbox component where you can code anything you want (I like experimenting with HTML5 with it). But using the “regular” ProtoShare components like RichText and Navigation you won’t build anything that developers can’t easily code.

There’s a lot of other great information in this article, including the importance of collaboration and listing of helpful resources. I highly recommend you take a few minutes to read it.

Portland, Ore. – June 15, 2010 – Site9, Inc., developer of the industry’s fastest growing collaborative prototyping tool for websites and web applications, today announced the release of ProtoShare 3.9. Primary upgrades are a redesigned collaboration interface for prototype reviewers and improvements to the clippings functionality in the wireframe editor.

Reviewers of interactive projects, often stakeholders or clients of the project, will now access a website or web application prototype with fewer steps through a cleaner, more intuitive interface. The update allows reviewers to experience and collaborate on the prototype more easily, thereby providing better feedback for development teams. “The simpler Reviewer interface helps people focus on the wireframes, not the tool. We look forward to using it with our clients to get them involved in the review process sooner,” said Chris Adams, Senior Art Director of Rolling Orange.

Prior to the release of ProtoShare 3.9, clippings were simply a grouping of components used as mini-master templates throughout the prototype. While popular, developers had issues when updating or changing a clipping. In ProtoShare 3.9, the clippings are now tied to a single source, allowing developers to edit the source and cascade the changes to all related clippings in the prototype, providing an instant update throughout the prototype. “I’m excited about this release. Being able to instantly update the same content module placed on multiple pages will be a huge time-saver,” added Adams.

In addition, developers can now quickly access their clippings in the Editor’s palette, reducing the number of steps needed to access them, and accelerating the workflow in the prototyping tool.

“When it comes to advancing ProtoShare, we listen to the needs of our customers,” said Site9 CEO Andrew Mottaz. “The updates in ProtoShare 3.9 were popular requests so we knew we had to make them happen. The improvements really do enhance workflow for developers and project engagement for reviewers. Together they result in a better and faster prototyping and collaboration process, and that makes our customers happy.”

A few weeks ago, a graduate school professor sent me this video (shown above) that I want to share with you. This TED presentation by Tom Wujec really clarifies the value of prototyping and collaboration, and why an iterative process is important for teams.

In his research, Wujec found that the majority of teams go through the following process:

Because the main objective is not addressed until the final minutes of the challenge – at which point the structure often collapses – team members are now in crisis mode, scrambling to fix the structure. Through this process, they tend to fail when the deadline hits.

Successful teams, however, tend to follow this process:

Essentially, they are prototyping the marshmallow structure through an iterative process. This process not only results in successful freestanding structures, but also results in some of the tallest structures.

The Marshmallow Challenge is important for companies and individuals to understand the value of prototyping in a simple, hands-on way. The iterative process allows people to uncover hidden assumptions in design and development projects. Teams can make it to the finish line with a stable, functioning structure/end product within the specified timeframe, thereby reducing mistakes and crisis modes at the last minute. Any of this sound familiar?

Other video highlights

• Recent business school graduates perform the worst because they are trained to find the single correct plan to make the structure stand. (Statistically, as a new MBA graduate, I’m doomed.)
• Architects and engineers perform the best. (Hopefully, this is self-explanatory.)
• Recent Kindergarten graduates perform the second best because they don’t vie for power and get started with the iterative process right away. (Ah, naïveté.)
• CEOs perform better when they have executive assistants on their teams to act as project managers and manage the process. (Thank goodness for assistants!)

Take aways

• Prototyping uncovers flaws, assumptions
• Don’t wait until the final minutes to address the main objective
• Teams need someone to facilitate the process
• Don’t let age fool you; consulting a Kindergartner may give you new perspective

You can run a Marshmallow Challenge in your office! Visit the website for more information. And the next time someone asks “Why do we have to prototype?”, remind them of the Marshmallow Challenge. If you do partake in this challenge, be sure to share pictures and feedback with us.

Andrea Fidel
Director of Mktg. Communications

What do Reviewers see pre-3.9?

When Reviewers sign-in to ProtoShare the first thing they see is the Project selection screen. After they open the project they want, they see a screen like this:

We received a lot of feedback that this screen was too distracting for the average reviewer. Reviewers didn’t know what to focus on and tended to get frustrated.

What will Reviewers see in 3.9 and after?

We took a first step at fixing this in ProtoShare 3.8 with the streamlined View Design mode. In ProtoShare 3.9, we are making this the only mode Reviewers see.

Now when a Reviewer signs in, they see this:

Furthermore, if the Reviewer is only a member of one project, they will bypass the Project selection screen and go directly to the screen above after logging in. They can even take it a step further and completely hide the ProtoShare toolbar by clicking the right-most button.

Once hidden the toolbar can be brought back by hovering over the same right-most area and clicking on the button that appears.

Not just different, more powerful

Just because the Review UI is less busy doesn’t mean it’s less powerful. All of the existing panes are available using the toggles in the ProtoShare toolbar. In fact, you can even toggle on the Page Documentation, which you couldn’t do before. With all the panes open, Reviewers will see this:

How will this change affect my Developers and Reviewers?

Developers can see this mode if the click the View Design button in the Design toolbar in Prototype Mode.

For Reviewers, this is the only mode they will see now. If your Reviewers are used to the old view in Prototype Mode (first screenshot up at top), it may take them a few moments to realize which buttons show which panes. All the toolbar buttons have tooltips that appear on hover, and Prototype mode and View Design mode use the same icons. We don’t think it will take Reviewers too long to adjust to this new view. In fact, we believe Reviewers will feel much more comfortable with this view and they will be able to concentrate on reviewing and giving feedback.

Our internal teams, and everyone who’s tried this, love it. Once we started using the improved View Design mode, we found that we all switched over to it for reviewing content. Let us know what you think.

What are clippings?

A clipping is a saved group of components that can be pasted into a layout. For example, by combining a few Rich Text components and an Image component, you can create a clipping for a generic eCommerce category page that includes a product title, a product image, and a product description.

How do clippings work currently, pre-3.9?

Currently clippings are simply copies. When you paste a clipping, the clipping is copied and placed in the layout, and does not keep any connection to the original clipping. If you then change the source clipping, the pasted copy does not update.

How will clippings work in 3.9 and after?

With 3.9, pasted clippings are tied to their source. When the source is updated, the pasted instance of the clipping will also update. If you have several instances of that clipping, they will all update. This behavior is consistent with how templates currently work. And just like templates, you will have the option to detach a clipping from its source to make it static, non-updating.

What will happen to my existing clippings?

IMPORTANT: After the 3.9 update, all clippings in your Library will become “by reference” when pasted. Clippings you have pasted previous to the 3.9 update will not be “by reference” since they were actually duplicated and placed into the layout. No connection remains to the source clipping. If you want these legacy clippings to update with their source, you will need to re-paste them into your layout.

What do clippings look like in 3.9?

The screenshot below shows the Clippings tab in the Library. Note that selected clippings now show where they are being used.

The next screenshot shows a selected clipping in the Editor.

Clippings are treated like basic components such as Box or Image and appear in the Component Listing as a single component. You cannot manipulate the contents of a clipping in a layout. If you need to do so, either edit the source clipping or detach the clipping from the source. Detaching the clipping from the source will copy the individual components in the clipping into the Editor where you can edit them. On the Editor Canvas, clippings are differentiated from other components by the smaller selection block. The Properties pane clearly identifies the clipping and has options to edit the source or detach (and stop updating from the source). All component properties apply to clippings.

Clippings in the Palette

Another change for 3.9 is when you create a clipping, it will appear in the component palette in the editor. To add a clipping instance to a layout, simply drag and drop the desired clipping from the palette. This makes using clippings very easy. Clippings are created the same way they are now: by selecting a group of components and choosing File > Create Clipping from Selection, or by going to the Library page, Clipping tab and creating a new clipping directly.

Are you currently using clippings?

A good candidate for a clipping is any group of components that you need to be the same across pages, but needs to be in a different position on each page. For example, footers and sidebars are natural clippings. Since clippings can be imported from other projects, they can be useful in creating a company catalog of reusable components. Create a project called something like “Company Standards” and create any company-wide clipping there (you can put shared templates in the project, too). Now you have a way to jump-start new projects. Just remember that when you import clippings from another project, they are duplicated in your new project. Clippings do not remain linked between projects, only within a project.

Coming soon

ProtoShare 3.9 is coming in the first half of June. We have just started our formal testing phase and so far it is going smoothly. This “clippings by reference” feature is something we have been wanting to provide for a long time. We’re excited to get it to you. Let us know in the comments if and how you currently use clippings and whether this new capability will be helpful.

This year’s conference is also celebrating its 10th anniversary with a party and some unusual events like a look at the future of bicycles, and a ukepalozza (a ukulele extravaganza).  Webvisions will also showcase the talents of many industry experts, including keynotes from Luke Williams, Agnieszka Gasparska, and Merlin Mann.

Find us at Booth #101 in Exhibit Hall E. Stop by, meet our team, and learn what’s in store for upcoming releases of ProtoShare.

We look forward to exploring the future of the web with you!

Portland, Ore. – May 12, 2010 – Site9, Inc., developer of the industry’s fastest growing collaborative prototyping tool for websites and web applications, today announced the unveiling of a new brand identity and website. In addition, engineers moved ProtoShare hosting to the cloud. The moves set the stage for a more flexible, scaleable, and better performing ProtoShare.

The rebranding initiative comes after Site9 announced the expansion of their executive team and the release of ProtoShare 3.8. The application has evolved from serving small shops to also meeting the sophisticated needs of enterprise users.

“After record sales growth in 2009, we’re looking forward to accelerating our momentum. The new brand is sleeker and more modern, representing a more mature product,” said acting COO Charlie Burrows.

In addition, ProtoShare’s website was completely overhauled to complement the rebranding effort. Searching through content and solutions is much simpler than before. Up-to-date product information, new tutorials, and an enhanced blog and user forum further help customers find the information they need.

To keep up with ProtoShare growth, the move to the cloud allows ProtoShare to add more resources to better serve customers. Early benchmarks have already reported a 30+% increase in performance improvements.

“We’re very excited about the progress we have made over the past two years,” said CEO Andrew Mottaz. “ProtoShare is a highly evolved product and it’s time that our image caught up with the rest of the application.”

ProtoShare offers an unlimited free 30-day trial on all their plans. Readers can visit the website to see the new look and learn more information about the changes made.

We’ve been working hard on a major re-branding effort in addition to further development of ProtoShare. Our engineers and marketing staff have been locked down in the office (with coffee and donuts, of course) working mightily to get these efforts completed; so unfortunately, we will not be exhibiting this year. But one of our founders and VP Marketing, Blake Johnson, and COO, Charlie Burrows, are attending and would love to meet you, hear your stories, and share with you all our upcoming advancements. Contact me directly (andrea at protoshare.com), or at 503.248.4440 x122 if you would like to meet with Blake or Charlie at the conference.

This year’s conference is focused on Platforms for Growth, highlighting ways companies are continually changing the way we use the Internet. This is an important topic to us because ProtoShare is a web-based tool that’s changing the way companies and organizations carry out the website and interactive application development process. We’re working with companies to move their requirements processes from paper documents and/or a static specification to a visual, collaborative, iterative approach between teams and stakeholders, thereby reducing project misunderstandings, rework, and cost.

This will be another great Web 2.0 Expo. We hope to see you there.

P.S. Don’t miss Raven Zachery, our friend and office mate, present on the iPad and mobile computing.

Andrea Fidel,
ProtoShare Marketing Intern & MBA student at University of Portland

PORTLAND, Ore., April 8 /PRNewswire/ — Site9, Inc., developer of the industry’s fastest growing collaborative prototyping tool for websites and web apps, today announced that it expanded the executive team and also secured additional growth capital. The moves come in preparation for ProtoShare’s accelerated growth in the website and web application development market.

Charlie Burrows was elected to the Board of Directors and appointed as acting COO. His primary focus will be to rapidly expand the global distribution strategy. Mr. Burrows comes from the software and financial services industries and brings with him 30 years of senior management experience. “What attracted me to Site9 was the people and its product, ProtoShare. The company is very well positioned to ride the interactive prototyping wave. ProtoShare’s unique combination of product attributes against price effectiveness have made it the fastest growing prototyping tool in the industry,” said Burrows.

Josh K. Chaney, formerly the Director of Sales, was promoted to Vice President of Sales. He’ll oversee the national and global sales of the ProtoShare software. Prior to joining Site9 in October 2008, Mr. Chaney spent eight years in technology sales and sales management in the Bay Area. “I look forward to taking on this expanded role at Site9,” said Chaney. “The rapid growth we’ve experienced over the past year reflects the interactive market’s need for a more efficient and collaborative process. A large part of my role will be to build awareness and give teams a chance to experience the difference for themselves.”

To further growth through increased marketing and sales, Site9’s existing investors provided the company additional growth capital. Burrows, Chaney, and Site9 Marketing VP, Blake Johnson, are working together on an aggressive new marketing campaign that includes a complete corporate branding refresh as well as an increased international presence.

“The new executive additions and the growth capital position us for a great 2010,” said Andrew Mottaz, Site9 CEO. “It’s exciting seeing how quickly the interactive industry adopts ProtoShare once they’ve used it and seen the value. As a result, getting ProtoShare in front of more people through marketing and sales is where we want to put our focus this year.”

Release 3.8 is coming this weekend, April 3rd! Sorry for the short notice, but we’ve been busy testing and fixing little bugs. In an effort to streamline ProtoShare, 3.8 has several workflow changes. First, the Projects management screen has changed.

Here are the New Tabs:

Projects

My Projects has merged with Account>Manage Projects and is now called Projects. Projects are now in a sortable grid. Active projects are listed above archived projects (grayed out to indicate archived). Most importantly, the default sorting of this grid is last-opened for the current user. If you work with a lot of projects, this is a huge help.

Also, when you select a project you can now invite users directly on this screen using the People tab in the right-hand sidebar.

Project Entitlements are now shown in this page’s footer.

Here’s what all these changes look like:

People

Account>Manage Users is now People. Again, information is now in a sortable grid. Information about your licensed user and reviewer counts is now shown in the page’s footer. If you’re a Billing Manager, the Manage Entitlements button will take you to the Billing Info page so you can adjust your user count.

Here’s what it looks like:

Account Settings

Account>Settings has been moved up a level to Account Settings. The content remains the same.

Billing Info (visible by Billing Managers only)

Account>Billing has been moved up a level to Billing Info. The Billing Info page now has a link labeled Need Help Changing? which leads to detailed help on managing your user entitlements.

Inside Projects

Once in a project, things are a little different, too. Here’s the changes:

First up, the Site Map now has a trash can! Yay! Previously deleting a page was not recoverable. Now pages are first moved to the trash, then the trash can be emptied whenever you want. To recover a page, simply drag it out of the Trash.

One of the biggest changes is to the View Design mode. This mode was kind of an afterthought when we originally made ProtoShare, but we decided to beef it up after hearing from so many customers that this was their preferred mode for reviewing wireframes.

View Design mode now has a toolbar at the top to allow easy access to ProtoShare functions you may want during review:

This toolbar can be collapsed using the X button to completely remove the ProtoShare UI. It can then be expanded using the ProtoShare icon that appears on hover, as seen in the animation below.

The toolbar contains toggle controls for the Site Map pane, the Discussion/Annotation pane, the Filmstrip pane, Discussion pin overlay and Annotation pin overlay. Also there is button to place a Discussion pin or Annotation pin (if you are a Developer). This button will put you in single-click pin placement mode. Just click where you want a pin to go. No more creating a pin and dragging it out of the upper-left corner.

Once we moved these buttons to the toolbar in View Design mode, we thought it made sense to move them in the Prototype mode as well, so the Prototype toolbar now looks like this:

Another difference is the right-hand Discussion/Annotation pane is now closed by default. If you click on a a discussion or annotation pin, the pane will automatically open. This gives you a little more space for the default view.

We use ProtoShare as part of our daily routine and I have to say, once we put these features in place, it just felt right. I’m sure you will feel the same way. The release is scheduled for this weekend. Once you have a chance to try out the new features, leave a comment here and let us know if you like them, or what you would like to be different. Thanks!

Peter Uchytil
ProtoShare Product Manager