Greets, I'm designing a productivity web app (a desktop mouse-based app) which base layout is the traditional header (logo + tabbed menu), body area and a footer. The content of the body area changes dynamically as the user selects a different menu option, and each different body page can have very distinct layouts, as you can see by these wireframes: Body Page 1: http://pasteboard.co/MSgORX4.png Body Page 2: http://pasteboard.co/MStNtNs.png So, I ask you how should I manage the negative space, fonts and the dimension of the boxes when each body page has a different layout, in order to achieve a consistent design. The boxes mostly contain text and buttons. What are the best pratices and design approaches for this situation? For example, should I use a rigid and fixed layout for the different body pages? How to make the size of the elements of each page proportional? NOTE: the design does not have to be responsive and I cannot use frameworks like Bootstrap or alike. I am not looking for tools, I am looking for what design concepts and best pratices should I follow in order to achieve a consistent design for all the body pages. Cant wait for your insights! Thanks.
Well use an CSS framework like Bootstrap, which takes care of the consistent padding, margins and even layouts. They have a thoroughly thought out grid system, which makes it even mobile ready.
Thanks for your reply, but I cannot use any web framework like Bootstrap. I am more interested in what design concepts and best pratices should I follow to achieve a consistent design for all the body pages, and for this, the use of a framework like Bootstrap does not help to solve my challenge.
Define default values for the tags, and then use local overrides for specific classes and ids within the layouts. So you end up with a style sheet that supports the default part of the layout, and an uses local styling with classes and ids to target the pieces in the dynamic part of the layouts. It is very common for sites to have at least sections where there is an alternate layout, and that is the common practice for quality reliable presentation. It sounds like the design creates a lot of work because every page has a different layout, but if you want to do a design like that then you don't have any option but writing a lot of detailed styling. One thing you absolutely want to avoid is using scripting to screw around with presentation. That make the app bloated, slow and difficult to maintain. That is about as much as I can give you without knowing the completed details of the formal requirements.