I should probably preface this by saying I'm not much of a designer, but it has fallen to me to design a webpage.

Now my webpage has various components on it, each corresponding to different features of the website. Certain features only make sense in relation to other features (eg. an Answer on Doctype only makes sense in relation to a Question). Now these features in question are the most important information on my site and what I'd like to do is make them more visible.

To extend my analogy imagine if I was redesigning Doctype but I wanted to make Answers more visible. Clearly an Answer needs the context of a question, but at the same time I want the information it contains to draw the attention of the user.

Note: I'm not suggesting we redesign doctype I'm merely using it as an example of the relationship between features.

1 answer


Standard ways for making something more visible:

  1. Make it bigger than other things on the page (image, text, whatever)
  2. Use indentation
  3. Use contrasting colors (if the rest of the site is dark, use light colors, or vice-versa)
  4. Positioning. (Doctype seems to be using positioning, because questions are placed on top of the answers)

It sounds as if you also want to show dependency relationships:

  1. Positioning (answers only make sense in the context of questions, so they are below it, not above it)
  2. Indentation and size. (eg a header is larger and the text is indented)
  3. Having the dependent items appear or disappear (or otherwise change) when the independent item is clicked
  4. Visual lines or boxes that relate items to each other

Neither of these lists are exhaustive of course.

Answered over 8 years ago by Travis Little