I am thinking of designing a website that will have no color other than black, gray, and white (including links).
Will the absence of colors such as blue, green, etc. affect the user experience of my design? If yes, how?
Answer
I am thinking of designing a website that will have no color other than black, gray, and white.
May I ask what the rationale is behind this decision? The reason I ask is because I don't think a pure B/G/W is suitable for most commercial designs, unless client's branding fits that scheme. So before you decide to go with this route, make sure your design decision is appropriate for what you're doing.
Having that said, B/W sites can be beautiful!
Due to the lack of colors, a few elements may lose their typical affordance. So you need to consider them when it comes to styling:
Text Links
With color links, you can get away with not having them underlined. With black links, you need to either underline them(although this may introduce readability issues in a big block of text, with heavy linking), or style them differently. A typical solution I've seen is giving links a faint gray background color, or dotted underline with light color.
Buttons
Most minimalist B/W sites have a "flat" interface. So your typical 3D bubbly buttons may not look right with the overall design. If you are to go with the flat look throughout, maybe use a "flat" drop shadow as well. This way, you maintain the design consistency, and achieve the affordance on the buttons.
Readability
Some artistic sites use white text on black background. This is OK since the copy are typically short, and are meant for scanning rather than for reading. The nature of those sites are more of a showcase of photography or other types of art work. However for sites that are text heavy, I'd avoid doing a dark theme. I learned the hard way. I had to pulled the design due to overwhelmingly negativity feedback.
Images
If the content is user generated (as in, out of your control) then you need to consider if they'll look right with the rest of the site design. But typically this isn't too big of an issue.
There are probably more issues however, that's all I can think of right now.
There are some techniques you can use when it comes to B/W designs:
White Space and grouping:
Not having colors to accentuate the hierarchy of the elements on the site, you need to resort to typographical treatments and use of white space. I recommend reading The Gestalt Principles.
White as a color
This is one of my favorite techniques to use. If you make the site or content area background gray or light gray, then you can use white as the accent color. This buys you one extra color. Also the subtle difference between white and a light gray also establishes layout strucuture as well.
Bold photo statement
Obviously you can do this with a colorful site too. With the minimalist design that typical comes with B/W sites photos get extra attention. They're typically the corner piece of the site, or a particular content article.
Gray has temperatures
#e8ecec 
#ecece8 
Gray is a magical color. Its neutral tone can change like an illusion based on the surrounding colors. In the case of a pure B/W design, you still can affect the site's mood by choosing a warm or cold gray. Of course, this is technically cheating since it won't be on a pure gray scale.
Use patterns
Just because you're stuck with a few solid colors to play with doesn't mean the site has to be bare. You can use subtle geometric patterns to give the site more visual polish. Of course, use it appropriately so it's not distracting. http://www.squidfingers.com/patterns/ has some excellent geometric patterns that can be easily converted to gray scale.
Here are some pretty good sites that showcase B/W Minimalist designs. (not all designs are pure B/W though)
No comments:
Post a Comment