Welcome to the ProtoShare blog.

Responsive Web Design Breakpoints

I read Responsive web design: the war has not yet been won on Elliot Jay Stocks’ blog recently. He’s an experienced web designer, and knows a thing or two about responsive web design. A central point of the article is that responsive design is not just about adapting your design to the sizes of different devices. It’s about finding those points where a given design breaks down and adjusting it so that it works again. He writes,

Introduce media queries only when it [feels] natural to re-adjust the content. … If you adjust your design when it looks right, you won’t have to worry about retro-fitting your media queries for new devices.

Responsive web design is continuous, it is analog. It is about creating a design that works well at every size. If you set your breakpoints at specific device sizes with no consideration for the nature of your design, you can easily end up with a design that fails at an intermediate size. It makes validation of your website much more difficult because you have to check the design at every possible pixel width to make sure that it works.

Either that, or you just ignore the issue, and hope no one ever makes a device with a different screen size.

Instead, if you introduce breakpoints where the design breaks down, you have essentially already validated the design at all sizes in between your breakpoints.


Read more about how ProtoShare can help you create prototypes for responsive web design.

Posted in Blog, Industry, Prototyping Benefits | Leave a comment

Minimize Design Investment with Prototyping

One of the primary benefits of using a tool like ProtoShare versus coding a UI prototype is that it allows you to iterate much more quickly on a design idea. This is particularly important in the early stages of a design, when new requirements are emerging in near real-time, and major changes are needed fast. Wireframe design and application prototyping should be quick and easy, not something that slows you down.

Without the ability to quickly pivot and present several alternative approaches to your stakeholders, designs can begin to feel constrained by the prototype itself, and the risk of delivering a compromised final user experience will likely increase.

With a coded prototype, these design constraints are often imposed by the technical limitations of the chosen development framework, but you must also consider the increased cost of making changes, as well as your developers’ reluctance to throw away something that they have become highly invested in.

Furthermore, the notion that you can save time and money by re-using prototype UI code in your final product must be weighed carefully against the reality that writing production quality code requires planning, intense concentration, and often unexpected amounts of time to get minute details working. Until you are fully committed to a design concept, there is a great risk in jumping into a specific implementation early on in your design process.

When we conceived of ProtoShare, one of our main goals was to create a tool that would minimize design investment while still providing a project’s stakeholders with enough fidelity to experience a concept as if it were “real”. We wanted to be able to make rich, tangible, interactive designs, without focusing on the technical details that often lead to over-investment in immature solutions.

While many of our customers report a reduction in re-work and accelerated development times, we are always looking for ways to make ProtoShare even faster to use and more accessible to new users. The reality is that even when using a code-free prototyping tool, achieving high levels of fidelity and modeling complex interactions still takes time and attention to detail. Anything we can do to further reduce design investment, will result in faster iterations and ultimately greater returns.

Wireframe Stencils

Wireframe Stencils

Recognizing this, we have recently launched an updated version of our online Wireframe Stencils Library. With this new library, we now offer users thousands of pre-built elements that have a high level of fidelity and/or interactivity baked-in. Using these building blocks can greatly reduce the amount of configuration, and thus design investment, required to deliver a compelling design idea to your stakeholders.

The new Wireframe Stencils Library is also much easier for us to manage and update. If you’d like to see items added, or need enhancements to existing elements, please don’t hesitate to contact us!

Posted in Blog, Prototyping Benefits | Leave a comment

Taking Advantage of ProtoShare’s Project Home Page

By default, every new ProtoShare project includes several pages, including a root page named Home. You may have noticed that this page cannot be deleted or moved.

Project Page Tree

Project Page Tree

Instead of using it as a home page for their projects, many ProtoShare users create a new sub-page to act as the root or landing page of their projects and page trees. However, the Home page should not be overlooked, as it can come in handy for certain workflows.

Here are some lesser-known usages of the default Home page:

Project Thumbnail

My Active Projects Thumbnail

1) The active design on this page is the thumbnail used for the project in the My Active Projects tab. If the design is left blank, a default thumbnail image is used instead.

