Updatable way to do screens with overlapping GUI elements



I have a long standing issue that I am trying to find a fast and feasible solution or work-around to. Will illustrate by a concrete example.

I am designing a web application. I am making a home page. I have an aside panel that I want to use. You click a button on the right side of the home page and the aside shows up on top of the home page, covering only the right side of the page. So at any time, I am able to still see some of the home page behind the aside that is the main element that I will be interacting with once I “open” it.

This is work in progress, so content of the home page will change throughout my design iterations. How I am currently doing this:
step 1. make home page in a mockup - we;ll call it Home Page
step 2. clone home page mockup and then add aside panel on top of it - we’ll call it Home Page with Aside
step 3. link the two mockups together.

Obvious problem: when I make changes to Home Page, I have to then go in again and make the same changes in Home Page with Aside. Problem grows exponentially depending on how much interaction you have.

What can I do? Is there a way to overlap GUI elements without nasty duplicates? :slight_smile: Workaround, anything?


Two ideas.

First would be to make use of symbols so you do not need to make the same changes every time.

Secondly there is a trick to “abuse” the markup feature. Leon illustrates it in this tutorial:


Hey. Thanks for the suggestions. Unfortunately second will not work for me because I need to share the prototype with other people through email etc and have it as reference, not just keep it within balsamiq.

With the first option, we get into another issue. You can’t nest symbols. So then that makes life particularly difficult to apply these things to a page.

I now remember that this is actually the reason why I left Balsamiq and started searching for another tool :frowning: I’m back now because I still love it and it’s unparalleled in speed, but I think it’s making life very hard for me right now.