EightShapes, LLC is a user experience design firm specialized in web sites and web applications.

Black or White or Both or More?

In about a week we’ll be giving away our documentation template system for creating deliverables and wireframes. In preparation for releasing it to whoever wants it, we’ve been polishing the system files and tidying up a lot of loose ends.

One thing that’s been a constant since creating v2 of our internal system back in 2007 is the solid black bar at the top of the template’s page layout. Now, I’m thinking we either shift it to a white top and gray bar or offer multiples in a way to demonstrate that the system is easy to reconfigure.

But, which one do you like, black or white?

I’d love to read your comments on the subject…

UPDATE: Based on initial reader comments, we’ve created a nonprinting black bar template, revealing a more white header when printed on paper. When viewing in PDF, the bar remains visible.

RSS 2.0  |  Trackback


Comments (16)

  1. Michael Marotta says:

    I think the black looks better on screen but I hate wasting ink, so White.

  2. Rob Fay says:

    I prefer the black as default but like the option of offering multiples.

  3. Jenn Sturm says:

    I prefer the white. It distracts less from the content on the page.

  4. Brian Verhoeven says:

    I prefer black. Multiples would be cool.

  5. Livia Labate says:

    I’ve been using it long enough to have a very strong opinion: WHITE. The black wastes SO MUCH INK. Save the planet and save some money. :)

  6. Geoffrey Shott says:

    Definitely keep the black bar. Best case scenario would be offering multiples.

  7. Mike says:

    Black is sexy! Draws you in to the deck immediately…IMHO.

  8. Alex Fisken says:

    I’d say white b/c you know these will get printed – but perhaps you can beef up the font size in the header on the white version for readability.

  9. Rob Fay says:

    So now it seems multiples are in order. Black for digital needs and white for printable needs :)

  10. While the White is minimal and nice, aesthetically, my focus is taken away from the content. I’d go with the black.

  11. France says:

    I vote for the black, brings out the document content; though I’ve tended to use a contrasting-enough gray for readable metadata.

  12. Chris Detzi says:

    I’ve had people complain about printing the black. WHITE for sure.

    C

  13. Orange.

    Seriously. We use brand blue (actually, several tints of it, to add some fun) and do not have issues with distracting the user. Had to switch to the same design in purple when working as a subcontractor for someone else, when we switched logos to the primary vendor. Similarly, I blew off the legacy Nextel black and went with yellow at Sprint. Makes people happier, at all levels, as far as I can tell.

    But I have never been a big believer in “wireframes must be black and white.”

    Ink use? Increasingly, everything is seen on screen, so it doesn’t matter as much as it used to. If you seriously were going to have to print, photocopy and fax, never that much black. No more than 80-90% gray, to make sure the density doesn’t get too high for awful or un-calibrated printers.

  14. Nathan Curtis says:

    Steven,

    Thanks for your comments. To clarify one aspect, the colors of the deliverable template (the black bar at the top, type and color of annotation overlays, etc) is probably orthogonal to the “Wireframes must be black and white” argument. We’re talking deliverables here, not wireframes (although I disagree with your belief regardless :) ). The user, therefore, is the reader of your PDF (a software engineer, a product manager, etc), not the end customer who traverses your implemented experience or participates in a usability test.

    Nathan

  15. James Melzer says:

    Nathan, I love the black on-screen, but I’m gong to vote for the white one. We have always stuck with a white header and dark separator due to issues with printing.

  16. Black helps create a “blind spot” you can easily ignore and focus on the content of the page. For onscreen, that’s better. However, if printing, then the black wastes a lot of ink.

    Perhaps use the White, but have a more visible split in the top portion, using a combination of thick and thin lines:

    =========————————-

Add a Comment

Email addresses will not be published. Required fields are marked *