Welcome to the ProtoShare blog.

Prototyping using SVG in ProtoShare

So we were researching the other day exactly what we could do in ProtoShare to make better use of the facilities of SVG.  SVG, or Scalable Vector Graphics, is markup based vector graphics support for the web browser that’s supported in every modern browser, IE back to IE9, and Android from version 3 onward.   As we worked on this, we realized that we already have a good amount of support for SVG, and I thought it would be a great time to let you know how to take advantage of SVG in ProtoShare, and why you should.

As far as why you should use SVG, there are many articles you can read to answer this question.  The main thing I like about using SVG’s in prototypes is that it provides you with easy-to-use, completely scalable vector graphics.

We used SVG to create our really useful set of svg-based icons.  Because these are svg, you can scale them to any size without worrying about resolution problems, and, because SVG is markup based and can respond to scripts, you can use ProtoShare’s appearance settings to change their colors, and even add hover and click styles.

ProtoShare Modern UI Icons

ProtoShare Modern UI Icons are Scalable Vector Graphics


You can also use your own SVG images in ProtoShare – just drag and drop them onto the canvas, and they will show up just like any other images.  The added benefit is that you can scale them up or down without any loss in resolution!  Here’s an example with the famous SVG Tiger:

SVG Tiger

SVG Tiger

At any rate, we are looking into adding additional support, so that you can paste and script your own SVG images in ProtoShare.  If you have any thoughts on what you would like to see supported, please let us know!

Posted in ProtoShare Tips & Tricks | Leave a comment

Guide: Interacting with designs

Verifying that your designs flow and function the way you’d like them to is key when creating interactive wireframes. ProtoShare offers a variety of options for Editors to test interactivity in a way that best suits their workflow:


Test button found above the canvas

Test button found above the canvas

Test Mode

Test Mode is available from within the editor view and allows you to test on click events as well as hover, right click and double click events. This feature goes hand-in-hand with the different appearance settings available to you in the Inspector and also allows you to test the fly-out interactivity that is built into navigation related components. You can also use Test Mode to interact with controls like radio buttons, form fields and even the file upload component.

Run Mode button

Run button found near the Share menu

Run Mode

Run Mode is also found within the editor view and includes all of the functionality of Test Mode with the added functionality of following links. The Run button is found to the left of the Share menu above the canvas. Run Mode opens your designs up in a new browser window and the chrome or ProtoShare UI is removed. In Run Mode, you can follow custom links as well as test the functionality the links built into navigation components.


Share Menu

Share Menu showing the Open in Review option

Review Mode

Review Mode is separate from the Editor and is very similar to Run Mode. Functions available in Run are included in the functionality of Review with additional collaborative features. You are encouraged to create discussion topics and leave comments for other users while in Review but you can also test out your interactions as needed. Another feature that separates Review from Run is that you have access to the ProtoShare UI inside Review but you can hide it at will. You can use the Pages menu to manually select different pages or you can navigate by clicking on topics which will load the design the topic is pinned on.



Creating an HTML Export allows you to test the functionality of designs while offline or share your designs with someone who is outside of ProtoShare. You can trigger states, follow links and interact with form type components from an HTML Export. Export options are found in the Page menu of the Pages Tab or by right clicking a page from the Pages Tab. To create an Export to Web, be sure to check the Publish To Web Option from the Export options menu. Keep in mind that any feedback will need to be collected outside the tool as the Review UI is not included in a Publish to Web export.


Export Options Menu

Export Menu showing Export to Web option

Best Practices

All in all, you have many options and workflows available to you while testing interactions and navigation functionality in ProtoShare. A best practice workflow may include using Test to interact with components within the Editor, using Run to test links, then moving on to Review Mode to share your designs with others. Creating an Export to HTML will be handy for any time you’d like to test features while offline or if you’d like to share your designs with a stakeholder who isn’t a ProtoShare user.

Posted in Blog, ProtoShare Tips & Tricks, ProtoShare Workflows | Leave a comment

Uploading Assets with Drag & Drop

Building a library of assets is an important step in creating the right wireframe. You can upload an asset via the Library tab, but a quicker and easier way is to Drag & Drop our files directly onto the canvas from your computer’s desktop, file browser or another web browser window.

The dropped file will begin uploading immediately, and a new component will be created on the canvas at the drop position. If you uploaded an image, you will see your image on your design and can begin to edit it. Other assets files will create a hyperlink component that will link directly to the asset.

Files uploaded via Drag & Drop are automatically stored in the Library within a folder labeled with your username. This folder appears as a sub-folder to the main asset folder.

Dragging and dropping assets directly from your computer will save you valuable time during the creation of your wireframe.


Posted in Blog, ProtoShare Tips & Tricks, ProtoShare Workflows | Leave a comment

Prototyping with Web Fonts (and Icons!)

This is an update to my earlier post, Prototyping with Google Web Fonts. A lot has changed in the time since I wrote that article, both in ProtoShare, and in web design.

