Thoughts on design and copy

[chrisburton]

I’m so confused right now, I feel like a woman :P – @crocodillon

Haha. What? What I meant was that you took what I showed in the screenshots and implemented it without separating the content in any way. I was showing you that removing the backgrounds also removed the conflicting colors on your site.

The whole ‘Create the best…’ section (and sub sections) I suppose.

That just shows what you offer and not really any of your talent. Regardless, that isn’t much content for a potential client to make a decision to hire you.

I think you should focus on your basic content, first! That’s the most important thing.

[Alen]

> Reducing contrast weakens the readability of the text. I’d love to read your opinion on why you think it “enhances the reading experience”.

Light is being projected by LCD making complete black text too contrasty. It might look good on paper where light is being reflected, but for me, extreme black/white are too much for monitors. So I always back off little. @chrisburton

@CrocoDillon, think of it this way… if you were hiring a general contractor or carpenter and you were viewing potential candidate website. What kind of questions would you need answering? What concerns would you have? What would make you contact them for service? Portfolio? Mission statement, a guarantee, and so on?

Sometime design is not as important, as clearly communicating with your target audience. If a carpenter was hiring you for a small 3 page website, would he/she know anything about design? Does it have to be a prerequisite? or does the client just need a website?

This is why market research is important and why you need to identify who your target customer is. Because marketing to 20-something year old coming out of college, who is looking to start a small business is different from marketing to established 10+ year old contractor business.

[chrisburton]

Light is being projected by LCD making complete black text too contrasty. It might look good on paper where light is being reflected, but for me, extreme black/white are too much for monitors. So I always back off little. – @alenabdula

I think this highly depends on the brightness of your screen and possibly even your environment (dark or well lit room) however, studies have shown black text on white backgrounds provides high contrast and preferred readability.

Colors with higher levels of contrast were expected to lead to higher readability ratings
and retention (quiz) scores. This hypothesis was largely supported with respect to
participants’ perceived readability. For both types of material, the means were
significantly different, and were in the correct order, with the exception that the mean for
the light blue on dark blue rating was higher than the black on white rating with the
educational page. The traditional black on white page was clearly the most readable
based on participant ratings. Tukey’s post hoc tests indicated that the black on white page
was significantly or marginally significantly higher than all other colors. Surprisingly, the
white on black and light blue on dark blue pages were largely equivalent on readability
ratings, despite the fact that the white on black page represents maximum contrast. Two
potential factors could be responsible for this unexpected result. First, users are more
familiar with black on white, which may in turn have a positive impact on readability.
This would be partially consistent with the Nielsen quote that begins this paper (Nielsen
2000), though white on black was not found to be “almost as good” as black on white, as
stated in the quote. Another factor than may have influenced the high rating of the blue
page is that previous research has found a significant relationship between readability and
subjective preference (Shieh and Lin 2000), and the blue page was the most preferred
page as predicted. Although, it’s important to note that we cannot say if the readability
lead to the preference or vice versa. – University of Missouri

[Alen]

I don’t disagree, I’m just saying I like to back off little while still maintaining readability.

[croydon86]

@chrisburton

> I don’t believe that makes a lot of sense. Reducing contrast weakens the readability of the text. I’d love to read your opinion on why you think it “enhances the reading experience”.

No I totally disagree with this. Absolute black in design is not natural and provides too much contrast. It can also assist in eye strain as @alenabdula mentioned when used as text. (I should know with my eye sight!). Why should the user have to adjust their screen to get the best reading experience? Nothing is absolute black. In design, print, art, photography, etc. In real life even. You mention books earlier, yet most text in books are not actually printed black if you look closely. Just because the max we can go is #000 does not mean this is automatically the best setting for text.

Interesting paragraph here, number 3 http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/

Also a few well known/design sites, none using absolute black on white…

This website, CSS tricks
http://www.smashingmagazine.com/
http://trentwalton.com/
http://www.ebay.co.uk/
https://www.apple.com/
http://www.microsoft.com
http://alistapart.com
http://typecast.com
http://www.google.com

I think you’ll agree those are some realistic examples of what many designers aspire to/or have spent millions on testing (E.g Google, Ebay)

