User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
One of my client(He has a SEO agency)need to design a website with blog. He want 100% black and white design. That means text, images everything are 100% black and white.
Is there any UI/UX research about black and white web design? Is it a good concept UI/UX point?
Note : Back and White doesn't mean that his primary color is black. Primary color is very dark grey and text color will be dark grey with pure white background in almost all places.
I am not sure about black and white combination, without any other colors. But I would be very cautious about black - it's usually not recommended to use pure black - it is advised to use shades of grey instead.
Recommended reading:
http://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/ https://ianstormtaylor.com/design-tip-never-use-black/
Hope this helps at least a bit.
Recently I do some design on Eink and due to the special fresh mode on Eink screen most of the interface is only black and white even without any gray. So perhaps it's a way.
Since eink design is also lack of research, at least I find nothing. I conclude some of my own.
Layout is 1st place: Color sometimes can destract the eyes and the make people ignore the layout problem. and now only black and white may call for more attention on the layout, font size and weight to make web balanced. And sometimes this kind of simplism can be beautiful.
Making sure button can be clicked: Clickable button can be missed when colors are gone. You can use underline or obvious button style to make sure users' notice.
Try the styles that fit for black and white: Some styles are very suitable for black and white, for example the handwriting, doodle, geometric and some oldstyle things. So It can be tried to combine the elements.
It's hard to do all things only black and white. Try to persuade clients, or treat it as a challenge :) it can be fun.
I like the web design of Remarkable(an eink brand). Though its web is not only black and white, it may give some inspire.
The attraction to the monochromatic sites that have been appearing in fashion/high end websites are part of the esthetic of showcasing minimal UI elements while giving attention to product information, imagery and products and letting those showcased items sit in a backdrop similar to a studio or gallery presentation. The hardships that come with a design of such could come to showing visual hierarchy, call-to-action buttons, transitions with UI design and also context if/where the user is. With great care and expert planning you can plan a design devoid of colors by implementing tints/shades and treatments to show users flows and paths.
I hope this helps you
Black and white is always in style. You can do a lot with just 2 colors. Consider it a creative constraint and you may become a better designer for it because you'll depend less on color. Provide affordance by other means such as shape and texture. Same for any 2-color design.
Make sure interactive elements are perceivable. Links and buttons for example can be underlined and/or inverted like https://tink.uk does. Be creative and accessible :)
I recall research from somewhere that said near black and white #111111 on #efefef was more comfortable than #000000 on #ffffff for web reading.
From a UI/UX point of view, I am on the opposite side of those who are against pure black or pure white. However, I don't think you should have pure black against pure white background, primarily because the contrast ratio of 21:1 is quite sharp. I think a contrast ratio around 18:1 to 19:1 is a little more soothing to the eye.
The question is which one would you go off a little bit? In this site itself, the text is not pure black but rgb(36, 39, 41) but the background is pure white.
I think it may be better to have it go the other way around namely have the text as #000000 and make the background a bit warmer ; this reduces the overall blue light levels; I basically asked a question regarding Is a pure white background generally better (if the user preference is "light mode" that is)? Over say something with a lower color temperature.
However, on a black and white site you can't make it go "warmer" because to make it warm you basically reduce your blue levels as such it will break your requirement.
To put into context, here's the swatch I had generated to see the resulting contrast ratio vs the color against black text. The top row is my base color which I am using the #f6f3e7 value at 18.893 contrast ratio. It is actually higher compared to the gray scale one at #f1f1f1 with 18.592 ratio.
