Skip to content
loading...

A lighter dev.to theme

twitter logo github logo ・1 min read  

I recently saw this issue brought up on the dev.to repo review:

UI contrast and drawing attention to the right places #1470

savovs avatar
savovs commented on Jan 06, 2019

Is your feature request related to a problem? Please describe. The article view is hard to read because the UI makes you look to the right instead of at the article: example of box-shadow being too distracting

Because dev.to is about reading articles, the article should attract the most attention. The box-shadows are very flavouful, but when there's a lot of text to read it quickly gets tiring to read.

Describe the solution you'd like We can make it easy on the eyes by enforcing a visual hierarchy by tweaking color values, so that the user doesn't have to try hard to look away from the right (like I did). Basically the area of most importance (the article) would have the most contrast, the second area in importance would have less contrast (black would turn to gray), and so on...

Here's what I came up with in the browser inspector, I accidentally made the article text gray though, it should be black: reduced contrast of less important elements

Describe alternatives you've considered Could also reduce the color value of every less important element, like text, not just the box-shadows, so that the article font is blacker and hence have more contrast than the less important stuff.

Additional context This reasoning is rooted in visual design principles, see section 3, titled Value, of this style guide.

Having a hierarchy of value ranges for specific elements can improve readability and accessibility. When I first saw dev.to I quite liked the bold box shadow, I think it adds personality. But with time I just naturally resort to the Firefox reader view because the article view is too straining for my eyes.

There is an issue related to this like #1273, but I think it doesn't make sense in the big picture. The overall experience should be non-straneous so that users can read more articles, only after this is accomplished should people think about how to get a better lighthouse score.

I thought I'd take a swing at simplifying the article theme a bit, using the Stylus extension. Here's where I ended up:

screenshot

If you like this and want to install it, you can find it here!

What do you think? What would you change?

twitter logo DISCUSS (2)
markdown guide
 

Nice theme!

I would experiment with adding some lines to divide sections. Like a solid line between 'More from ...' and 'Trending...' section. Since they have the same styling and font sizes it's visually hard to distinguish.

 

Should experiment with the cover image IMO because the original issue is only relevant when there's a cover image.

Classic DEV Post from Jan 24

What was your win this week?

Got to all your meetings on time? Started a new project? Fixed a tricky bug?

Conlin Durbin profile image
Software Engineer at @HackerRank πŸ’» Working on http://stdio.app βš’οΈ writing at http://dev.to/wuz ⌨️ art+community+tech πŸ‘ΎπŸŽ¨πŸ˜ http://pronoun.is/he

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❀️