2) The Home design can be used to track project-wide objectives, criterion and other specifications. Placing some text components that outline goals on this page is a step in the right direction.

3) Sometimes Reviewers need a place to leave feedback that isn’t related to a specific page or design. The Home page is perfect for tracking discussions that relate to the project as a whole.

4) Adding Live Views as additional designs on the Home page is an easy way to store project-wide ideas and/or inspiration.

Custom Navigation with Home

Custom Navigation with Home

5) It’s easy to include the Home page design in your navigation components. By default, navigation components include top-level pages, but Home is excluded.

To include Home, select the navigation component on your design and then open the Inspector. The Inspector can be opened by right clicking the component and selecting “Get Info” or by clicking the Inspector button in the toolbar.

Page navigation or “Pages” in the Inspector is automatically set to “Top-Level Pages”. Click on “Top-Level Pages” and then select “Custom” at the bottom of the dropdown list. Shift select Home along with other pages that you want included in the navigation, then drag them into the “…custom pages” section in the Inspector.

Hopefully these tips will help you and your team to organize your project ideas and keep your projects moving forward.

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

ProtoShare Tip: Adding a Google Drive Spreadsheet

With Google Drive, you can create your own spreadsheet that you can share with others. Using an iFrame component in ProtoShare, you can add a live view of your spreadsheet which can be edited in real time (if the user has editing permissions).

The easiest way to allow any user to be able to view the spreadsheet is to set the Share Settings to allow those who have the link to view it. This will allow any user who views your design in ProtoShare to also see the content of the spreadsheet. If they are signed into Google and you have allowed them to have access to the spreadsheet, they will also be able to edit it real time from within ProtoShare using Test or Review mode.

Setting up a live view of your spreadsheet in ProtoShare is very simple. First, place an iFrame component onto the canvas. Next, right-click the iFrame and select Get Info which will open the property inspector for it. Place the URL for the spreadsheet into the Source URL field. You will now see the iFrame change to display the page with the spreadsheet.

This Spreadsheet Needs Room to Breathe

Since a lot of the menus for Google Drive are based on the viewing area, you may not see your spreadsheet right away (Google will usually give you a message saying to resize your browser window). You will want to increase the size of the iFrame until your spreadsheet is completely viewable.

The Finished Spreadsheet

Once you are satisfied with the viewable area, you may want to make the spreadsheet more presentable by placing it into a container and cropping just the spreadsheet itself.

This will allow you to have an interactive spreadsheet for your design. Remember to be signed into Google and have permission to make changes to the spreadsheet if you want to edit it.

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

Lean Day UX

Just got back from a fantastic trip to NYC attending Lean Day UX. A bunch of great speakers in the morning was followed by an afternoon of paper prototyping and user testing.

ProtoShare was proud to be a sponsor of this event, and as I went through the paper prototyping exercises in the afternoon, it made me really appreciate the benefits that ProtoShare brings to the table.

Paper prototyping has some advantages: it’s relatively fast and can be done anywhere with minimal equipment. The drawbacks of paper prototyping for me were: difficult to revise and iterate, somewhat awkward user interactions, and incompleteness of the prototype. While paper prototyping a mobile app, we built pop-ups to drop on the sheet when a user clicked, we also built number pickers and date pickers, and tried to add many other layers of fidelity, with mixed success.

In spite of these drawbacks, paper prototyping can be incredibly valuable. Why? Because it gets your work in front of end users quickly. The feedback we got from crude paper prototypes challenged, validated, and illuminated our thinking on the problem we were trying to solve.

And all of these things are what I really love about ProtoShare. Sharing is fast, easy and built into the tool from the ground up. But with ProtoShare, iteration is fast and easy too. If I want to modify something, it takes a second. I can share with end users with the click of a button. I can view and interact with mobile prototypes on my device. And I can build popups, transitions, click states, and the other higher fidelity aspects that get end users more engaged with no more effort than a paper prototype. I can also show alternative design possibilities, modify the prototype on the fly in response to feedback and much more.

Thanks again to Jeff Gothelf, Neo and everyone else who made Lean Day UX happen. I know they’re planning more — so make sure to be at the next one!

Posted in Blog, Events, Industry | Leave a comment