In addition to using custom fonts to make text more interesting, people are also creating custom fonts that contain entire sets of scalable, high-quality icons. This article from The Next Web has a rundown of some great ones. We’ve recently made some changes to ProtoShare that make them easier to use than ever.

To demonstrate, I’ve created a design that uses both a stylized text font and an icon font (and no images):

Blast Off with ProtoShare 9.4

Styling the Text

For the text, I used Rock Salt from Google Fonts. Adding this font to a ProtoShare project is easy:

  1. Find a font you like on Google Fonts. (For example, type “Rock Salt” into the search field).
  2. Click the “Quick Use” button for that font.
  3. Copy the “@import” CSS code (not the “Standard” or “JavaScript” code):

    Rock Salt Quick Use

  4. Paste the CSS code at the top of your project style sheet:

    Adding "Rock Salt" to the Style Sheet

That’s all it takes. You can use this font in every design in your project.

  • To make it the default font for all text in your project, apply it to the body element with a line (after the @import rule) like body { font-family: "Rock Salt", cursive; }.
  • To apply the font to an individual component, choose it for the “Font” setting in the component inspector, just as you would choose any other font. ProtoShare automatically finds these fonts in the style sheet and adds them to a “Google Web Fonts” section in the list.

Creating the Icon

For the icon, I used the “rocket” icon from Font Awesome. Adding Font Awesome to your project is also easy:

  1. Find the URL for the Font Awesome style sheet on the BootstrapCDN. You won’t be using the entire link that’s shown on that page. Instead, create an @import rule using just the URL from the href, like:
    @import url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
  2. Just like with the text font, paste this CSS code top of your project style sheet:

    Adding "Font Awesome" to the Style Sheet

Once Font Awesome is added to your project, you can create icons by adding special class names to components. Although you’ve always been able to add class names to components, in ProtoShare 9.4 you can now add class names to the inner “content” element of a component. This allows the icon to be styled using the appearance settings, and it’s what we’ll use to create our icon:

  1. Since the icon is created as text using a special icon font, we need a text-based component. A good starting point is the Heading 1” component because it doesn’t have many appearance settings applied, and it auto-sizes to fit its content. Drag a “Heading 1” from the palette to your canvas.
  2. Select the component, and the in the component inspector, find the “Mark-up” section. Add the class names for the icon using the “Content .class” field. For the rocket icon, I used fa fa-rocket:

    Creating a "Rocket" Icon

  3. Now that the icon is in place, you can delete the placeholder “Heading 1” text.
  4. Since the icon is just text, your can style and resize it using the “Text” appearance settings:

    Styling and Resizing the Icon

Taking it Further

I hope you find these techniques useful. The ability to import custom style sheets into your project is a really powerful feature of ProtoShare. With the additional id and class name fields in ProtoShare 9.4, we’ve added flexibility that allows you to truly take advantage of these imported style sheets.

Styling text and creating icons only scratches the surface of what’s possible, though. There are lots of “CSS libraries” out there that can be used by simply importing a style sheet and applying some class names. Do you have any favorites?

Posted in Blog, ProtoShare Tips & Tricks, ProtoShare Workflows | Leave a comment

ProtoShare 9.4 Release

We’re pleased to announce the release of ProtoShare 9.4 on Sunday, May 4th. ProtoShare 9.4 includes some of our most-requested features, as well as some bug fixes.

To prepare for this release, we’re extending the maintenance period on Saturday, May 3rd to start at 7pm and end at midnight. (It normally runs from 10pm – 11pm.)

Here are some highlights of what’s new:

Copy Pages (and Designs) Between Projects

ProtoShare has always supported copying library items, like templates and masters, between projects. Now you can copy pages and designs between projects as well.

Copying pages works much like copying library items: Select “Import” from the “Page” menu, find the pages or designs you want to import, and drag them to your project.

Here’s a short video demonstrating this feature:

More Browsing Options in Review

When reviewing designs in ProtoShare, in addition to browsing active designs and browsing designs by name, there is a new option that combines the two. Using this new option, when you click a link from one page to another, you will see either the design with the same name, or if there isn’t one, the page’s active design.

Here is a (slightly longer) video which we hope will make this feature clear:

More Helpful Component Outline

As part of our efforts to make closing and re-opening designs as seamless as possible, the component outline now remembers which containers were expanded, and which were collapsed. Even if you don’t work with deeply-nested designs, using a few top-level containers to group your components into sections can make editing easier. Now when you re-open a design, you can pick up right where you left off.

Content Element Styling

The “Mark-up” section of the component inspector has gained a few new settings. The two existing fields, “#id” and “.class”, were renamed to “Wrapper #id” and “Wrapper .class”, since they apply to the component’s outer element. The new fields allow you to specify the id and class names for the component’s inner “content” element, like a Button component’s inner <button> element.

Small Changes and Bug Fixes

  • When viewing a design on an iOS device, hidden content would sometimes mask visible content.
  • Increasing a component’s font size via the spinner now starts at the correct size.
  • In the editor, you will be notified if another user takes editing control.

Posted in Blog, ProtoShare Tips & Tricks, Releases | Leave a comment