In fact, I would actually like to see an established/well designed website using absolute black on white, or these studies you speak of.

Your theory must also apply to black text on light grey backgrounds, as technically the range would be the same as White and dark grey.

But regardless of all the above, statistics, and whatever else we think we know about what should be the best combination, are you honestly telling me that #000 text feels more natural to you, and easier on the eye than #333? If so, I guess we will just have to agree to disagree.

P.S. This post is longer than I cared to write on the matter, I am just a bit confused how someone who seems to have a good understanding of typography/design (from previous posts) comes to this conclusion.

[croydon86]

Also @chrisburton that information talks about high contrast, black on white. It is not talking about absolute black (#000) on white. To many people, #333 is black. Maybe here lies some confusion.

[CrocoDillon]

Can’t say anything useful about black on white contrast but it’s an interesting discussion :)

@chrisburton, @AlenAbdula, you’re right. I’ve been focusing too much on hurting my brain about design and the back-end (and less important things, got my first [Pen](http://www.codepen.io/CrocoDillon/full/EivcB) featured today ^^ it’s not even that interesting, but I guess it looks pretty) that I’ve forgotten about content. I’m gonna work on that for a bit.

[chrisburton]

@croydon86 You raise some great points. If you read scientific studies on the matter, you will find that the luminosity of the screen does have an effect on readability as well. But I think that goes without saying. If light is reflecting the eye it will be harder to read.

One could argue that since mobile device usage is rapidly progressing, `#000` on `#FFF` could improve when viewing outdoors.

are you honestly telling me that #000 text feels more natural to you, and easier on the eye than #333?

I’m glad you brought this up because I see where the study above talks about blurriness of the text regarding dyslexia. However, even testing on my own site, `#000` causes weird rendering of the letterforms alone.

In fact, I would actually like to see an established/well designed website using absolute black on white, or these studies you speak of.

In the link below, you can also find more scientific studies that have been cited for this particular one. http://lite.mst.edu/media/research/ctel/documents/LITE-2003-04.pdf

And here a few sites that use black on white that I just came across.
http://licenselab.com
http://www.todaythe12.com/#section_about (uses a mixture of pure black and shades of black)

To many people, #333 is black. Maybe here lies some confusion.

Perhaps.

I’m glad we could have a healthy discussion on this topic.

[chrisburton]

@crocodillon Very nice!

[rodolpheb]

This conversation is very interesting.
When I first read the part on the typo I immediately thought about dyslexia.

@croydon86 pointed it out very well.

> Ten to fifteen percent of the US population has dyslexia according The Dyslexia Research Institute Mission.

>As many as 1 in 10 people in the UK are dyslexic. Given that the current population of the UK is around 60.2 million according to National Statistics Online.

That represents a significant number of users…

I made some researches and found a specific font for dyslexia (which is another topic).

I totally agree with not using black (#000) font on white background (#fff). I’ve no problem with my eyes but (according to all studies) I feel tiredness quicker than while reading a book. Due to this point I don’t implement these colors but try to reduce the contrast.

I assume, with #ccc color font, the issue will come from WCAG which won’t validate your content (non conformance to AA level). WCAG requires high contrast and doesn’t consider dyslexia (not yet I suppose).

[croydon86]

@chrisburton

> However, even testing on my own site, #000 causes weird rendering of the letterforms alone.

Yes!! I completely forgot about this reason. In fact I think it was this exact reason that first made me experiment with colour shades. I find this is worse on PC’s.

The link you provided was an interesting read.

> And here a few sites that use black on white that I just came across. http://licenselab.com http://www.todaythe12.com/#section_about (uses a mixture of pure black and shades of black)

Good find. Sites like Licenselab that use heavy contrast throughout can get away with it in my opinion. Although for me personally, even then I would still drop the body text back a little, while keeping the absolute black for design elements.

todaythe12 seem to be using a strange technique, transparent colour for text, with a black text shadow with all values set at 0px. I can’t seem to see the reasoning behind this, there doesn’t seem to be any difference as opposed just using black.

> I’m glad we could have a healthy discussion on this topic.

Agreed!

[croydon86]

> I’ve forgotten about content. I’m gonna work on that for a bit.

Good move and nice pen!

[Author]

Posts