2

Often I am asked to include specific sliders, large image galleries and certain stylized elements in my designs. I am not sure how to do this in the wireframe state of the process as they seem purely style elements and not necessary in the wireframes.

However, if you already know for example you are going to need a blurred part or (color) overlay over an image to display text properly, would you use this in the wireframe as well?

And if so, how would you do this in either low or hi-fi wireframes? It seems to me this is not in place for low fi wireframes, but possibly helpful in hi-fi wireframes.

Here is an example of the desired end product that is requested and 3 ways I came up with to display this in wireframes. I am currently using 2 as I think 3 is too detailed/styled but I often get comments from clients like 'You forgot to make the bar transparent' or 'It doesn't look like the example I gave you' so I'm debating to use number 3.

enter image description here

Improve this question

1 Answer 1

Reset to default
3

I think adding a general pattern to the overall rectangle would solve the issue of displaying the transparency of the overlay, without the unbalanced feeling of your #3.

enter image description here enter image description here enter image description here enter image description here

I realize these start to cross the line of simplicity in a wireframe. These are merely examples to show the thought behind the idea. I'd work on better refining the idea to a more solid, simplistic depiction of a pattern behind the overlay.

Improve this answer
1
  • 1
    I think the third version would work the best if the contrast of the pattern is narrowed.
    – Malte
    Aug 31, 2017 at 13:20

Your Answer

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

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