Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Is there a common visual language (symbols) to highlight what parts of a web page that should be fixed or flexible when you're doing wireframes?

For example - a web page consists of two columns. One left column for the menu and one column for the content. I want to show that the menu column should always be 200 pixels wide regardless of the screen width and the width of the content column should be set in percents and adapt to the screen.

share|improve this question
    
guess {width=*} might work for 2nd column.. –  CodeJack Aug 6 '12 at 9:41
    
I'm not convinced that wireframes need to be responsible for explaining this. I can maybe see situations where it is, but for the most part, wireframes are meant to communicate content and information architecture. This sounds like interaction design, which is best left to prototyping. –  DA01 Aug 6 '12 at 20:27
    
I agree that you might not want to specify exact how wide the columns should be. That is something that the web designer should decide. –  Tony Bolero Aug 7 '12 at 9:00
add comment

3 Answers

To my knowledge there is no convention to communicate this. When I've developed mockups where I want to show static widths I've used the same approach which is also used when showing widths in blueprints.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Experience has showed me that this is understood well and the viewer has always drawn the conclusion that the left panel is always X pixels wide and the right resizes.

share|improve this answer
add comment

or (alternatively to excellent answer given) if they don't need to know exact pixels for fixed parts but just need to know which parts are fixed and which aren't. you could devise some wide/thick arrows within the fluid regions, which would indicate the fluidity of those regions only.

share|improve this answer
add comment

I'd use the spacer (or "spring") syntax from GUI editors:

spring in QT editor

(image credit: developpez)

I'd say there are three alternatives: I'd vote for the dotted line, as it's easier to draw in OmniGraffle (my tool of choice), but you could also draw a real spring:

flexible space alternatives

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.