4

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.

3
  • guess {width=*} might work for 2nd column.. Commented Aug 6, 2012 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
    Commented Aug 6, 2012 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. Commented Aug 7, 2012 at 9:00

3 Answers 3

6

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.

2

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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