A Web Design Crash Course: From Developer to Developer

> Black text on a white background can cause eye strain because of too much contrast. I use dark greys for my content. Then, there is still a lot of contrast, but not as much as there would be with black text.

Is there such thing as having too much contrast, in the context of text relative to its background color? I still feel that this blog's text needs more contrast, not less. Perhaps it's only me, but the gray text used here is not contrasty enough for my eyes, at least on my monitor, and I find myself straining to read.

My favorite blog design is https://paulstamatiou.com/. It has just the right balance in contrast, and the text's spacing is perfect. I can read comfortably. I wish I could explain how it is more readable, but it just feels right.

EDIT: It's probably just my personal preference. I do notice #333333 (gray) is probably the lightest gray that's acceptable for me. The blog is using #4a4a4a, which feels a little too light. Also, I find HN to be very readable (which uses absolute black text), and I'd rather have a black text with light background than a gray text on a white background.

Re: A Web Design Crash Course: From Developer to Developer

#6

Post by aspit » Tue, Aug 21, 2018, 4:30 PM UTC

otterpro wrote: post #5

> Black text on a white background can cause eye strain because of too much contrast. I use dark greys for my content. Then, there is still a lot of contrast, but not as much as there would be with black text. Is there such thing as having too much contrast, in the context of text relative to its background color? I still feel that this blog's text needs more contrast, not less. Perhaps it's only me, but the gray tex…

Here's more on that! http://uxmovement.com/content/why-you-should-never-use-pure-...

Re: A Web Design Crash Course: From Developer to Developer

#7

Post by ghostbrainalpha » Tue, Aug 21, 2018, 4:40 PM UTC

The link has changed. This is the correct URL.

https://zen-of-programming.com/design

Re: A Web Design Crash Course: From Developer to Developer

#8

Post by Theodores » Tue, Aug 21, 2018, 4:46 PM UTC

I think that we still need some explaining to do when it comes to developer friendly website design.

Truth is that, right now, in 2018, we can get rid of the hacks, libraries, polyfills and everything else needed to support old browsers. The old 'block layout' methods need to be forgotten and the new CSS grid method can be adopted by new developer/designers. Then this CSS grid needs to be specified with CSS variables for all the bits that change. Then media queries and vanilla javascript can be used to adapt to viewports and cater for interaction. There is not much too it unless you are writing a replacement for Excel in javascript for the web. But then you are writing an application and not designing a website of content.

Then there is the truth about design. A lot of 'design' has been artistic flourish that does not need to be there. We kind of know where the search box goes and what icon it has, there is no need for that to be 'designed' by someone that can't code. This is particularly the case when the 'design' places the search box in the footer with an eyeglasses icon just because the 'designer' thought that they could add their artistic flourish in such a way. (This did happen circa 2010).

The convention based UX that has won out over 'artistic flourishes' means that there is less to 'design'. Choosing fonts and colours is also a bit of a luxury, an existing brand will already have these things. If you were designing for Ford you have a good idea of what colour blue the headings and buttons will be coloured. Equally, if you are creating a site for just yourself then you can experiment with these things as you build out the content.

Anyway, this 'web design crash course' hinted at some of the CSS goodness we have today, e.g. the use of CSS variables, but I am wanting more, a wholesale forgetting of the hacks and cruft with a simple way to do stuff effectively and in a maintainable way with the new CSS shiny.

Re: A Web Design Crash Course: From Developer to Developer

#9

Post by debaserab2 » Tue, Aug 21, 2018, 4:53 PM UTC

Theodores wrote: post #8

I think that we still need some explaining to do when it comes to developer friendly website design. Truth is that, right now, in 2018, we can get rid of the hacks, libraries, polyfills and everything else needed to support old browsers. The old 'block layout' methods need to be forgotten and the new CSS grid method can be adopted by new developer/designers. Then this CSS grid needs to be specified with CSS variables…

> Truth is that, right now, in 2018, we can get rid of the hacks, libraries, polyfills and everything else needed to support old browsers

Oh how I wish that was true

Re: A Web Design Crash Course: From Developer to Developer

#10

Post by string » Tue, Aug 21, 2018, 4:53 PM UTC

As an actual person employed as a designer and developer, I find articles listing arbitrary design rules very strange indeed. This is like someone enforcing you to use a coding style before you've even learnt the basics of programming.

All these rules will do is ensure you create a website that looks mostly like one designed by the person who has written the article. If you want to create a landing page for genericstarup.io, then maybe that's fine, but it's kind of like building a website by exclusively copy pasting tutorial snippets that you don't understand.

I also disagree quite strongly with the rules laid out in this particular article, but that's another issue...