To add additional tabs to your tabbed panel, you will need to add new values to your current state and content for the new tab.

You can add the additional values to your state by accessing the Property Inspector for the Horizontal Tab Navigation component. In the Inspector under Navigation, you will find the attached state. Select the Edit State button and insert your new values to create the additional tabs.

Once you have the new tab in your navigation, you will need to create content to display when that tab is selected. You can either make the new content out of new components or make a copy of one of the placeholders.

To make a copy of the placeholder content, you will start off by ungrouping the three content boxes that came with the tabbed panel. You can ungroup components by right-clicking the content and selecting Ungroup.

Now that you have ungrouped the content boxes, copy and paste to create another content box and change the visiblity for the new content box to only be visible when the new tab (or state value) is selected. You will now have sucessfully created a new tab in your tabbed panel.

For additional help, you can check out our tutorial video on how to make a tabbed panel.

Responsive Web Design

First, what is Responsive Design? Well, there are many responsive JavaScript frameworks, led by Twitter’s Bootstrap, that tend to define Responsive by the enabling technology:

• Media queries to set CSS styles based on what screen size is accessing the website
• A flexible grid-based layout that uses relative sizing
• Flexible images and media, through dynamic resizing or CSS

But defining Responsive based on the implementing technology is a mistake. Technologies are means to an end. I prefer the thinking of future friendly. Device capabilities and screen sizes are evolving and will continue to change. Responsive is a technology that allows you to build sites that will continue to work well during this evolution.

If you define Responsive as designing and developing websites in such a way that they provide a high-quality user experience on a wide and growing range of devices, then Responsive Design is the next big thing, and it’s going to be around for a long time.

Mobile First

OK, so if Responsive is the next big thing, why mobile first?

I’ll point you to the authoritative article by Luke Wroblewski, but to summarize: Mobile is growing incredibly fast; mobile forces you to focus on what’s important; mobile expands your capabilities ( with things like GPS, device orientation etc. ).

Mobile-First Responsive Design with ProtoShare

How does prototyping fit in with Mobile-First Responsive Design? One important point about Responsive: It’s more work than just designing a website. You can’t just design a desktop site, build it with a Responsive framework and expect great results. The basics of UX have not changed. You have to pay attention to the user experience.

Given that UX still matters, our basic Responsive philosophy is “prototype the breakpoints“. Here are the steps we recommend when doing Responsive Design with ProtoShare:

1) Start by prototyping one of your mobile breakpoints. As you build this, focus on the experience you want small screen users to have. Iterate on this. Get it as close to complete as possible.

2) Duplicate the design and rearrange elements to make the next larger size. Using ProtoShare’s multiple designs per page, you can view these side by side. Annotate intended experience differences between this breakpoint and the previous breakpoint.

3) Rinse and repeat.

How many breakpoints do you need to prototype? It really depends – how many are there that had substantive differences? In my experience, the minimum is usually two. The first is small screen mobile, which almost always needs different navigation from even small tablet sizes, and the second is “desktop” ( which is often very similar to tablet ). By starting with a mobile screen, prototyping and getting the experience right, and then moving on to larger breakpoints, you can really highlight the important differences between device experiences.

Some people lean toward just doing the prototyping in HTML in a Responsive framework. The reason I think this is usually a mistake is that you’re then putting the technology, as opposed to the user experience, in the driver’s seat. Prototype to get the experience right, then use the technology to implement the vision.

ProtoShare’s Multiple Designs Per Page

Because of ProtoShare’s multiple designs per page function, you can build out and experience the different breakpoints as you go. You can compare breakpoints side by side to highlight and discuss differences. As we saw above, you can view the various breakpoints on the target device.

If you use a consistent naming standard ( as above 960 Wide, 320 Wide ) for the design, you can use ProtoShare’s browse by name function in the Review interface to browse through a set of prototypes.

Summing Up

Designing for Responsive requires effort. Don’t expect the technology to solve your UX problems for you. By starting with mobile, prototyping the breakpoints, and iterating through the prototypes, you will get better results, eliminate expensive rework and create a shared understanding with your team. Read “Should You Go Responsive” for more information.

Are you using ProtoShare with Responsive? Drop us a line and let us know what you’re up to!

The main thrust of the article is that creativity is a lot of work, we tend to take the path of least resistance, and we hate to second guess our decisions or rework anything that seems done.

This article reminded me of the answer to a question we get a lot lately — the question is “Why shouldn’t I just use Bootstrap ( or Foundation or some other framework ) to do my prototyping?”  The answer I give to this question is two-fold:

First, although you can get something created very quickly with Bootstrap, when you start making changes, you can get bogged down in the HTML, CSS and JavaScript.  Depending on your level of expertise, the difficulties here can be prohibitive.

The second part of the answer is due to cognitive bias.  Once you build out your prototype in Bootstrap or another framework, you can create a huge amount of lock-in, or what is called Cognitive Bias in the article above.  Responsive frameworks provide solid default answers to many different design questions.  The bias comes from a feeling of  commitment on the part of the designers, developers and others based on the previously expended effort.  It’s hard to change paths once you’ve started down a road, and you won’t even consider major changes or completely different approaches.  In short, you start with a set of constraints that negatively impacts your creativity.

