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? Workaround, anything?