Welcome to the ProtoShare blog.

Why should you prototype?

I was directed to an interesting blog by Scott Adams, creator of Dilbert.  In addition to writing comics, Scott works with startups in Silicon Valley.  I’ve thought a lot about the fact that software and web development projects are subject to instant, global competition.  The tech and tools and infrastructure available to build web and mobile apps has advance so much in the past 5 years, that the barriers to creating software, deploying it in an affordable and highly scalable environment are almost gone.  Today I can write a node app for heroku, deploy it on the free tier and release it into the wild.  If it takes off, I can scale it with a single mouse click.

So what makes the difference between successful businesses and projects and unsuccessful ones?  Well – Scott Adams has some answers in this blog post.

I find two quotes really interesting in this article — first:

Building a product for the Internet is now the easy part. Getting people to understand the product and use it is the hard part. And the only way to make the hard part work is by testing one psychological hypothesis after another.

And second:

Psychology has evolved to be a function of speed plus measurement. We’re nearing the point at which the best psychologist in the world is any computer with access to Big Data, and any start-up that is rapidly testing one idea after another.

For me, this drives home the need to prototype and visualize early.  When we prototype, the driving idea is to make ideas concrete and testable as quickly as possible.  Internal testing of early prototypes, user testing of more refined prototypes, and continuous iteration and exploration of ideas bring flaws, missed functionality, and new ideas into the process quickly – much more quickly than even the fastest coder can iterate.  And the process opens up this ideation and exploration phase to less-technical users.

We’ve had customers tell us that ProtoShare helped them knock 3 months off of a 4 month project.  When I hear these stories, the critical ingredient is getting involvement and engagement early from a team, and making sure that the project meets the needs of all of the stakeholders and users.  You can make many of your mistakes, and gain an understanding of the user’s psychology in the prototyping phase of a project rather than in the more expensive and time-consuming production phase.  Let me know your thoughts on Scott’s post, and get experimenting with ProtoShare!

Posted in Industry, Prototyping Benefits | Leave a comment

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.

 

Export

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