We recently completed a Bootstrap based redesign of ProtoShare.com, and by keeping our prototyping in ProtoShare until we answered the design and ux questions ourselves, we were able to get through the design and UX process very quickly, and then when we started to build using Bootstrap, we had a pretty clear idea of what the final outcome would be.  ProtoShare achieved its goal of eliminating huge amounts of rework by letting us focus on quick, highly-flexible iterations during design and ux followed by longer iterations ( some in ProtoShare and some in code ) after we started development.

As always, I’d love to hear your experiences with this.

ProtoShare Advisory Board Member Steven Fisher at UXPA Boston

Thanks to everyone who participated in my talks at UXPA Boston and WebVisions Portland. As well as a big thanks to all of the organizers!  Both of my talks were about Lean UX and bridging the gap between UX and Development.  You can see my slides here, and a summary of the UXPA Boston discussion here.  As always, it’s really the quality of the audience participation that makes these talks rock.

Don’t miss the next CHIFOO Portland. This ProtoShare sponsored event includes free food, drinks and admission! Check out more info on our ProtoShare News & Events page.

And congratulations to our giveaway winners too!

UXPA Boston ProtoShare Winner

What is your favourite Cloud Based Web / UI Prototyping tool?

Anyone have any answers they’d be willing to contribute to the thread on LinkedIn?

Andrew Mottaz, the founder and creator of ProtoShare will be hosting a FREE, mid-day mini-workshop on Lean UX. The workshop will be held on Wednesday, May 22nd from 12:30-2:00pm.

In the workshop you will learn about treating design ideas as hypotheses, and how to replace giant spec docs with a shared understanding.

Space is limited for the workshop, so Register Now using your Facebook or email account to ensure you will have a spot! If you are interested in attending the full WebVisions Portland conference, you can purchase tickets here.

You can also come by to check out our booth: ProtoShare will have an area for attendees to test out our software and get to know some of our team. Stop by to meet us and find out why prototyping will improve your process by saving you time and money.

See you next week at WebVisions!

I can tell you from personal experience as an angel investor that it can be difficult for an investor to grasp a business idea in the abstract. Unless I can see what the founder has in mind for a software product, it can be all too easy to dismiss the idea because of a lack of understanding. If I can see and interact with a prototype of the software, it’s usually much easier to grasp the idea and get behind it.

Until the founder successfully raises their angel funding round, they usually won’t have the ability to build the actual software product itself – that’s why they are out raising money. But ProtoShare costs only $29 a month. In a few weeks (and sometimes over a weekend), the founder can create a functioning prototype and be out on the fundraising trail. It’s a very small investment that can significantly improve the odds of a successful fund-raise.

If the fundraising effort is a success, this will be the best money the founder ever spent. And if the start-up doesn’t get funded, at $29 a month, the founder has spent under $100, rather than tens of thousands on actual software development.

I guess the surprising thing is that we don’t see more customers like this.

As a project manager in the digital marketing world, I have led numerous website redesign projects and know how important visual specifications are to improving the overall process of a redesign.

At past companies I used PowerPoint to create website wireframes and although it works for very basic wireframes, the visual and interactive interest was practically non-existent. When I used PowerPoint for wireframing navigation and layout, there was always a lack of visual specification that had to be made up for in written specifications.  In order to protect ourselves from scope creep, we had to include a laundry list of items that were not included in the project.

With ProtoShare, everything is readily visible and you can wireframe from low to high fidelity quickly. I put together a low fidelity wireframe and created multiple design layouts for each page that I then shared with my designer. The designer added fidelity to the layouts, proposed alternatives, and suggested changes. By working together and iterating quickly, we made rapid progress in the design phase.

ProtoShare lets you work your way up to a high-fidelity prototype that looks and acts like a functional website. It also keeps all of your team’s work (final designs for each page, comments on designs, annotations and more) all in one place – making collaboration and requirements tracking a streamlined process.

As a relatively new member of the ProtoShare team, I was sold on the technology before we even started the project. I cannot begin to express how invaluable a tool like ProtoShare is to the design process and wireframing of a website. Simply put, the tool made our redesign process faster, easier, and more enjoyable.

To make things even better, when the project was turned over to our developers, there was no confusion about what to build and everything they needed was right there. I can honestly say, from first hand experience – ProtoShare creates happy clients and happy teams.

ProtoShare Sweeps the Floor with Axure in iRise Analysis

If you put “ProtoShare” into Google, a paid ad from iRise comes up, offering a comparison of iRise to ProtoShare and other prototyping tools.  Being a curious sort, I recently requested the report.

Not surprisingly, in iRise’s report, iRise does rather well, with green dots beside every attribute the report deems important.  iRise is an expensive, enterprise-class application (and it was their report), so that didn’t come as much of a surprise.

What did come as a pleasant surprise was how well ProtoShare stacked up against iRise in iRise’s report, and, even more importantly, how we blew the doors off Axure.  Here is the report, courtesy of iRise.

Out of the 26 attributes iRise considered important, the report says that ProtoShare has 13 (6 fully and 7 partially), while Axure has only 8 (and all of those only partially).

We might quibble about some aspects of iRise’s report, and I note that iRise did not even include the latest version of ProtoShare in its analysis.  Nevertheless, iRise’s report certainly serves as an unbiased summary of how ProtoShare stacks up against Axure, and for that, we say “Thank You iRise.”

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.