Grow your CSS skills. Land your dream job.

Thoughts on design and copy

  • # April 21, 2013 at 12:47 pm

    @jurotek

    Whilst there is some sense in what you say, I am sure I speak for some others on this thread (not all, but some) that when I offer design advice, it is not based on my opinion, but what I feel is a solution to the design problem the OP is facing, hence why I have justified most of my reasoning. Design is not subjective, opinions are. Trouble is, it’s a fine line.

    I do agree though with being careful with advice given, and do not let anyone steer you away from your original goal.

    # April 21, 2013 at 11:27 pm

    “Design is not subjective, opinions are.”

    Right. But, that applies to critique of design with emphasis on how it conforms to maintainability, portability, extensibility and so on. In another words, is the design good or bad? And that’s not what’s being discussed by all the advice given here tho.

    # April 22, 2013 at 1:57 am

    I personally never use #000 text on white backgrounds, darkest I normally go is #222, mainly for headings. I feel this enhances the reading experience, not reduces it. – @croydon86

    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”.

    I like thin types, tried Open Sans 300 too but went with Ubuntu. – @crocodillon

    Open Sans renders very well at small sizes. Perfect for text type. Either way, thank you for not using Helvetica.

    For the header, you previously mentioned to make it full width. Are you suggestion to bring the background color back? – @crocodillon

    Yes. I would possibly experiment with the original dark shade you had – @croydon86

    I disagree with bringing back the background of the header. At least the color you had before. It conflicts with the blue.

    Additionally, when I posted the screenshots of your site without the background header and footer, it seems you took that and just implemented it as a final decision. I was showing you that removing the backgrounds also removes the conflicting colors. And the footer background does not compliment the other colors as it stands nor does @croydon86‘s example.

    If you remove all the styling, sit back and look at your content, what do you see? Where is the relevant content? That is where the creativity is.

    Click to zoom

    # April 22, 2013 at 7:20 am

    > Additionally, when I posted the screenshots of your site without the background header and footer, it seems you took that and just implemented it as a final decision.

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

    (nothing is ever final though)

    @jurotek, Thank for your comment, I especially like what you said “that the success of your website will be measurable over time” :)

    @chrisburton

    > Where is the relevant content? That is where the creativity is.

    The whole ‘Create the best…’ section (and sub sections) I suppose. I’m not sure but I guess you mean that’s the place to be original and creative (instead on side content like header and footer). That makes sense, I’ll work on it :)

    # April 22, 2013 at 7:29 am

    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.

    # April 22, 2013 at 9:26 am

    > 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.

    # April 22, 2013 at 10:00 am

    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

    # April 22, 2013 at 12:36 pm

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

    # April 22, 2013 at 3:11 pm

    @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.

    # April 22, 2013 at 3:14 pm

    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.

    # April 22, 2013 at 8:22 pm

    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.

    # April 22, 2013 at 11:05 pm

    @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.

    # April 22, 2013 at 11:06 pm

    @crocodillon Very nice!

    # April 23, 2013 at 3:55 am

    > got my first Pen featured today

    @crocodillon dude, that’s fresh! congratulations

    # April 23, 2013 at 7:26 am

    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).

Viewing 15 posts - 61 through 75 (of 77 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".