Rapid Website Wireframing and Prototyping With ProtoShare

Wireframing and prototyping are two very vital aspects in web design. They take away ambiguity and guess work from the design equation. Moreover, with a detailed wireframe model lot of rework can be eliminated leading to increased productivity of web designers, which in turn leads to increased profitability.

ProtoShare is an online, collaborative, website wireframing and website prototyping tool that helps designers transform their ideas to usable design.

Overview

Used by popular companies like 3M and Sony, ProtoShare is a tool with a great reputation. Throughout their homepage, the makers of the web app make it their mission to emphasize how productive and profitable ProtoShare can be for your business. Statistics like how it helps to cut total project cost by an average of 30% and accelerates time to market by 40% are sprinkled generously.

Overview

Overview

If you still aren’t convinced, then take a look at the Return on Investment (RoI) page dedicated to explain how the app benefits all the members of a team, its impact when combined with Waterfall methodology of design and more. ProtoShare is by far the only web app I have come across that tries so hard to educate a potential customer about the value of their offering with statistics and data. Of course, the only way to know if it’s really valuable to you is to give it to give it a try!

Pricing

ProtoShare has three different plans starting from $29. While you can sign up and start using the app immediately if you choose their Standard or Professional plans, to evaluate or sign up for the Enterprise plan, you will have to contact the sales team. Apart from the enhanced features like exporting to various formats, multiple views and custom branding, number of users per account, storage space etc. are the major differentiators between the Standard and Pro plans.

Pricing

Pricing

You can sign up for a free 30 trail period to check if the app meets all your needs. Credit card information has to be submitted, but if you cancel before the end of the free trial, your account won’t be charged.

Getting Started

Once you validate your email, you can set a password and access the app. A thorough Getting Started screen will welcome you after logging in. For those with less patience and some prior experience with wireframing, the Twelve things about ProtoShare item will introduce the app in a nutshell. If you plan to dive a little deeper, check out the video tutorials.The developers have gone the extra mile putting together solid tutorials that cover all major components of the web app.

There is an example ecommerce wireframe waiting for you to get hold of all the features of the app. It’s a great way to learn the ropes, but you can start with a new project if want to build a design from scratch.

Dashboard

Creating a new project isn’t a demanding task. All you need is a name and the project will be created for you. All projects open in a new tab and this should help those who are working on multiple projects.

A New Project

A New Project

A spacious two column layout offers a lot of screen real estate to build an ambitious project. The left column is where the control and command center lies. All the vital aspects of a design – pages, page designs, views and elements – are organized in their own sections. On the right side is the dashboard.

Dashboard

Dashboard

The dashboard keeps track of the project status and tasks assigned to you. From here you can stay on top of all the tasks you are responsible for and if you have sufficient permissions, you can invite others to join the project too.

Ease of Use

Every new project is created with three pages and if you want more, you can add them anytime. Double click the page you want to edit and it will open as a new tab right next to the dashboard. From here, it shouldn’t be too hard to get the project going. The app is very intuitive and the sections on the left pane are neatly organized avoiding confusion for first time users.

Creating a Wireframe

Creating a Wireframe

Drag and drop elements from the Component Palette and start updating their dimensions and properties from the properties Window. From appearance to alignment and actions, every property of a component can be defined using this window. Use the Library feature to save and reuse design elements and full templates.

As I mentioned earlier, from this point on its such a breeze to bring an idea to shape. The app is so intuitive and you will find your fingers (the mouse pointer) reaching for components one after another with such ease. Almost all design elements known to mankind – from menus to scrollbars and forms -there is everything you need to get a fully functional prototype ready.

Collaboration Options

Hit Review at anytime to see the design in its real glory. In the review mode, the website is full functional and you can see that all components working the way they should be.

Collaboration

Collaboration

Once you think you are ready and it’s time to bring a fresh pair eyes to evaluate the design, invite the team members to have a look. All discussions occur in real time and hence lot of email back and forth is eliminated.

A Sample Wireframe

A Sample Wireframe

Final Thoughts

From brainstorming to creative review to building the webpage ProtoShare does it all. Realtime collaboration throughout the entire process from a central location is an icing on the top. From drag and drop elements to complex CSS and HTML coding abilities, the app serves both beginners and veterans well.

Even with multiple windows and projects open, the app didn’t put strain on my computer’s memory or processing power. If I were a web designer, I would definitely go with ProtoShare.

Share Your Thoughts!

What do you think of ProtoShare? Are there better alternatives available?


Summary

ProtoShare is an online, collaborative, website wireframing and website prototyping tool that helps designers transform their ideas to usable design.

8

Responses

Add Yours
  • Justin,
    Thank you for your kind review of ProtoShare! (And thank you to the AppStorm community for requesting a full review.)

    We work very hard to incorporate best practices into the interactive development process and sharing our knowledge, experience, and customers’ experiences with others. The ProtoShare blog is a great place to discover tips, tricks, and that knowledge, for anyone interested in learning more.

    We are also open to product feedback as it helps us drive our roadmap and improve our application. Customers can contact us with any questions or comments.

    Best,
    Andrea
    @ProtoShare

  • This seems interesting, but also seems like it would only be helpful for static websites. Any website driven by a CMS or shopping cart has pre-defined CSS and HTML areas and must be designed accordingly. I don’t know how flexible this would be instead of just doing the comp in Fireworks and then changing your CSS code for a CMS? Anybody have experience doing that?

    • Hi Tim,

      Other users may have more to add to your question, but ProtoShare is actually great for sites that have a lot of interactivity. CMS sites and shopping carts are still based on templates. In fact, the example project included with each account/trial is for a bookstore and includes a shopping cart.

      And if you need to do more than basic wireframing you can add stylesheets using CSS, create rich interactions with states, or add your own custom components (there are many libraries out there) to incorporate more advanced functionality with CSS, HTML & Javascript. Here’s a topic on advanced interactions.

      Hope that helps!