Strategies for complex UI development

Strategies for complex UI development

  
I have a complex UI that is causing the WYSIWYG editor to be very diffult to use.  Below is a screenshot of my current situation, where I am trying to create a layout:



This page has a somewhat complicated structure.  Among other UI features, it uses SnapJS to have drawers slide out from the left and right.  These drawers have placeholers on them that end up overlapping with the placeholders on the base part of the page.  There are also some CSS rules that are being a bit mistranslated in the WYSIWYG, which causes some incorrect placeholder locations.

Are there any strategies to develop with this sort of complex user interface?  I tried breaking up the layout into other web blocks, but things are still overlapping.
First of all, rethink your UI.
seriously, so many placeholders, then you are probably creating something not very UserFriendly

Second, use your css wisely.
assign classes to the placeholder, if you not already done that.
in your css, you will do the following for example:
.PlaceholderTitle {
   -servicestudio-display: block;
   -servicestudio-width: 500px;
   -servicestudio-background-color: #ff0000;
}

this will override the "runtime" css and will show the title as shown.
this will unclutter your design a little bit better.

Thanks for the response Statler.

My UI is fine, I do not have that many placeholders.  The clutteredness is an illusion due to how the drawer overlaps with the base page.

Thanks for the information about the ServiceStudio CSS--I'm going to use the special -service-studio-* tags to manually move things around to unclutter the view.  My only worry is that this makes a larger disconnect between what the WYSIWYG shows and what the browser renders.